jQuery.Validate证验库
jQuery.Validate验证库script src../js/jquery.validate.js typetext/javascript/script二、默认
jQuery.Validate验证库
<script src="../js/jquery.validate.js" type="text/javascript"></script>
二、默认校验规则
(1)required:true?????????????? 必输字段
(2)remote:"check.php"????????? 使用ajax方法调用check.php验证输入值
(3)email:true????????????????? 必须输入正确格式的电子邮件
(4)url:true??????????????????? 必须输入正确格式的网址
(5)date:true?????????????????? 必须输入正确格式的日期
(6)dateISO:true??????????????? 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true???????????????? 必须输入合法的数字(负数,小数)
(8)digits:true???????????????? 必须输入整数
(9)creditcard:???????????????? 必须输入合法的信用卡号
(10)equalTo:"#field"?????????? 输入值必须和#field相同
(11)accept:??????????????????? 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5??????????????? 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10?????????????? 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10]???????? 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10]?????????????? 输入值必须介于 5 和 10 之间
(16)max:5????????????????????? 输入值不能大于5
(17)min:10???????????????????? 输入值不能小于10
三、默认的提示
success: "valid"
nsubmit: Boolean? Default: true??
提交时验证. 设置唯false就用其他方法去验证
onfocusout:Boolean? Default: true??
失去焦点是验证(不包括checkboxes/radio buttons)?
onkeyup:Boolean? Default: true??
在keyup时验证.
onclick:Boolean? Default: true??
在checkboxes 和 radio 点击时验证
focusInvalid:Boolean? Default: true??
提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
focusCleanup:Boolean? Default: false??
如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用
?
// 重置表单?
?
addMethod:name, method, message
自定义验证方法
?
Js代码?
//?中文字两个字节??jQuery.validator.addMethod("byteRangeLength",?function(value,?element,?param)?{??????var?length?=?value.length;??????for(var?i?=?0;?i?<?value.length;?i++){??????????if(value.charCodeAt(i)?>?127){??????????????length++;??????????}??????}????return?this.optional(element)?||?(?length?>=?param[0]?&&?length?<=?param[1]?);?????},?$.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));????//?邮政编码验证?????jQuery.validator.addMethod("isZipCode",?function(value,?element)?{?????????var?tel?=?/^[0-9]{6}$/;??????return?this.optional(element)?||?(tel.test(value));??},?"请正确填写您的邮政编码");??
?
radio和checkbox、select的验证
radio的required表示必须选中一个
Html代码??
<input??type="radio"?id="gender_male"?value="m"?name="gender"?class="{required:true}"?/>??<input??type="radio"?id="gender_female"?value="f"?name="gender"/>??checkbox的required表示必须选中??<input?type="checkbox"?class="checkbox"?id="agree"?name="agree"?class="{required:true}"?/>??checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间??<input?type="checkbox"?class="checkbox"?id="spam_email"?value="email"?name="spam[]"?class="{required:true,?minlength:2}"?/>??<input?type="checkbox"?class="checkbox"?id="spam_phone"?value="phone"?name="spam[]"?/>??<input?type="checkbox"?class="checkbox"?id="spam_mail"?value="mail"?name="spam[]"?/>????select的required表示选中的value不能为空??<select?id="jungle"?name="jungle"?title="Please?select?something!"?class="{required:true}">??????<option?value=""></option>??????<option?value="1">Buga</option>??????<option?value="2">Baga</option>??????<option?value="3">Oi</option>??</select>??select的minlength表示选中的最小个数(可多选的select),maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间??<select?id="fruit"?name="fruit"?title="Please?select?at?least?two?fruits"?class="{required:true,?minlength:2}"?multiple="multiple">??????<option?value="b">Banana</option>??????<option?value="a">Apple</option>??????<option?value="p">Peach</option>??????<option?value="t">Turtle</option>??</select>??
//////////////////////////////////////////////////////////////////////////////////////////////