JQuery 插件Validate框架的学习总结(三)

在提交表单前常要对用户输入进行校验.ASP.NET的验证控件就是用于此目的, 可以同时进行客户端和服务器端验证. 但是验证控件并没有被所有项目采用. 而且在MVC项目中经常使用自己的客户端验证框架.

在比较了若干表单验证插件后, 决定采用validate插件. 因为其使用简单并且灵活.

插件首页:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

插件文档:

http://docs.jquery.com/Plugins/Validation

配置说明:

http://docs.jquery.com/Plugins/Validation/validate#options

 

 

1实例讲解：

（1）验证方法

additional-methods.js 文件, 里面包含了更多的验证方法, 引入后既可启用.

（2）验证消息：

消息保存在jQuery.validator.messages 属性中.
在下载文件的localization文件夹中, 包含了各国语言的基本验证消息, 如同本实例一样引入不同的语言文件即可实现语言切换:

<script type="text/javascript" src="JsLib/jquery/plugin/jquery.validate/localization/messages_cn.js"></script>

（3）(3)验证规则
验证规则就是这样的语意语句: 在元素A上, 使用 验证方法A 和 验证方法B 进行验证.

验证规则将元素与验证方法关联起来, 因为验证方法同时也关联了验证消息, 所以元素与消息也关联了起来.

为一个元素添加验证规则有多种方式.

本实例的"姓名"元素使用了CSS样式规则和元素属性规则:

<input id="cname" name="name" size="25" class="required" minlength="2" />class元素属性设置元素的CSS样式类, 因为样式类中添加了required类,  所以会和required()验证函数关联. 这种规则叫做CSS样式规则.

minlength元素属性也会自动和minlength()验证函数关联, 这种规则叫做元素属性规则.

另外还可以通过编程的方式进行关联:

               rules: {
                   //为name为email的控件添加两个验证方法:required()和email()
                   email: { required: true, email: true }
               },上面的语句表名为email表单对象添加了required()和email()验证函数.

 

（4）表单提交

 默认情况下, 当验证函数失败时表单不会提交.

但是可以通过添加class="cancel"的方式让提交按钮跳过验证:

<input type="submit" class="cancel" name="cancel" value="Cancel" />
当表单提交时, 会触发options中submitHandler属性设置的函数:

               submitHandler: function(form)
               {
                   //如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
                   alert("submitted!");
               },此函数的签名同上.  我们可以在这个函数中,  编写在表单提交前需要处理的业务逻辑.

需要注意当最后以编程的方式提交表单时, 一定不要使用jQuery对象的submit()方法, 因为此方法会触发表单验证,并且再次调用submitHandler设置的函数, 会导致递归调用.

此函数的参数form就是表单对象, 用途就是不进行验证提交表单:form.submit()

（5）DEBUG模式
在开发阶段我们通常不希望表单被真正提交,  虽然可以通过本实例中重写submitHandler函数来实现, 但是还有更好的方式, 我们可以在submitHandler函数完成正式提交的逻辑, 然后通过设置options的debug属性, 来达到即使验证通过也不会提交表单的目的:

$(".selector").validate({
   debug: true
})
(6) 多表单验证
有时会在一个页面上出现多个Form, 因为validate控件是针对form对象进行包装的, 所以我们可以控制哪些form对象需要验证.

同时为了方便一次设置页面上所有的应用了validate控件的form对象,  提供了 jQuery.validator.setDefaults 函数让我们可以一次设置所有的默认值:

jQuery.validator.setDefaults({
    debug: true
});