装置并应用

首先，在你的 vue 我的项目中进行装置：

npm install --save vue-input-check

装置实现当前引入并注册：

import inputCheck from 'vue-input-check';

// 装置
Vue.use(inputCheck);

而后，咱们就能够在表单中应用了：

<form autocomplete="off" novalidate>
    <input v-model='key' name='输入框名称' v-input-check='[key,"validate-express"]'/>
    <!-- 能够有任意多的输入框 -->
</form>

如你所见，上述的 v -input-check 就是咱们对每个输入框定义规定的中央，值是一个数组，第一个值就是输入框的 v -model，第二个值是一个字符串，语法如下：

validate-express="val1:param1:param2|val2|valu3:param1"

不同的规定应用 | 宰割，须要传递参数的规定的参数通过: 宰割。咱们来看几个例子：

    v-input-check='[key,"required|maxLength:10|regexp:^\\d{1,5}$"]'
    v-input-check='[key,"required"]'

目前可选的内置规定如下：

    required:boolean: 示意必输，有一个可选参数，示意是否必输，默认 true
    maxLength:num: 最大长度
    minLength:num: 最小长度
    regexp:str: 正则表达式 

获取校验后果

页面的规定定义好了当前，你有两中形式获取校验的后果。

1.JS 的形式

间接应用下列办法启动查看即可：

this.$validateCheck(formnode, callback, errorback);

此对象蕴含三个参数：

    formnode：须要校验的表单结点，必输
    callback：表单非法回调，可选
    errorback：表单非法回调，可选 

此外，谬误回调有一个形参，数据格式为：

{
    "$el": 谬误的输入框结点
    "$error": 以后输入框的第一个谬误提示信息
}

2.HTML 的形式

提供这种形式的目标是为了能够在页面实时反馈以后表单的输出状况。

首先，在表单上，你能够通过判断 class 蕴含 v -valid 或者 v -invalid 来判断表单是否非法。

同样的，增加指令 v -input-check 的中央同样能够这样判断该处是否非法，而对于更具体的谬误细节，比方必输非法，class 就会像这样 v -invalid-required v-invalid。
自定义校验规定

自定义校验规定

在大部分状况下，咱们还可能须要增加新的校验规定，毕竟默认的往往不足以满足所有业务状况：

Vue.use(inputCheck, {

    // 自定义校验规定
    validate: [{

        // 规定的名称
        name: "XXX",

        // 校验办法，返回 true 示意非法，false 示意非法
        // 须要留神的是，这个函数除了 el 和 val 肯定存在外，余下的参数是应用的时候通过 ```:``` 宰割传递的，能够有任意多个
        // 比方：``` required:true|phone:parm1:param2 ```
        test: function (el, val, ...) {return true|false;},

        // 非法提示信息，应该返回一个字符串
        message: function (el, name) {return "XXX";}
    },
    // 校验规定能够有多条
    ......
    ]

});