jQuery 表单验证插件——Validation

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的值

}

})