mmj-vue-vd v1.0.5

安装

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: '不为空', number: '请填入数字', znumber: '请输入正数', fnumber: '请输入负数', notznumber: '请输入非正数', notfnumber: '请输入非负数', integer: '请输入整数', pInteger: '请输入正整数', nInteger: '请输入负整数', notpInteger: '请输入非正整数', notnInteger: '请输入非负整数',

chinese: '请输入中文', email: '请输入邮箱地址', url: '请输入链接地址', postCode: '请输入邮编地址', idCard: '请输入身份证号',

numberInterval: '两个数之间'

注意

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

使用实例

1. html

    <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. 自定义规则 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', '内容不能为空')

   

打包

npm run build