注册 登录
  • 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

jquery.validate.js的基本用法入门

JavaScript 水墨上仙 1958次浏览 已收录 手机上查看

jquery.validate.js是jquery下的一个验证插件,功能比较强大,早就有所耳闻但是一只没有动手用过,现在在于能够研究一下了。
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录。

国内某大公司的代码

<script type="text/javascript">   
  
function lang(key) {   
    mylang = {   
  
        'ls_input_myb': '请输入您的账户',   
        'ls_myb_email': '漫游币账户为邮箱地址',   
        'ls_login_password': '请输入您的登录密码',   
        'ls_password_length': '密码长度为{0}-{1}位之间',   
        'ls_input_captcha': '请输入验证码',   
        'ls_captcha_length': '验证码的长度为{0}位',   
        'ls_account_email': '账户名为邮箱地址',   
  
        '':''  
    };   
  
    return mylang[key];   
}   
  
</script>   
  
<script type="text/javascript">   
$(document).ready(function() {   
  
    $("#loginForm").validate({   
        rules: {   
            uEmail: {   
                required: true,   
                email: true  
            },   
            uPassword: {   
                required: true,   
                rangelength: [6, 30]   
            }   
        },   
        messages: {   
            uEmail: {   
                required: lang('ls_input_myb'),   
                email: lang('ls_myb_email')   
            },   
            uPassword: {   
                required: lang('ls_login_password'),   
                rangelength: $.format(lang('ls_password_length'))   
            }   
        },   
        errorPlacement: function(error, element) {   
            var placement = $(element.parent("td").parent("tr").next ("tr").find("td").get(1));   
            placement.text('');   
            error.appendTo( placement );   
        },   
        onkeyup: false  
    });   
  
    var accountTipsText = lang('ls_account_email');   
    $("#uEmail").focus(function() {   
        if (!$($(this).parent().parent().next().find('td').ge(1))
.text()) {   
            $($(this).parent().parent().next().find('td').get(1)).html('<span class="font_888_8">' + accountTipsText + '</span>');   
        }   
        $(this).css('color', '#000');   
    }).focus();    
});   
  
</script> 

下面是完整的文章介绍。&nbsp

