<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
其中
**:rules=“rules”**为关键其中rules配置自定义的效验规则
写在data中其中的name属性必须与prop="name"一一对应
rules: {
name: [{validator: this.testNumberValidate,trigger: 'blur'}]
}
之后就可自定义规则
return callback() 代表着通过
callback(new Error(‘不能为空字符’)); 即不通过 不能为空字符 将显示出来
//验证表单
testNumberValidate(rule, value, callback) {
var regExp = /^[1-9][0-9]*$/;
var regNull = /^[\s\S]*.*[^\s][\s\S]*$/;
if (regNull.test(value) === false) {
return callback(new Error('不能为空字符'));
} else {
this.$http({
url: this.$http.adornUrl('/material/getDesignl'),
method: 'get',
params: this.$http.adornParams({
design:value
})
}).then(({
data
}) => {
if (data && data.code === 0) {
if(data.data>0){
return callback(new Error('重复款号'));
}else{
return callback();
}
}
})
}
},