jquery的validate插件
前置知識:默認(rèn)校驗(yàn)規(guī)則
使用方法:按順序引入jquery.js、jquery.validate.min.js和validate-config.js
例:
<script src="xx/jquery.js"></script><script src="xx/jquery.validate.min.js"></script><script src="xx/validate-config.js"></script>
下面是validate-config.js的代碼(這個(gè)文件不是下載的文件脓斩,是自己寫的文件圆雁,起什么名字都行伶授,內(nèi)容是一些驗(yàn)證規(guī)則贵少,如下:)
$.extend($.validator.messages, {
required: "這是必填字段",
ip: "輸入格式不正確",
number: '請輸入數(shù)字',
max: "輸入超過了最大值",
min: "輸入小于最小值",
minlength: $.validator.format( "輸入字符不能少于 {0} 個(gè)." ),
maxlength: $.validator.format( "輸入字符不能多于 {0} 個(gè)." ),
mask: "網(wǎng)關(guān)不可達(dá)",
remote: "該名稱已存在",
equalTo: "兩次輸入密碼不匹配",
notEqualTo: "新密碼不能與原始密碼相同",
pw : "必須包含數(shù)字组砚、英文字母峻呕、特殊字符, 并且大于等于8位"
});
$.validator.addMethod("ip",function(value,element,params){
var ipReg = /^(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/;
if( value === '' ) {
return true;
}
return ipReg.test( value );
},"輸入格式不正確");
代碼第1行到第14行是在添加驗(yàn)證信息利职,第16行后面的代碼是在自定義驗(yàn)證函數(shù),返回值為false則顯示上面的驗(yàn)證信息瘦癌。
上面的代碼是驗(yàn)證規(guī)則的定義猪贪,接下來的代碼是開始進(jìn)行驗(yàn)證:
<script src="xx/jquery.js"></script>
<script src="xx/jquery.validate.min.js"></script>
<script src="xx/validate-config.js"></script>
<script>
var $form = $("#form");
$form.validate( {
rules: {
id: {
required: true
},
ip: {
required: true,
ip: true //這個(gè)不是寫錯(cuò),而是說明了要使用自定義($.validator.addMethod)的ip驗(yàn)證方法
},
username: {
required: true
},
pw: {
required: true
}
},
ignore: '.ignore'
} );
$form.on("submit", function () {
if ( $form.valid() ) { //$form.valid返回值為true驗(yàn)證通過
//驗(yàn)證通過執(zhí)行的代碼
}
})
</script>
第6行至第23行說明了使用哪些規(guī)則讯私,第25行是進(jìn)行表單提交的事件監(jiān)聽热押。
注:如果想改變驗(yàn)證信息在dom結(jié)構(gòu)中的位置,使用errorPlacement斤寇,如下:
$('.lock-form-register').validate({
rules: {
username: {
required: true,
username: true
},
password: {
required: true,
pw: true
},
confirmpwd : {
required : true,
equalTo : "#pw",
pw: true
}
},
errorPlacement: function(error, element) {
//element是被驗(yàn)證的元素桶癣,error是包含錯(cuò)誤信息的label標(biāo)簽
}
});
了解更多,訪問:
http://www.runoob.com/jquery/jquery-plugin-validate.html