默认校验规则&nbsp
(1)required:true&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp必输字段&nbsp
(2)remote:”check.php”&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp使用ajax方法调用check.php验证输入值&nbsp
(3)email:true&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp必须输入正确格式的电子邮件&nbsp
(4)url:true&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp必须输入正确格式的网址&nbsp
(5)date:true&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp必须输入正确格式的日期&nbsp
(6)dateISO:true&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22&nbsp只验证格式,不验证有效性&nbsp
(7)number:true&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp必须输入合法的数字(负数,小数)&nbsp
(8)digits:true&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp必须输入整数&nbsp
(9)creditcard:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp必须输入合法的信用卡号&nbsp
(10)equalTo:”#field”&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp输入值必须和#field相同&nbsp
(11)accept:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp输入拥有合法后缀名的字符串(上传文件的后缀)&nbsp
(12)maxlength:5&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp输入长度最多是5的字符串(汉字算一个字符)&nbsp
(13)minlength:10&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp输入长度最小是10的字符串(汉字算一个字符)&nbsp
(14)rangelength:[5,10]&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp输入长度必须介于&nbsp5&nbsp和&nbsp10&nbsp之间的字符串”)(汉字算一个字符)&nbsp
(15)range:[5,10]&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp输入值必须介于&nbsp5&nbsp和&nbsp10&nbsp之间&nbsp
(16)max:5&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp输入值不能大于5&nbsp
(17)min:10&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp输入值不能小于10&nbsp
默认的提示&nbsp
messages:&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbsprequired:&nbsp”This&nbspfield&nbspis&nbsprequired.”,&nbsp
&nbsp&nbsp&nbsp&nbspremote:&nbsp”Please&nbspfix&nbspthis&nbspfield.”,&nbsp
&nbsp&nbsp&nbsp&nbspemail:&nbsp”Please&nbspenter&nbspa&nbspvalid&nbspemail&nbspaddress.”,&nbsp
&nbsp&nbsp&nbsp&nbspurl:&nbsp”Please&nbspenter&nbspa&nbspvalid&nbspURL.”,&nbsp
&nbsp&nbsp&nbsp&nbspdate:&nbsp”Please&nbspenter&nbspa&nbspvalid&nbspdate.”,&nbsp
&nbsp&nbsp&nbsp&nbspdateISO:&nbsp”Please&nbspenter&nbspa&nbspvalid&nbspdate&nbsp(ISO).”,&nbsp
&nbsp&nbsp&nbsp&nbspdateDE:&nbsp”Bitte&nbspgeben&nbspSie&nbspein&nbspg眉ltiges&nbspDatum&nbspein.”,&nbsp
&nbsp&nbsp&nbsp&nbspnumber:&nbsp”Please&nbspenter&nbspa&nbspvalid&nbspnumber.”,&nbsp
&nbsp&nbsp&nbsp&nbspnumberDE:&nbsp”Bitte&nbspgeben&nbspSie&nbspeine&nbspNummer&nbspein.”,&nbsp
&nbsp&nbsp&nbsp&nbspdigits:&nbsp”Please&nbspenter&nbsponly&nbspdigits”,&nbsp
&nbsp&nbsp&nbsp&nbspcreditcard:&nbsp”Please&nbspenter&nbspa&nbspvalid&nbspcredit&nbspcard&nbspnumber.”,&nbsp
&nbsp&nbsp&nbsp&nbspequalTo:&nbsp”Please&nbspenter&nbspthe&nbspsame&nbspvalue&nbspagain.”,&nbsp
&nbsp&nbsp&nbsp&nbspaccept:&nbsp”Please&nbspenter&nbspa&nbspvalue&nbspwith&nbspa&nbspvalid&nbspextension.”,&nbsp
&nbsp&nbsp&nbsp&nbspmaxlength:&nbsp$.validator.format(“Please&nbspenter&nbspno&nbspmore&nbspthan&nbsp{0}&nbspcharacters.”),&nbsp
&nbsp&nbsp&nbsp&nbspminlength:&nbsp$.validator.format(“Please&nbspenter&nbspat&nbspleast&nbsp{0}&nbspcharacters.”),&nbsp
&nbsp&nbsp&nbsp&nbsprangelength:&nbsp$.validator.format(“Please&nbspenter&nbspa&nbspvalue&nbspbetween&nbsp{0}&nbspand&nbsp{1}&nbspcharacters&nbsplong.”),&nbsp
&nbsp&nbsp&nbsp&nbsprange:&nbsp$.validator.format(“Please&nbspenter&nbspa&nbspvalue&nbspbetween&nbsp{0}&nbspand&nbsp{1}.”),&nbsp
&nbsp&nbsp&nbsp&nbspmax:&nbsp$.validator.format(“Please&nbspenter&nbspa&nbspvalue&nbspless&nbspthan&nbspor&nbspequal&nbspto&nbsp{0}.”),&nbsp
&nbsp&nbsp&nbsp&nbspmin:&nbsp$.validator.format(“Please&nbspenter&nbspa&nbspvalue&nbspgreater&nbspthan&nbspor&nbspequal&nbspto&nbsp{0}.”)&nbsp
},&nbsp
如需要修改,可在js代码中加入:&nbsp
jQuery.extend(jQuery.validator.messages,&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsprequired:&nbsp”必选字段”,&nbsp
&nbsp&nbspremote:&nbsp”请修正该字段”,&nbsp
&nbsp&nbspemail:&nbsp”请输入正确格式的电子邮件”,&nbsp
&nbsp&nbspurl:&nbsp”请输入合法的网址”,&nbsp
&nbsp&nbspdate:&nbsp”请输入合法的日期”,&nbsp
&nbsp&nbspdateISO:&nbsp”请输入合法的日期&nbsp(ISO).”,&nbsp
&nbsp&nbspnumber:&nbsp”请输入合法的数字”,&nbsp
&nbsp&nbspdigits:&nbsp”只能输入整数”,&nbsp
&nbsp&nbspcreditcard:&nbsp”请输入合法的信用卡号”,&nbsp
&nbsp&nbspequalTo:&nbsp”请再次输入相同的值”,&nbsp
&nbsp&nbspaccept:&nbsp”请输入拥有合法后缀名的字符串”,&nbsp
&nbsp&nbspmaxlength:&nbspjQuery.validator.format(“请输入一个长度最多是&nbsp{0}&nbsp的字符串”),&nbsp
&nbsp&nbspminlength:&nbspjQuery.validator.format(“请输入一个长度最少是&nbsp{0}&nbsp的字符串”),&nbsp
&nbsp&nbsprangelength:&nbspjQuery.validator.format(“请输入一个长度介于&nbsp{0}&nbsp和&nbsp{1}&nbsp之间的字符串”),&nbsp
&nbsp&nbsprange:&nbspjQuery.validator.format(“请输入一个介于&nbsp{0}&nbsp和&nbsp{1}&nbsp之间的值”),&nbsp
&nbsp&nbspmax:&nbspjQuery.validator.format(“请输入一个最大为&nbsp{0}&nbsp的值”),&nbsp
&nbsp&nbspmin:&nbspjQuery.validator.format(“请输入一个最小为&nbsp{0}&nbsp的值”)&nbsp
});&nbsp

推荐做法,将此文件放入messages_cn.js中,在页面中引入&nbsp
&nbsp

使用方法&nbsp
1.将校验规则写到控件中&nbsp
&nbsp
&nbsp
&nbsp
$().ready(function()&nbsp{&nbsp
$(“#signupForm”).validate();&nbsp
});&nbsp

&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp

使用class=”{}”的方式,必须引入包:jquery.metadata.js&nbsp
可以使用如下的方法,修改提示内容:&nbsp
class=”{required:true,minlength:5,messages:{required:’请输入内容’}}”&nbsp
在使用equalTo关键字时,后面的内容必须加上引号,如下代码:&nbsp
class=”{required:true,minlength:5,equalTo:’#password’}”&nbsp
另外一个方式,使用关键字:meta(为了元数据使用其他插件你要包装&nbsp你的验证规则在他们自己的项目中可以用这个特殊的选项)&nbsp
Tell&nbspthe&nbspvalidation&nbspplugin&nbspto&nbsplook&nbspinside&nbspa&nbspvalidate-property&nbspin&nbspmetadata&nbspfor&nbspvalidation&nbsprules.&nbsp
例如:&nbsp
meta:&nbsp”validate”&nbsp
&nbsp

再有一种方式:&nbsp
$.metadata.setType(“attr”,&nbsp”validate”);&nbsp
这样可以使用validate=”{required:true}”的方式,或者class=”required”,但class=”{required:true,minlength:5}”将不起作用&nbsp

2.将校验规则写到代码中&nbsp

$().ready(function()&nbsp{&nbsp
$(“#signupForm”).validate({&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsprules:&nbsp{&nbsp
&nbsp&nbsp&nbspfirstname:&nbsp”required”,&nbsp
&nbsp&nbsp&nbspemail:&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbsprequired:&nbsptrue,&nbsp
&nbsp&nbsp&nbsp&nbspemail:&nbsptrue&nbsp
&nbsp&nbsp&nbsp},&nbsp
&nbsp&nbsp&nbsppassword:&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbsprequired:&nbsptrue,&nbsp
&nbsp&nbsp&nbsp&nbspminlength:&nbsp5&nbsp
&nbsp&nbsp&nbsp},&nbsp
&nbsp&nbsp&nbspconfirm_password:&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbsprequired:&nbsptrue,&nbsp
&nbsp&nbsp&nbsp&nbspminlength:&nbsp5,&nbsp
&nbsp&nbsp&nbsp&nbspequalTo:&nbsp”#password”&nbsp
&nbsp&nbsp&nbsp}&nbsp
&nbsp&nbsp},&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspmessages:&nbsp{&nbsp
&nbsp&nbsp&nbspfirstname:&nbsp”请输入姓名”,&nbsp
&nbsp&nbsp&nbspemail:&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbsprequired:&nbsp”请输入Email地址”,&nbsp
&nbsp&nbsp&nbsp&nbspemail:&nbsp”请输入正确的email地址”&nbsp
&nbsp&nbsp&nbsp},&nbsp
&nbsp&nbsp&nbsppassword:&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbsprequired:&nbsp”请输入密码”,&nbsp
&nbsp&nbsp&nbsp&nbspminlength:&nbspjQuery.format(“密码不能小于{0}个字符”)&nbsp
&nbsp&nbsp&nbsp},&nbsp
&nbsp&nbsp&nbspconfirm_password:&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbsprequired:&nbsp”请输入确认密码”,&nbsp
&nbsp&nbsp&nbsp&nbspminlength:&nbsp”确认密码不能小于5个字符”,&nbsp
&nbsp&nbsp&nbsp&nbspequalTo:&nbsp”两次输入密码不一致不一致”&nbsp
&nbsp&nbsp&nbsp}&nbsp
&nbsp&nbsp}&nbsp
&nbsp&nbsp&nbsp&nbsp});&nbsp
});&nbsp
//messages处,如果某个控件没有message,将调用默认的信息&nbsp

&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp

required:true&nbsp必须有值&nbsp
required:”#aa:checked”表达式的值为真,则需要验证&nbsp
required:function(){}返回为真,表时需要验证&nbsp
后边两种常用于,表单中需要同时填或不填的元素&nbsp

常用方法及注意问题&nbsp
1.用其他方式替代默认的SUBMIT&nbsp
$().ready(function()&nbsp{&nbsp
$(“#signupForm”).validate({&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspsubmitHandler:function(form){&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspalert(“submitted”);&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspform.submit();&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp}&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp});&nbsp
});&nbsp
可以设置validate的默认值,写法如下:&nbsp
$.validator.setDefaults({&nbsp
submitHandler:&nbspfunction(form)&nbsp{&nbspalert(“submitted!”);form.submit();&nbsp}&nbsp
});&nbsp
如果想提交表单,&nbsp需要使用form.submit()而不要使用$(form).submit()&nbsp

2.debug,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便&nbsp
$().ready(function()&nbsp{&nbsp
$(“#signupForm”).validate({&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspdebug:true&nbsp
&nbsp&nbsp&nbsp&nbsp});&nbsp
});&nbsp
如果一个页面中有多个表单,用&nbsp
$.validator.setDefaults({&nbsp
&nbsp&nbsp&nbspdebug:&nbsptrue&nbsp
})&nbsp

3.ignore:忽略某些元素不验证&nbsp
ignore:&nbsp”.ignore”&nbsp

4.errorPlacement:Callback&nbsp&nbspDefault:&nbsp把错误信息放在验证的元素后面&nbsp
指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面&nbsp
errorPlacement:&nbspfunction(error,&nbspelement)&nbsp{&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsperror.appendTo(element.parent());&nbsp&nbsp
}&nbsp
//示例:&nbsp
&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp
&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp
&nbsp
&nbsp&nbsp&nbsp&nbsp &nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp

&nbsp
errorPlacement:&nbspfunction(error,&nbspelement)&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbspif&nbsp(&nbspelement.is(“:radio”)&nbsp)&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsperror.appendTo(&nbspelement.parent().next().next()&nbsp);&nbsp
&nbsp&nbsp&nbsp&nbspelse&nbspif&nbsp(&nbspelement.is(“:checkbox”)&nbsp)&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsperror.appendTo&nbsp(&nbspelement.next()&nbsp);&nbsp
&nbsp&nbsp&nbsp&nbspelse&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsperror.appendTo(&nbspelement.parent().next()&nbsp);&nbsp
}&nbsp
代码的作用是:一般情况下把错误信息显示在中,如果是radio显示在中,如果是checkbox显示在内容的后面&nbsp
errorClass:String&nbsp&nbspDefault:&nbsp”error”&nbsp
指定错误提示的css类名,可以自定义错误提示的样式&nbsp
errorElement:String&nbsp&nbspDefault:&nbsp”label”&nbsp
用什么标签标记错误,默认的是label你可以改成em&nbsp
errorContainer:Selector&nbsp
显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大&nbsp
errorContainer:&nbsp”#messageBox1,&nbsp#messageBox2″&nbsp
errorLabelContainer:Selector&nbsp
把错误信息统一放在一个容器里面。&nbsp
wrapper:String&nbsp
用什么标签再把上边的errorELement包起来&nbsp
一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏&nbsp
errorContainer:&nbsp”div.error”,&nbsp
errorLabelContainer:&nbsp$(“#signupForm&nbspdiv.error”),&nbsp
wrapper:&nbsp”li”&nbsp

设置错误提示的样式,可以增加图标显示&nbsp
input.error&nbsp{&nbspborder:&nbsp1px&nbspsolid&nbsp}&nbsp
label.error&nbsp{&nbsp
&nbsp&nbspbackground:url(“./demo/images/unchecked.gif”)&nbspno-repeat&nbsp0px&nbsp
&nbsp&nbsppadding-left:&nbsp
&nbsp&nbsppadding-bottom:&nbsp
&nbsp&nbspfont-weight:&nbsp
&nbsp&nbspcolor:&nbsp#EA5200;&nbsp
}&nbsp
label.checked&nbsp{&nbsp
&nbsp&nbspbackground:url(“./demo/images/checked.gif”)&nbspno-repeat&nbsp0px&nbsp
}&nbsp
success:String,Callback&nbsp
要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数&nbsp
success:&nbspfunction(label)&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbsp//&nbspset&nbsp &nbspas&nbsptext&nbspfor&nbspIE&nbsp
&nbsp&nbsp&nbsp&nbsplabel.html(” “).addClass(“checked”);&nbsp
&nbsp&nbsp&nbsp&nbsp//label.addClass(“valid”).text(“Ok!”)&nbsp
}&nbsp
添加”valid”&nbsp到验证元素,&nbsp在CSS中定义的样式

&nbsp
success:&nbsp”valid”&nbsp

nsubmit:&nbspBoolean&nbsp&nbspDefault:&nbsptrue&nbsp
提交时验证.&nbsp设置唯false就用其他方法去验证&nbsp
onfocusout:Boolean&nbsp&nbspDefault:&nbsptrue&nbsp
失去焦点是验证(不包括checkboxes/radio&nbspbuttons)&nbsp
onkeyup:Boolean&nbsp&nbspDefault:&nbsptrue&nbsp
在keyup时验证.&nbsp
onclick:Boolean&nbsp&nbspDefault:&nbsptrue&nbsp
在checkboxes&nbsp和&nbspradio&nbsp点击时验证&nbsp
focusInvalid:Boolean&nbsp&nbspDefault:&nbsptrue&nbsp
提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点&nbsp
focusCleanup:Boolean&nbsp&nbspDefault:&nbspfalse&nbsp
如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和&nbspfocusInvalid&nbsp一起用&nbsp

//&nbsp重置表单&nbsp
$().ready(function()&nbsp{&nbsp
var&nbspvalidator&nbsp=&nbsp$(“#signupForm”).validate({&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspsubmitHandler:function(form){&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspalert(“submitted”);&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspform.submit();&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp}&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp});&nbsp
&nbsp&nbsp&nbsp&nbsp$(“#reset”).click(function()&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspvalidator.resetForm();&nbsp
&nbsp&nbsp&nbsp&nbsp});&nbsp
});&nbsp

remote:URL&nbsp
使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项&nbsp
remote:&nbsp”check-email.php”&nbsp
remote:&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbspurl:&nbsp”check-email.php”,&nbsp&nbsp&nbsp&nbsp&nbsp//后台处理程序&nbsp
&nbsp&nbsp&nbsp&nbsptype:&nbsp”post”,&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp//数据发送方式&nbsp
&nbsp&nbsp&nbsp&nbspdataType:&nbsp”json”,&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp//接受数据格式&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbspdata:&nbsp{&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp//要传递的数据&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspusername:&nbspfunction()&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspreturn&nbsp$(“#username”).val();&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp}&nbsp
&nbsp&nbsp&nbsp&nbsp}&nbsp
}&nbsp

远程地址只能输出&nbsp”true”&nbsp或&nbsp”false”,不能有其它输出&nbsp

addMethod:name,&nbspmethod,&nbspmessage&nbsp
自定义验证方法&nbsp

//&nbsp中文字两个字节&nbsp
jQuery.validator.addMethod(“byteRangeLength”,&nbspfunction(value,&nbspelement,&nbspparam)&nbsp{&nbsp
&nbsp&nbsp&nbsp&nbspvar&nbsplength&nbsp=&nbspvalue.length;&nbsp
&nbsp&nbsp&nbsp&nbspfor(var&nbspi&nbsp=&nbspi&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspif(value.charCodeAt(i)&nbsp>&nbsp127){&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsplength++;&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp}&nbsp
&nbsp&nbsp&nbsp&nbsp}&nbsp
&nbsp&nbspreturn&nbspthis.optional(element)&nbsp||&nbsp(&nbsplength&nbsp>=&nbspparam[0]&nbsp&&&nbsplength&nbsp},&nbsp$.validator.format(“请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)”));&nbsp

//&nbsp邮政编码验证&nbsp&nbsp&nbsp
jQuery.validator.addMethod(“isZipCode”,&nbspfunction(value,&nbspelement)&nbsp{&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbspvar&nbsptel&nbsp=&nbsp/^[0-9]{6}$/;&nbsp
&nbsp&nbsp&nbsp&nbspreturn&nbspthis.optional(element)&nbsp||&nbsp(tel.test(value));&nbsp
},&nbsp”请正确填写您的邮政编码”);&nbsp

radio和checkbox、select的验证&nbsp
radio的required表示必须选中一个&nbsp
&nbsp
&nbsp
checkbox的required表示必须选中&nbsp
&nbsp
checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间&nbsp
&nbsp
&nbsp
&nbsp

select的required表示选中的value不能为空&nbsp
&nbsp
select的minlength表示选中的最小个数(可多选的select),maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间&nbsp

&nbsp


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明jquery.validate.js的基本用法入门
喜欢 (0)
[开心洋葱]
分享 (0)
关于作者:
水墨上仙
……
加载中……