jquery-validation插件实现基本的表单验证

jquery-validation 是一款强大的表单验证插件，使用也比较方便，只需导入相应的jquery 文件就可以了，如果想要实现更好的验证效果，可以下载插件后，根据demo 选择合适的效果，并通过查看源代码，导入相应的 文件即可，下面 演示一个简单的表单 验证实例：

先下载相应的插件，然后导入相应的 js文件 和 某个版本的 jquery 文件， 我们 导入 jquery.validate.js

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/validate/jquery.validate.js"></script>

 form表单代码 ，jquery-validation 的验证规则是 根据 name 属性来的，所以都要加上name 属性

<form id="inputForm" action="www.baidu.com">
用户名 ： <input type="text" name="username" /><br/><br/>
密码 ： <input id="pwd" type="text" name="pwd" /><br/><br/>
确认密码 ： <input type="text" name="repwd" /><br/><br/>
邮箱 ： <input type="text" name="email" /><br/><br/>
身份证号 ： <input type="text" name="card" /><br/><br/>
<input type="submit" value="sumbit" />
</form>

script 验证代码

<script type="text/javascript">
	$(function(){
		
		//自定义拓展表单验证插件规则
		// arg1 : 拓展规则名， arg2 ：回调函数 (验证时进入，正确 返回 true 错误返回 false) arg3 ： 错误信息
		//回调函数 ： arg1 当前验证的文本框的值
		//arg2 当前验证的dom对象 arg3 调用验证规则时的参数
		$.validator.addMethod("idCard",function(value,element,params){
			return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);  //身份证的正则表达式
		},"身份证号不合法");
		
		
		//验证表单 添加验证规则与错误信息 根据  name 属性 来定位 input
		$("#inputForm").validate({
			rules : {
				username : {	//不能为空 长度不能小于 6
					required : true,
					minlength : 6
				},
				pwd : {	//不能为空  只能为数字  长度不能小于 6
					required : true,
					digits : true,
					minlength : 6
				},
				repwd : {
					required : true,
					minlength : 6,
					equalTo : "#pwd"    //判断与某个属性的值是否相等 ，使用 id 查找元素 
				},
				email : {
					email : true  //判断邮箱格式
				},
				card : {	//添加 拓展的 验证规则
					idCard : true
				}
				
			},
			messages : {
				username : {
					required : "用户名不能为空",
					minlength : "用户名长度不能少于{0}位"  //{0} 为 占位符 与 rules 中的值相同
				},
				pwd : {	//不能为空  只能为数字  长度不能小于 6
					required : "密码不能为空",
					digits : "密码只能为数字",
					minlength : "密码长度不能小于{0}位"
				},
				repwd : {
					required :"确认密码不能为空",
					minlength : "确认密码长度不能小于{0}位",
					equalTo : "两次输入密码不一致"    //判断与某个属性的值是否相等 ，使用 id 查找元素 
				},
				email : {
					email : "邮箱格式不合法"
				}
			}
			
		});
		
		
		
	});
	
</script>

也可以为 错误信息定义简单的样式， 错误信息label 标签是 验证错误是，自动生成的，可以查看源代码，查看

<style type="text/css">
	label.error {
		color : red;
	}
</style>

插件的其他提供的验证规则， 有其他需求的，也可按照上面方法 自定义拓展

required: "This field is required.",
		remote: "Please fix this field.",
		email: "Please enter a valid email address.",
		url: "Please enter a valid URL.",
		date: "Please enter a valid date.",
		dateISO: "Please enter a valid date ( ISO ).",
		number: "Please enter a valid number.",
		digits: "Please enter only digits.",
		creditcard: "Please enter a valid credit card number.",
		equalTo: "Please enter the same value again.",
		maxlength: $.validator.format( "Please enter no more than {0} characters." ),
		minlength: $.validator.format( "Please enter at least {0} characters." ),
		rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
		range: $.validator.format( "Please enter a value between {0} and {1}." ),
		max: $.validator.format( "Please enter a value less than or equal to {0}." ),
		min: $.validator.format( "Please enter a value greater than or equal to {0}." )

效果

今天推荐一首歌啊   《给未来的自己》        e1ffc1