validate

使用JQuery validate插件验证表单

常见的表单验证插件：
- validate
- Zebra Form
- jFormer
- jQuery.validVal
- Validity
- ValidForm Builder
- Ketchup
- Validatious
- Form Validator

浅析JQuery Validate插件：

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

jQuery Validate插件的使用：

• 下载jQuery validate插件
  jQuery validate官网： https://jqueryvalidation.org/

• 将validate引入你的项目

• 
• 将需要用到的jquery.js ,jquery.validate.min.js也引入页面，同时将location包下的message_zh.js也引入你的页面，因为默认的错误提示是英文版，故引入中文版本地化文件，在你没有定义错误提示的情况下，将使用默认中文版错误提示。

<script type="text/javascript src="validate/lib/jquery.js"></script><script type="text/javascript"    src="validate/dist/jquery.validate.min.js"></script><script type="text/javascript"    src="validate/dist/localization/messages_zh.js"></script>

1
2
3
4
5

• 编写javascript验证方法

<script type="text/javascript">    $().ready(function() {        // 在键盘按下并释放及提交后验证提交表单        $("#RegisterForm").validate({            rules : {                name : {                    required : true,                },                phone : {                    required : true,                    minlength : 11,                    isMobile:true                },                password : {                    required : true,                    minlength : 5                },                confirmpass : {                    required : true,                    minlength : 5,                    equalTo : "#password"                }            },            messages : {                name : {                    required : "请输入用户名",                },                phone : {                    required : "请输入手机号码",                    minlength : "手机号码长度不能小于 11 ",                    isMoblie:"请正确填写您的手机号码"                },                password : {                    required : "请输入密码",                    minlength : "密码长度不能小于 5 个字母"                },                confirmpass : {                    required : "请输入密码",                    minlength : "密码长度不能小于 5 个字母",                    equalTo : "两次密码输入不一致"                }            }        });    })</script>

• 因为jQuery validate API没有对手机号码的验证，但是提供自定义验证的方法addMethod：name, method, message，所以自定义验证手机号码的方法。

<script type="text/javascript">    //手机号码验证    jQuery.validator            .addMethod(                    "isMobile",                    function(value, element) {                        var length = value.length;                        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;                        return this.optional(element)                                || (length == 11 && mobile.test(value));                    }, "请正确填写您的手机号码")</script>

1
2
3
4
5
6
7
8
9
10
11
12

• 修改默认提示的样式，默认提示字体是黑色，可以将其设置为红色，jQuery validate默认将错误提示写在中，故可以修改如下：

<style type="text/css">form label.error {    width: 200px;    margin-left: 8px;    color: Red;}</style>

结果如下：

• 总结：
  表单是每一个项目中必不可少的一部分，只要有表单就要有对表单的验证，然而表单的验证是一件很繁琐的事情，因此出现了很多的已封装好的对表单验证的插件，能很好地利用插件对我们项目的开发是相当有益处的。笔者对项目中用到的jQuery validate插件做以简单的总结，有错误之处，还请指教。
  注：根据表单元素的name属性

  -更多jQuery validate 参考资料

  https://jqueryvalidation.org/