比如:
- 输入框是必填,长度至少是两位的验证
- 对电子邮件,判断是否是E-mail的格式的验证
- 对网址是否为url的验证
- 对必填的验证
我们要引入jQuery中的一个插件来完成
——Validation插件
(1)确定是哪个表单被验证
$("#form").validate();
(2)针对不同的字段,进行验证规则编码,设置字段相应的属性
class="required"
为必须填写,minlength=”2”最小长度class="required email"
class="url"
(3)以上关于验证的写法,有时候要写再class或者属性里这很麻烦。
(4)可以将所有的验证都写到class属性中方便管理引入 新 的jQuery插件—-jquery.metadata.js.
script src="lib/jquery.metadata.js" type="text/javascript"></script>
注意:jquery.metadata.js是 一个支持 固定格式解析的JQuery插件。Validation插件将很好 的融合到验证规则编码中参见网址:http://plugins.jquery.com/project/metadata.
(5)以上的验证方式将改变:
$(#form).validate({meta: "validate"});
(6)将验证规则全部写到class属性中
- class="{validate: {required: true,minlength:2}}"
- class="{validate:{required:true,emil:true}}"
- class="{validate:{url:true}}"
- calss="{validate:{requried:true}}"
(7)以上都是通过设置一些的属性值来实现的,但验证行为和HTML结构并没有完全的脱离关系
(8)可以将class属性去掉以后。加入jQuery代码
$(document).ready(function(){
$("#form")..validate({
rules:{
username:{
requried : true,
minlength : 2
},
email:{
requried : true,
emils:true
},
url:"url",
comment:"requried"
}
});
});
具体的编码步骤:
- $(“#form”).validate()方法中增加rules属性
- 通过每个字段的name属性值来匹配验证规则
- 定义验证规则:例如requried:true,email:true,minlength:2等等
(9)验证信息国际化:
valiadation插件 库的验证信息默认是英文,如果要中文,要引入Validation提供的中文 验证信息库就可
<script src="lib/jquery.validate.messages_cn.js" type="text/javascript"></scfript>
(10)自定义验证信息
class="{validate:{required:true,minlength:2,
message:{requried:'请输入姓名',
minlength:'请至少输入两个字符 '}}}"
(11)自定义验证信息并美化
errorElement:"em",//用来创建错误的提示信息标签
success:function(label){//验证成功后执行的回掉函数
//label指向上面哪个错误 提示信息标签em
label.text(" ")//清空错误提示信息
.addClass("success");//加上自定义的success类
在cass代码中增加如下 的代码,以便和errorElement相关联
em.error{
background:url("images/unchecked.gif").no-repeat 0px 0px;
padding-left:16px;
}
em.success{
background:url("images/checked.gif").no-repeat 0px 0px;
padding-left:16px;
}
(12)自定义的验证规则:如添加验证码
- 自定义一个验证方法
$.validator.addMethod(
"formula",//验证方法的名称
function(value,element,param){//验证规则
return value==eval(param);
},
'请正确输入数学公式计算后的结果'//验证的提示信息
- 调用该验证的规则
在jQuery代码中的rules中加入valcode : {formula:”7+9”},其中的7+9可以通过其他的方式获得,例如获取页面的某个元素的text()或者Ajax()来取得
$("#form").validate({
rules:{
username:{required:true,minlength:2},
email:{requored:true,email:true},
valcode:{formuls:"7+9"}
}
});