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}." )


效果

jquery中的active_#validation驗證插件






今天推薦一首歌啊   《給未來的自己》        e1ffc1