npm install mmj-vue-vd
-
在vue脚手架的main.js里引入
import vd from 'mmj-vue-vd
Vue.use(vd)
-
在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获取
-
参数
- rule: 校验规则数组
- bind: 绑定的数组元素
- nothing: 是否为非必填项
-
样式修改
- 输入框样式修改:通过暴露出来的className-> error_input修改,修改border需!important
- 错误提示样式修改: 通过暴露出来的className-> error_msg修改,修改字体大小、颜色、偏移需!important
-
自定义规则
- 使用customize方法自定义规则或则修改规则
required: '不为空',
number: '请填入数字',
znumber: '请输入正数',
fnumber: '请输入负数',
notznumber: '请输入非正数',
notfnumber: '请输入非负数',
integer: '请输入整数',
pInteger: '请输入正整数',
nInteger: '请输入负整数',
notpInteger: '请输入非正整数',
notnInteger: '请输入非负整数',
chinese: '请输入中文',
email: '请输入邮箱地址',
url: '请输入链接地址',
postCode: '请输入邮编地址',
idCard: '请输入身份证号',
numberInterval: '两个数之间'
- 使用v-for遍历input时,不可使用index作为key值,需使用唯一值作为key值
- 尽量同一提交表单绑定同一个数组对象
- 必填优先级高于非必填,即require > nothing
- $check() 可传一个布尔值做参数,true验证所有,false知道有一个验证失败就停止,默认false
- 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>
- js
data () {
return {
msg: '3221',
submitOk: []
}
}
-
自定义规则 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