简单好用的表单校验插件——jQuery Validate基本使用方法总结

最新推荐文章于 2020-04-08 19:11:57 发布

dhg20421

最新推荐文章于 2020-04-08 19:11:57 发布

阅读量167

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/GaiaBing/p/9341857.html

版权

jquery validate当前最新版本是1.17.0，下载链接是：https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0

1.基本用法

从字面就知道既然是jquery的插件，首先得引入jquery，然后下载jquery-validate.js后引入。

其次既然是表单校验，首先得有一个表单，即form标签，然后由于浏览器是通过name属性来提交表单数据的，所以需要给校验的控件都加上name属性。

校验的写法有两种，一种是把校验规则写在控件中，另一种是写在js里。

先看第一种

 1         <form id="loginForm" name='f' action='/auth/login' method='POST'>
 2             <div class="el-form-item">
 3                 <input type="text" name='username' id="username" placeholder="用户名" class="el-input" required>
 4             </div>
 5             <div class="el-form-item">
 6                 <input type="password" name='password' id="password" placeholder="密码" class="el-input" required>
 7             </div>
 8             <div class="login-btn">
 9                 <button type="submit" class="el-button">登录</button>
10             </div>
11         </form>

required属性表示必填，默认情况下在点击提交按钮的时候会触发表单校验，之后input在失焦、keyup事件的时候都会校验。

我比较推荐的是第二种写法，即把校验规则写在js里，对象的形式可以规则和提示信息一一对应起来。

还是上面的用户登录，html是基本写法

 1         <form id="loginForm" name='f' action='/auth/login' method='POST'>
 2             <div class="el-form-item">
 3                 <input type="text" name='username' id="username" placeholder="用户名" class="el-input">
 4             </div>
 5             <div class="el-form-item">
 6                 <input type="password" name='password' id="password" placeholder="密码" class="el-input">
 7             </div>
 8             <div class="login-btn">
 9                 <button type="submit" class="el-button">登录</button>
10             </div>
11         </form>

 1     $("#loginForm").validate({
 2         rules:{
 3             username:"required",
 4             password:"required",
 5         },
 6         messages:{
 7             username:"请输入用户名",
 8             password:"请输入密码",
 9         }
10     });

这样感觉更直观清晰。

2.内置验证方式

rules里每个控件可以给多个验证方式，常用的有：

required 必填验证元素。

minlength(length) maxlength(length) rangelength(range) 设置最小长度、最大长度和长度范围 [min,max]。

min(value) max(value) range(range) 设置最大值、最小值和值的范围。

email() 验证电子邮箱格式。

url() 验证 URL 格式。

date() 验证日期格式（类似 30/30/2008 的格式，不验证日期准确性只验证格式）。

number() 验证十进制数字（包括小数的）。

digits() 验证整数。

equalTo(other) 验证两个输入框的内容是否相同。修改密码时经常使用。

3.错误信息显示

默认情况在校验失败时会创建calss为error的label标签存放错误提示信息，并放在当前校验控件的后面，即error.appendTo(element.parent());

如果要自定义显示位置的话可以使用 errorPlacement：callBack修改

errorPlacement: function(error, element) {  
    //error为校验失败创建的信息提示标签，element为当前校验控件  
}

errorClass 可以指定标签类名。

errorElement 可以指定标签类型。

errorLabelContainer 可以把错题信息统一放在一个容器里。

wrapper 用什么标签再把上边的 errorELement 包起来。

关于样式的修改，校验失败当前校验控件也会添加error类名，所以可以定义input.error和label.error的样式。

4.校验成功的信息显示

校验成功可以设置success:"className"来设置样式，也可以在success后接一个函数为校验成功后的操作。

    $("#loginForm").validate({
        rules:{
            username:"required",
            password:"required",
        },
        messages:{
            username:"请输入用户名",
            password:"请输入密码",
        },
        success: "valid"
    });

5.添加自定义校验

使用addMethod(name,method,message)添加自定义校验，三个参数分别为：自定义校验的名称、方法、提示信息。

在 additional-methods.js 文件中存在一些扩展的自定义校验方法，如notEqualTo（不同于）等。

1     jQuery.validator.addMethod( "notEqualTo", function( value, element, param ) {
2         return this.optional(element) || !$.validator.methods.equalTo.call( this, value, element, param );
3     }, "Please enter a different value, values must not be the same." );

method的三个参数分别为：校验控件中的value值、校验控件元素、调用此校验方法中的参数（如equalTo("#newPassword")，param为“#newPassword”）。

this.optional(element)用于表单控件的值不为空时才触发验证。当表单的值为空时，this.optional(element) == true，即可以不填但是格式不能错的场景。

method返回值true为验证成功，false为验证失败。

6.使用普通按钮代替submit校验

很多时候我们提交表单并不是用的form形式，而是ajax，这时候就不能用submit来触发了。

validator()会返回一个对象，这个对象下的form()方法可以验证 form 返回成功还是失败。

function validform(){
        return $("#changePasswordForm").validate({
            rules:{
                oldPassword:"required",
                newPassword:{
                    required:true,
                    notEqualTo:"#oldPassword"
                },
                newPassword2:{
                    required:true,
                    equalTo:"#newPassword"
                },
            },
            messages:{
                oldPassword:"原密码不能为空",
                newPassword:{
                    required:"新密码不能为空",
                    notEqualTo:"新密码不能与原密码重复"
                },
                newPassword2:{
                    required:"请确认新密码",
                    equalTo:"两次密码输入不一致"
                },
            }
        });
    }
    //注册表单验证
    $(validform());

    //点击按钮事件
    $("#submitBtn").click(function(){
        if (validform().form()) {
            //请求ajax
            ajaxSubmit();
        }else{}
    });