jquery.validate的使用说明介绍(2)


$.metadata.setType("attr", "validate");这样可以使用validate="{required:true}"的方式,或者class="required",但class="{required:true,minlength:5}"将不起作用 2.将校验规则写到代码中 
$().ready(function() { 
$("#signupForm").validate({ 
rules: { 
firstname: "required", 
email: { 
required: true, 
email: true 
}, 
password: { 
required: true, 
minlength: 5 
}, 
confirm_password: { 
required: true, 
minlength: 5, 
equalTo: "#password" 

}, 
messages: { 
firstname: "请输入姓名", 
email: { 
required: "请输入Email地址", 
email: "请输入正确的email地址" 
}, 
password: { 
required: "请输入密码", 
minlength: jQuery.format("密码不能小于{0}个字符") 
}, 
confirm_password: { 
required: "请输入确认密码", 
minlength: "确认密码不能小于5个字符", 
equalTo: "两次输入密码不一致不一致" 


}); 
});//messages处,如果某个控件没有message,将调用默认的信息


复制代码 代码如下:


<form method="get" action=""> 
<p> 
<label for="firstname">Firstname</label> 
<input /> 
</p> 
<p> 
<label for="email">E-Mail</label> 
<input /> 
</p> 
<p> 
<label for="password">Password</label> 
<input type="password" /> 
</p> 
<p> 
<label for="confirm_password">确认密码</label> 
<input type="password" /> 
</p> 
<p> 
<input type="submit" value="Submit"/> 
</p> 
</form> 


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

五、常用方法及注意问题

1.用其他方式替代默认的SUBMIT$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
});

可以设置validate的默认值,写法如下:
$.validator.setDefaults({
submitHandler: function(form) { alert("submitted!");form.submit(); }
});

如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()

2.debug,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});

如果一个页面中有多个表单,用
$.validator.setDefaults({
debug: true
})

3.ignore:忽略某些元素不验证
ignore: ".ignore"

4.errorPlacement:Callback Default: 把错误信息放在验证的元素后面

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

复制代码 代码如下:


<tr> 
<td><label for="firstname">First Name</label></td> 
<td><input type="text" value="" maxlength="100" /></td> 
<td></td> 
</tr> 
<tr> 
<td mce_style="padding-right: 5px;"> 
<input type="radio" value="0" /> 
<label for="dateformat_eu">14/02/07</label> 
</td> 
<td mce_style="padding-left: 5px;"> 
<input type="radio" value="1"  /> 
<label for="dateformat_am">02/14/07</label> 
</td> 
<td></td> 
</tr> 
<tr> 
<td> </td> 
<td colspan="2"> 
<div> 
<input type="checkbox" /> 
<label for="terms">I have read and accept the Terms of Use.</label> 
</div> 
</td> 
</tr>errorPlacement: function(error, element) { 
if ( element.is(":radio") ) 
error.appendTo( element.parent().next().next() ); 
else if ( element.is(":checkbox") ) 
error.appendTo ( element.next() ); 
else 
error.appendTo( element.parent().next() ); 
}


代码的作用是:一般情况下把错误信息显示在中,如果是radio显示在中,如果是checkbox显示在内容的后面 errorClass:String Default: "error"

指定错误提示的css类名,可以自定义错误提示的样式 errorElement:String Default: "label"

用什么标签标记错误,默认的是label你可以改成 emerrorContainer:Selector

显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大

errorContainer: "#messageBox1, #messageBox2"errorLabelContainer:Selector

把错误信息统一放在一个容器里面。 wrapper:String

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzyyy.html