当前位置: 首页 > 工具软件 > si-log.js > 使用案例 >

jQuery-validate.js

江高飞
2023-12-01


参考:

http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html

http://www.cnblogs.com/si-shaohua/p/3780321.html


自定义规则:

	$.validator.addMethod("isZipCode", function(value, element) {   
	    var tel = /^[0-9]{6}$/;
	    return this.optional(element) || (tel.test(value));
	}, "请正确填写您的邮政编码");
	$.validator.addMethod("username", function(value, element) {   
	    var tel =  /^[a-zA-Z]\w{5,19}$/;
	    return this.optional(element) || (tel.test(value));
	}, "由数字、字母、下划线组成,不以数字开头,长度为6-20");

案例:

					<form action="" class="rightForm emailForm active">
							<input class="inputText" id="" name="email" type="text" placeholder="请输入常用邮箱" />
							<input class="inputText" id="username" name="username" type="text" placeholder="用户名" />
							<input class="inputText password" id="password" name="password" type="password" placeholder="设置密码" />
							<input class="inputText" name="confirm_password" type="password" placeholder="确认密码" />
							<div class="validate">
								<input class="inputText" name="ZipCode" type="text" placeholder="验证码" />
								<img src="img/index/validate.png"/>
								<a class="blue" href="javascript:;">看不清?换一张</a>
							</div>
							<input class="submit" type="submit" value="注册"/>
							<div class="recommend"><input class="ignore" type="checkbox" name=""/><span>填写推荐人用户名</span></div> 
							<div class="recommend accept"><input class="" type="checkbox"
								checked="checked" name="accept"/><span>我已阅读并接受<a class="blue" href="javascript:;">《世纪开元服务协议》</a></span><a class="blue leftA" href="javascript:;">立即登录</a></div>  
						</form>


		$(".rightForm").validate({
			rules: {
				email: { //input[name=email]
					required: true,
					email: true
				},
				username: { //input[name=username]
					required: true,
					username: true //自定义的验证规则
				},
				password: {
					required: true,
					minlength: 5
				},
				confirm_password: {
					required: true,
					minlength: 5,
					equalTo: ".password" //与$(选择器) 相等
				},
				ZipCode: {
					required: true
				},
				accept: {
					required: true
				}
			},
			messages: {
				username: { //input[name=username]   
					required: "请输入用户名" //对应所需做的验证 
					/* username: ""*/ //为空,使用 默认提示
				},
				confirm_password: {
					equalTo: "两次输入的密码不一致"
				}

			},
			ignore: ".ignore", //忽略某些元素不验证,""里是jquery选择器
			debug: true, //不提交数据, 只做测试
			submitHandler: function submitHandler(form) {
				//用其他方式替代默认的submit
				/*alert("submitted");   
    form.submit();*/
				print(132546);
				var userID = $("#username").val();
				var password = $("#password").val();
				console.log(userID, password);
				$.ajax({
					type: "POST",
					url: "http://datainfo.duapp.com/shopdata/userinfo.php?userID=" + userID + "&password=" + password + "&status=register",
					success: function success(data) {
						print(4564);

						if (data == 0) {
							alert("用户名重名,请重新输入");
						} else if (data == 2) {
							alert("系统异常,请稍后再试");
						} else if (data == 1) {
							print(123);
							alert("注册成功");
						}
					},
					error: function error() {}
				});
			}
		});
messages_zh.js
		$.extend($.validator.messages, {
			required: "这是必填字段",
			remote: "请修正此字段",
			email: "请输入有效的电子邮件地址",
			url: "请输入有效的网址",
			date: "请输入有效的日期",
			dateISO: "请输入有效的日期 (YYYY-MM-DD)",
			number: "请输入有效的数字",
			digits: "只能输入数字",
			creditcard: "请输入有效的信用卡号码",
			equalTo: "你的输入不相同",
			extension: "请输入有效的后缀",
			maxlength: $.validator.format("最多可以输入 {0} 个字符"),
			minlength: $.validator.format("最少要输入 {0} 个字符"),
			rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
			range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
			max: $.validator.format("请输入不大于 {0} 的数值"),
			min: $.validator.format("请输入不小于 {0} 的数值")
		});



 类似资料: