【转】vue.js表单校验详解

官方文档：https://monterail.github.io/vuelidate/

https://github.com/monterail/vuelidate

1.npm安装vue-validator

$ npm install vue-validator

代码示例:

var Vue=require("vue");
var VueValidator=require("vue-validator");
Vue.use(VueValidator);

2.直接使用script标签引入vue.js

要下载vue-validator，那么进入cdn的地址https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js把内容复制下来就好了。版本使用了2.1.3，不要搞错了哦。

下面是简单的小例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
        <validator name="myForm">
            <form novalidate>
                Zip: <input type="text" v-validate:zip="['required']"><br />
                <div>
                    <span v-if="$myForm.zip.required">Zip code is required.</span>
                </div>
            </form>
        </validator>
    </div>
    <script src="js/vue.js"></script>
    <script src="js/vue-validator.js"></script>
    <script>
        new Vue({
            el:"#app",

        })
    </script>
</body>
</html>

将要验证的表单包裹在validator自定义元素指令中，而在要验证的表单控件元素的 v-validate 属性上绑定相应的校验规则。

验证结果会保存在组建实例的 $myForm 属性下。 $myForm 是由 validator 元素和 name 属性和 $ 前缀组件。

注意哦，这个校验在2.1.3版本并不依赖v-model指令。

3.验证结果的结构

使用上面的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <validator name="myForm">
        <form novalidate>
            Zip: <input type="text" v-validate:zip="['required']"><br />
            <div>
                {{$myForm |json}}
            </div>
        </form>
    </validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>
    new Vue({
        el:"#app",

    })
</script>
</body>
</html>

{{$myForm |json}} 显示的内容是:

{ "valid": false, 
  "invalid": true, 
  "touched": false, 
  "untouched": true, 
  "modified": false, 
  "dirty": false, 
  "pristine": true, 
  "zip": { 
     //zip字段的验证结果
      "required": true, 
      "modified": false, 
      "pristine": true, 
      "dirty": false, 
      "untouched": true,
      "touched": false, 
      "invalid": true, 
      "valid": false 
  } 
}

这些校验属性分别是什么意思:

valid:字段校验是否通过

invalid:取反、

touched:校验字段所在元素获得过焦点返回truke,否则返回false

untouched:touched取反

modified:当元素值与初始值是否相同

dirty:字段值改变过至少一次返回true，否则返回false

pristine:dirty取反

表单整体校验单独的属性:

errors:如果整体校验没通过，则返回错误字段信息数组。否则返回undefined。

4.验证器语法

v-validate[:field]="array literal | object literal| bind"

(1)校验字段名field

vue-validator版本小于2，校验依赖于v-model指令。2.0之后的版本使用v-validate指令。字段的命名可使用连字符(-)，然后通过驼峰式命名法引用它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <validator name="myForm">
        <form novalidate>
           <h1>1.校验的字段为user-name，校验的规则是最小长度6，最大长度12</h1>
            <input type="text" v-validate:user-name="{minlength:6,maxlength:12}"/>
            <div>
                <span v-show="$myForm.userName.minlength">Your comment is too short.</span>
                <span v-show="$myForm.userName.maxlength">Your comment is too long.</span>
            </div>
            
        </form>
    </validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>
    new Vue({
        el:"#app",

    })
</script>
</body>
</html>

动态绑定校验字段:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <validator name="myForm">
        <form novalidate>
           <p v-for="field in fields">
               <label :for="field.id">{{field.label}}</label>
               <!--v-bind:for绑定for属性的简写-->
               <input type="text" :id="filed.id" :placeholder="field.placeholder"
                      field="{{field.name}}" v-validate="field.validate"/>
           </p>
        </form>
    </validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            fields:[
                {id:"username",label:"username",name:"username",placeholder:"input your username",validate:{required:true,maxlength:16}}
            ]
        }
    })
</script>
</body>
</html>

(2)校验规则定义

第一种，数组字面量。

类似如下代码:

Zip: <input type="text" v-validate:zip="['required']">

第二种，对象字面量。

类似如下代码:

<input type="text" v-validate:user-name="{minlength:6,maxlength:12}"/>

对象字面量还可以通过rule字段自定义验证规则。

<input type="text" v-validate:user-name="{minlength:6,maxlength:{rule:12}"/>

第三种，实例数据属性。

v-validate的值可以是组件实例的数据属性，可用来动态绑定检验规则。其实就是把校验的字段换成变量，比较简单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <validator name="myForm">
        <form novalidate>
            <h1>1.校验的字段为id，校验的规则是最小长度6，最大长度12</h1>
            <input type="text" v-validate:id="rules"/>
            <div>
                <span v-show="$myForm.id.minlength">Your comment is too short.</span>
                <span v-show="$myForm.id.maxlength">Your comment is too long.</span>
            </div>
        </form>
    </validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            rules:{
                minlength:3,
                maxlength:6
            }
        }
    })
</script>
</body>
</html>

第四种，与terminal指令(比如v-if、v-for)同时使用。

Vue 通过递归遍历 DOM 树来编译模块。但是当它遇到 terminal 指令时会停止遍历这个元素的后代元素。这个指令将接管编译这个元素及其后代元素的任务。v-if 和 v-for 都是 terminal 指令。因为v-validate指令不能与terminal指令同时使用，所以包裹在了div元素中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <validator name="myForm">
        <form novalidate>
           <h1>1.可以看到，v-if指令包裹在div元素里，并没有和v-validator指令同时使用</h1>
            <div  class="password">
                <label for="password">password:</label>
                <input  id="password" type="password" v-validate:password="['required']"/>
                <br/>
                {{$myForm|json}}
            </div>
        </form>
    </validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            enable:true
        }
    })
</script>
</body>
</html>

那么如果使用错误的代码:

<div  class="password">
                <label for="password">password:</label>
                <input v-if="enable" id="password" type="password" v-validate:password="['required']"/>
                <br/>
                {{$myForm|json}}
</div>

控制台会报错

【转】vue.js表单校验详解

另:可自动校验通过v-model动态设置的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <validator name="myForm">
        <form novalidate>
            Zip: <input type="text" v-model="zip" v-validate:zip="['required']"><br />
            <div>
                是否错误:{{$myForm.zip.required}}
            </div>
        </form>
    </validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>
    var  vm=new Vue({
        el:"#app",
        data:{
            zip:""
        }

    });
    setTimeout(function(){
        vm.zip="hello world!";
    },2000)
</script>
</body>
</html>

显示结果，等待两秒之后，我们就看到v-model的值被设置上去，而且根据必填的规则，报错信息显示false。

【转】vue.js表单校验详解

5.内置验证规则有哪些？

(1)required校验器适用的元素有input的text、radio、checkbox、number、password、email、tel、url、还有select、textarea。

对应的源码如下:

function required(val) {
        if (Array.isArray(val)) {
            if (val.length !== 0) {
                var valid = true;
                for (var i = 0, l = val.length; i < l; i++) {
                    valid = required(val[i]);
                    if (!valid) {
                        break;
                    }
                }
                return valid;
            } else {
                return false;
            }
        } else if (typeof val === 'number' || typeof val === 'function') {
            return true;
        } else if (typeof val === 'boolean') {
            return val;
        } else if (typeof val === 'string') {
            return val.length > 0;
        } else if (val !== null && (typeof val === 'undefined' ? 'undefined' : babelHelpers.typeof(val)) === 'object') {
            return Object.keys(val).length > 0;
        } else if (val === null || val === undefined) {
            return false;
        }
    }

它是通过typeof判断各个类型的。

(2)pattern是正则匹配校验器，适用的元素有text、number、password、email、tel、url类型的input和textarea。

/**
     * pattern
     *
     * This function validate whether the value matches the regex pattern
     *
     * @param val
     * @param {String} pat
     * @return {Boolean}
     */

    function pattern(val, pat) {
        if (typeof pat !== 'string') {
            return false;
        }

        var match = pat.match(new RegExp('^/(.*?)/([gimy]*)$'));
        if (!match) {
            return false;
        }

        return new RegExp(match[1], match[2]).test(val);
    }

正则匹配的源码