jquery-validate表单验证

jQuery-validate插件为您的现有表单提供插入式验证，同时使各种定制非常容易地适应您的应用程序。这里使用插件的v1.19.1版本。

github地址：https://github.com/jquery-validation/jquery-validation

官网地址：https://jqueryvalidation.org/

菜鸟教程：https://www.runoob.com/jquery/jquery-plugin-validate.html

![](/uploads/images/20220105/695de5ba8c4b51837c5cd377d41257d7.png)

**默认校验规则**

| 序号 | 规则                 | 描述                                                      |
|----|--------------------|---------------------------------------------------------|
| 1  | required:true      | 必须输入的字段。                                                |
| 2  | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。                           |
| 3  | email:true         | 必须输入正确格式的电子邮件。                                          |
| 4  | url:true           | 必须输入正确格式的网址。                                            |
| 5  | date:true          | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。                             |
| 6  | dateISO:true       | 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。 |
| 7  | number:true        | 必须输入合法的数字（负数，小数）。                                       |
| 8  | digits:true        | 必须输入整数。                                                 |
| 9  | creditcard:        | 必须输入合法的信用卡号。                                            |
| 10 | equalTo:"#field"   | 输入值必须和 #field 相同。                                       |
| 11 | accept:            | 输入拥有合法后缀名的字符串（上传文件的后缀）。                                 |
| 12 | maxlength:5        | 输入长度最多是 5 的字符串（汉字算一个字符）。                                |
| 13 | minlength:10       | 输入长度最小是 10 的字符串（汉字算一个字符）。                               |
| 14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。                        |
| 15 | range:[5,10]       | 输入值必须介于 5 和 10 之间。                                      |
| 16 | max:5              | 输入值不能大于 5。                                              |
| 17 | min:10             | 输入值不能小于 10。                                             |

**jQuery.validate 中文 API**

| 名称                                            | 返回类型                  | 描述             |
|-----------------------------------------------|-----------------------|----------------|
| validate(options)                             | Validator             | 验证所选的 FORM。    |
| valid()                                       | Boolean               | 检查是否验证通过。      |
| rules()                                       | Options               | 返回元素的验证规则。     |
| rules("add",rules)                            | Options               | 增加验证规则。        |
| rules("remove",rules)                         | Options               | 删除验证规则。        |
| removeAttrs(attributes)                       | Options               | 删除特殊属性并且返回它们。  |
| 自定义选择器                                        |
| :blank                                        | Validator             | 没有值的筛选器。       |
| :filled                                       | Array <Element> | 有值的筛选器。        |
| :unchecked                                    | Array <Element> | 没选择的元素的筛选器。    |
| 实用工具                                          |
| jQuery.format(template,argument,argumentN...) | String                | 用参数代替模板中的 {n}。 |

**Validator**

validate 方法返回一个 Validator 对象。Validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容，下面列出几个常用的方法。

| 名称                             | 返回类型      | 描述                                                  |
|--------------------------------|-----------|-----------------------------------------------------|
| form()                         | Boolean   | 验证 form 返回成功还是失败。                                   |
| element(element)               | Boolean   | 验证单个元素是成功还是失败。                                      |
| resetForm()                    | undefined | 把前面验证的 FORM 恢复到验证前原来的状态。                            |
| showErrors(errors)             | undefined | 显示特定的错误信息。                                          |
| Validator 函数                   |
| setDefaults(defaults)          | undefined | 改变默认的设置。                                            |
| addMethod(name,method,message) | undefined | 添加一个新的验证方法。必须包括一个独一无二的名字，一个 JAVASCRIPT 的方法和一个默认的信息。 |
| addClassRules(name,rules)      | undefined | 增加组合验证类型，在一个类里面用多种验证方法时比较有用。                        |
| addClassRules(rules)           | undefined | 增加组合验证类型，在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。           |

**内置验证方式**

