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/