vue表单验证 -- mmj-vue-vd

原由

正在作的项目使用input比较多，基本每一个input须要作输入校验，一个个校验比较麻烦，这明显与程序员的思想相悖。因而就开始了挖坑之旅！在公司大佬的指导下，终于完成了一个较简单的vue表单验证插件。

安装

npm install mmj-vue-vd
复制代码

---

使用

1. 在vue脚手架的main.js里引入

   import vd from 'mmj-vue-vd 复制代码

   Vue.use(vd) 
   复制代码

2. 在vue文件中使用

   • data里 submitOk: [] ->同组input绑定赞成数组
   • 写入指令

   <input type="text" v-vd="{rule:['numberInterval(1, 100)', 'required'],bind:'submitOk'}"  v-model="msg">
   复制代码

   • 提交表单时进行校验 var result = this.submitOk.$check() 返回值true/false 成功/失败
   • 清除提示信息 el.clear() el指当前元素，可用ref获取

3. 参数

   • rule: 校验规则数组
   • bind: 绑定的数组元素
   • nothing: 是否为非必填项

4. 样式修改

   • 输入框样式修改：经过暴露出来的className-> error_input修改，修改border需!important
   • 错误提示样式修改： 经过暴露出来的className-> error_msg修改，修改字体大小、颜色、偏移需!important

5. 自定义规则

   • 使用customize方法自定义规则或则修改规则

校验规则

required: '不为空',</br>
  number: '请填入数字',</br>
  znumber: '请输入正数',</br>
  fnumber: '请输入负数',</br>
  notznumber: '请输入非正数',</br>
  notfnumber: '请输入非负数',</br>
  integer: '请输入整数',</br>
  pInteger: '请输入正整数',</br>
  nInteger: '请输入负整数',</br>
  notpInteger: '请输入非正整数',</br>
  notnInteger: '请输入非负整数',</br>

  chinese: '请输入中文',</br>
  email: '请输入邮箱地址',</br>
  url: '请输入连接地址',</br>
  postCode: '请输入邮编地址',</br>
  idCard: '请输入身份证号',</br>

  numberInterval: '两个数之间'</br>
复制代码

注意

1. 使用v-for遍历input时，不可以使用index做为key值，需使用惟一值做为key值
2. 尽可能同一提交表单绑定同一个数组对象
3. 必填优先级高于非必填，即require > nothing
4. $check() 可传一个布尔值作参数，true验证全部，false知道有一个验证失败就中止，默认false

使用实例

1. html

因为插件是基于vue指令的，因此在使用的时候只需使用插件命令便可。

<div class="input_group">
     <label>非必填项</label>
     <input class="input" type="text" value="" v-vd="{rule:['number'],bind:'submitOk', nothing: 'nothing'}">
    </div>
    <div class="input_group">
      <label>必填项</label>
      <input class="input" type="text" value="dsfg" v-vd="{rule:['required'],bind:'submitOk'}">
    </div>
    <div class="input_group">
      <label>填入数字</label>
      <input class="input" type="text" value="dsfg" v-vd="{rule:['required', 'number'],bind:'submitOk'}">错误信息在最后提示
    </div>
    <div class="input_group">
      <label>填入数字</label>
      <span>
        <input class="input" type="text" v-model="dsfg" v-vd="{rule:['required', 'number'],bind:'submitOk'}">
      </span>用元素包裹input时，提示信息显示位子
    </div>
复制代码

2. js

使用一个数组来绑定同一批次须要验证的表单

data () {
  return {
    msg: '3221',
    submitOk: []
  }
}
复制代码

3. 效果

4. 自定义规则 main.js

因为业务需求的不一样，插件提供了自定义验证规则的方法来提高插件的灵活性，customize(name, text, callback)

name: 规则名，必传
 text: 提示语，必传
 callback: 验证函数， 非必传
复制代码

自定义最大输入长度限制，带有参数，则提示词中使用变量需用"{{}}"包裹

vd.customize('maxLen(len)', '最大长度为{{len}}', function(val, args) {
  return val.length <= args[0]
})
复制代码

若是已存在此规则，则会覆盖原有规则

vd.customize('required', '内容不能为空')
复制代码

最后

项目源码在这里，你们能够自行去看源码（简单易懂），这也是我没有写源码实现的缘由，我但愿感兴趣的朋友能够从这个简单的插件中学会看源码。若是有疑问或者更好的想法能够和我交流一波，你们共同进步，固然，能点个赞就更好了。