jQuery 表单验证插件——Validation
Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:
内置的验证规则,如:必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则
可以自定义验证规则:可以很方便地自定义验证规则
简单而且强大的验证信息提示:没人了验证信息提示,并提供自定义覆盖默认提示信息功能
实时进行验证的功能.:通过blur和keyup时间来触发验证规则
此外,还是用ajax实现了服务器端远程验证。 都可以令前台开发变得非常的简单.
下载地址:http://plugins.jquery.com/project/vlidate
写法一(推荐直接使用写法三,因为它实现了行为与结构的分离)
废话少说,代码解释:
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
验证效果:
上面绿色标出的部分是需要注意的部分,也是validation执行验证的部分。可以看到validation统计一段$("#commentForm").validate();便可完成原来繁重任务。你可能会问,他的验证规则在哪里啊,为什么获取一个form表单元素连上一个validate()便可完成验证。其实validation把验证规则都封装在了内部,还记from表单里标出的class和minlength属性么,它可以来调去告诉其自身所在input元素所用的验证规则,如:<input type='text' class='required' > ,这个input框就会被validation解释为必须填写的。此外:
minlength最少输入字符,class里的包括 required 必须、email 电子邮件、 url 网址、
其他验证的写法
写法二
上面的方法时而将验证信息写在class中,时而写在minlength中实在麻烦,validation充分考虑了这一点,设置了另一种方法,将与验证相关的信息都写在class属性中,便于管理。操作步骤如下:
1 引入插件——jquer.metadata.js
2 改变验证方法为:$("formId").validate( {meta: "validate"} ); validate是自定义的,但要和 下文class中的保持一致
3 将验证规则全部写入class属性中(表单中input元素要添加name值,否则提交时只会验证第一个input元素,其他的在点击后才会验证)
<input id="cusername" name="username" size="25" class="{validate: {required: true , minlength:2}}" value="" />
<input id="cemail" name="email" size="25" class="{validate:{required: true , email: true}}" value="" />
<input id="curl" name="url" size="25" class="{validata:{ url: true }}" value="" />
<textarea id="ccomment" name="comment" cols="22" class="{validata: {required: true }}"></textarea>
写法三
上面的写法并没有完全脱离HTML结果,下面介绍一种与HTML元素属性无直接关联,而是通过name属性来关联字段和验证规则的验证写法。这种写法实现了行为与结构的分离。
1 将原来的class属性移除,使其无多余的属性:
<input id="cusername" name="username" size="25" value="" />
<input id="cemail" name="email" size="25" value="" />
<input id="curl" name="url" size="25" value="" />
<textarea id="ccomment" name="comment" cols="22" ></textarea>
2 jQuery代码如下:
$("#formId").validate({
rules : { //增加rules属性
username: { required : true , minlength : 2} ,
email : { required : true , email : true} ,
url : "url" ,
comment : "required"
}
})
验证信息
Validation插件的验证信息默认是英文的,如果要改为中文,只需要引入validation提供的中文验证信息库即可,引入代码如下:
<script src ="../jquery.validate.messages_cn.js" type="text/javascript"></script>
自定义验证信息
Validation插件可以很方便地自定义验证规则,用来代替千遍一律的默认验证信息。如:
<input id="cusername" name="username" size="25" class="{validate: {required: true , minlength:2 , message:{required : '请输入姓名' , minlength : '请至少输入两个字符'}}}" value="" />
<input id="cemail" name="email" size="25" class="{validate:{required: true , email: true , message:{required : '请输入邮箱' , email: '请检查邮箱格式是否正确'}}}" value="" />
<input id="curl" name="url" size="25" class="{validata:{ url: true , message:{url: '请输入网址' ,}}}" value="" />
<textarea id="ccomment" name="comment" cols="22" class="{validata: {required: true , message:{required : '请输入您的排列' }}}"></textarea>
如在jquery代码里加messages的话是和rules同级
$("#formid").validate({
rules:{
username:{required:true,minlength:2},
},
messages:{
username:{required:"必须填写",minlength:"最少2个字符"}
}
});
自定义验证信息并美化
在jquery中(与rules同级)添加下列代码:
errorElement : "em", //用来创建错误提示信息标签(可自定义)
Success : function(label){ //验证成功后执行的回调函数,label指向上面那个错误提 示信息标签em
label.text( ' ' ) //清空错误提示消息
. addClass("success") //添加上自定义的success类
}
再在css中给em.error 和 em.success设置样式(如背景分别为错号和对号等)
自定义验证规则
创建规则:
$.validator . addMethod(
"formula", //自定义规则方法名
function(value , element , param){ /自定义规则体
return value == eval_r(param);
},
'请输入正确的数学公式计算后的结果' //提示信息
)
调用:
Rules中加入valcode :( 自定义规则名 : "参数")
$("#formId").validate({
rules : { //增加rules属性
username: { required : true , minlength : 2} ,
email : { required : true , email : true} ,
url : "url" ,
comment : "required" ,
valcode : (formula : "7+9") //valcode为name的值
}
})
Validation的具体属性及高级应用见下面链接:
http://wenku.baidu.com/view/1283e485ec3a87c24028c48a.html
自定义验证规则:
http://www.jb51.net/article/24013.htm