| 名称                              | 返回类型    | 描述                                       |
|---------------------------------|---------|------------------------------------------|
| required()                      | Boolean | 必填验证元素。                                  |
| required(dependency-expression) | Boolean | 必填元素依赖于表达式的结果。                           |
| required(dependency-callback)   | Boolean | 必填元素依赖于回调函数的结果。                          |
| remote(url)                     | Boolean | 请求远程校验。url 通常是一个远程调用方法。                  |
| minlength(length)               | Boolean | 设置最小长度。                                  |
| maxlength(length)               | Boolean | 设置最大长度。                                  |
| rangelength(range)              | Boolean | 设置一个长度范围 [min,max]。                      |
| min(value)                      | Boolean | 设置最小值。                                   |
| max(value)                      | Boolean | 设置最大值。                                   |
| email()                         | Boolean | 验证电子邮箱格式。                                |
| range(range)                    | Boolean | 设置值的范围。                                  |
| url()                           | Boolean | 验证 URL 格式。                               |
| date()                          | Boolean | 验证日期格式（类似 30/30/2008 的格式，不验证日期准确性只验证格式）。 |
| dateISO()                       | Boolean | 验证 ISO 类型的日期格式。                          |
| dateDE()                        | Boolean | 验证德式的日期格式（29.04.1994 或 1.1.2006）。        |
| number()                        | Boolean | 验证十进制数字（包括小数的）。                          |
| digits()                        | Boolean | 验证整数。                                    |
| creditcard()                    | Boolean | 验证信用卡号。                                  |
| accept(extension)               | Boolean | 验证相同后缀名的字符串。                             |
| equalTo(other)                  | Boolean | 验证两个输入框的内容是否相同。                          |
| phoneUS()                       | Boolean | 验证美式的电话号码。                               |

**validate ()的可选项**

`debug`：进行调试模式（表单不提交）。
```javascript
$(".selector").validate({
    debug:true
})
```
把调试设置为默认。
```javascript
$.validator.setDefaults({
    debug:true
})
```
`submitHandler`：通过验证后运行的函数，里面要加上表单提交的函数，否则表单不会提交。
```javascript
$(".selector").validate({
    submitHandler:function(form) {
        $(form).ajaxSubmit();
    }
})
```
`ignore`：对某些元素不进行验证。
```javascript
$("#myform").validate({
    ignore:".ignore"
})
```
`rules`：自定义规则，`key:value` 的形式，`key` 是要验证的元素，`value` 可以是字符串或对象。
```javascript
$(".selector").validate({
    rules:{
        name:"required",
        email:{
            required:true,
            email:true
        }
    }
})
```
`messages`：自定义的提示信息，`key:value` 的形式，`key` 是要验证的元素，`value` 可以是字符串或函数。
```javascript
$(".selector").validate({
    rules:{
        name:"required",
        email:{
            required:true,
            email:true
        }
    },
    messages:{
        name:"Name不能为空",
        email:{
            required:"E-mail不能为空",
            email:"E-mail地址不正确"
        }
    }
})
```
`groups`：对一组元素的验证，用一个错误提示，用 `errorPlacement` 控制把出错信息放在哪里。
```javascript
$("#myform").validate({
    groups:{
        username:"fname
        lname"
    },
    errorPlacement:function(error,element) {
        if (element.attr("name") == "fname" || element.attr("name") == "lname")
            error.insertAfter("#lastname");
        else
            error.insertAfter(element);
    },
   debug:true
})
```
`OnSubmit`：类型 `Boolean`，默认 `true`，指定是否提交时验证。
```javascript
$(".selector").validate({
    onsubmit:false
})
```
`onfocusout`：类型 `Boolean`，默认 `true`，指定是否在获取焦点时验证。
```javascript
$(".selector").validate({
    onfocusout:false
})
```
`onkeyup`：类型 `Boolean`，默认 `true`，指定是否在敲击键盘时验证。
```javascript
$(".selector").validate({
   onkeyup:false
})
```
`onclick`：类型 `Boolean`，默认 `true`，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）。
```javascript
$(".selector").validate({
   onclick:false
})
```
`focusInvalid`：类型 `Boolean`，默认 `true`。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。
```javascript
$(".selector").validate({
   focusInvalid:false
})
```
`focusCleanup`：类型 `Boolean`，默认 `false`。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）。
```javascript
$(".selector").validate({
   focusCleanup:true
})
```
`errorClass`：类型 String，默认 "error"。指定错误提示的 css 类名，可以自定义错误提示的样式。
```javascript
$(".selector").validate({
    errorClass:"invalid"
})
```
`errorElement`：类型 String，默认 "label"。指定使用什么标签标记错误。
```javascript
$(".selector").validate
   errorElement:"em"
})
```
`wrapper`：类型 String，指定使用什么标签再把上边的 errorELement 包起来。
```javascript
$(".selector").validate({
   wrapper:"li"
})
```
`errorLabelContainer`：类型 Selector，把错误信息统一放在一个容器里面。
```javascript
$("#myform").validate({
    errorLabelContainer:"#messageBox",
    wrapper:"li",
    submitHandler:function() {
        alert("Submitted!");
    }
})
```
`showErrors`：跟一个函数，可以显示总共有多少个未通过验证的元素。
```javascript
$(".selector").validate({
    showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
        this.defaultShowErrors();
    }
})
```
`errorPlacement`：跟一个函数，可以自定义错误放到哪里。
```javascript
$("#myform").validate({
    errorPlacement:function(error,element) {
        error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})
```
`success`：要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。
```javascript
$("#myform").validate({
    success:"valid",
    submitHandler:function() { 
        alert("Submitted!");
    }
})
```
`highlight`：可以给未通过验证的元素加效果、闪烁等。

以下是示例中的使用代码：
```javascript
$(document).ready(function(){
    $.validator.addMethod('phone_format', function(value, element) {
        return this.optional(element) || /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value);
    }, '手机号码格式错误');
    $('#example-from').validate({
        ignore: ".ignore",    // 插件默认不验证隐藏元素,这里可以自定义一个不验证的class,即验证隐藏元素,不验证class为.ignore的元素
        focusInvalid: false,  // 禁用无效元素的聚焦
        rules: {
            'example-email': {
                required: true,
                email: true
            },
            'example-pwd': {
                required: true,
                minlength: 6,
                maxlength: 20
            },
            'example-confirmpwd': {
                required: true,
                minlength: 6,
                equalTo: 'input[name="example-pwd"]'
            },
            'example-nickname': {
                required: true
            },
            'example-url': {
                required: true,
                url: true
            },
            'example-phone': {
                required: true,
                phone_format: true
            },
            'example-sex': {
                required: true
            },
            'example-lang': {
                required: true
            },
            'example-fileload': {
                required: true
            },
            'example-switch': {
                required: true
            },
            'example-hobby': {
                required: true
            },
            'example-job-status': {
                required: true
            },
            'example-profession': {
                required: true
            },
            'example-synopsis': {
                required: true
            },
            'example-tags': {
                required: true
            },
        },
        errorPlacement: function errorPlacement(error, element) {
            var $parent = $(element).parents('.form-group');
            if ($parent.find('.invalid-feedback').length) {
                return;
            }
            $(element).addClass('is-invalid');
            $parent.append(error.addClass('invalid-feedback'));
        },
        highlight: function(element) {
            var $el = $(element);
            if ($el.hasClass('js-tags-input')) {
                $el.next('.tagsinput').addClass('is-invalid');  // tags插件所隐藏的输入框没法实时验证，比较尴尬
            }
        },
        unhighlight: function(element) {
            $(element).next('.tagsinput').removeClass('is-invalid');
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            alert('验证成功');
        }
    });
});
```

插件项目中页面名字：`lyear_js_jquery_validate.html`

演示地址：http://lyear.itshubao.com/v5/example/

涉及的文件：
- `js/jquery-validate/jquery.validate.min.js`
- `js/jquery-validate/messages_zh.min.js`