项目中用到表单复杂验证规则,在此记录一下,省着以后忘了。
1.简单版本
<Form ref="editData" :model="editData" :label-width="80" :rules="rules">
<FormItem label="上公差" prop="dataValueUp">
<Input v-model="editData.dataValueUp" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></Input>
</FormItem>
<FormItem label="下公差" prop="dataValueLow">
<Input v-model="editData.dataValueLow" ></Input>
</FormItem>
<FormItem >
<Button @click="cancel('editData')" style="margin-left: 15px;">取消</Button>
<Button type="info" @click="amend('editData')" style="margin-left: 10px">确定</Button>
</FormItem>
// onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" 这个是js方法
// 禁止输入空格,就是空格键按键无效
data() {
const dataValueLowValidate = (rule, value, callback) => {
if (this.editData.dataValueUp){
if (value === "" || value === null) {
callback(new Error('请填写该项'));
} else {
value = value.toString();
if (!value.match(/^(\-|\+?)\d+(\.\d+)?$/g)) {
callback(new Error("必须为数字"));
} else if (parseInt(value) > parseInt(this.editData.dataValueUp)) {
callback(new Error("下公差不能大于上公差"));
} else {
callback();
}
}
} else {
if (value === "" || value === null) {
callback();
} else {
value = value.toString();
if (!value.match(/^(\-|\+?)\d+(\.\d+)?$/g)) {
callback(new Error("必须为数字"));
} else if (parseInt(value) > parseInt(this.editData.dataValueUp)) {
callback(new Error("下公差不能大于上公差"));
} else {
callback();
}
}
}
};
const dataValueUpValidate = (rule, value, callback) => {
if (this.editData.dataValueLow){
if (value === "" || value === null) {
callback(new Error('请填写该项'));
} else {
value = value.toString();
if (!value.match(/^(\-|\+?)\d+(\.\d+)?$/g)) {
callback(new Error("必须为数字"));
} else {
callback();
}
}
} else {
if (value === "" || value === null) {
callback();
} else {
value = value.toString();
if (!value.match(/^(\-|\+?)\d+(\.\d+)?$/g)) {
callback(new Error("必须为数字"));
} else {
callback();
}
}
}
};
return {
rules: {
dataValueUp: [
{trigger: 'blur', validator: dataValueUpValidate}
],
dataValueLow: [
{validator: dataValueLowValidate, trigger: 'change'}
],
},
}
}
methods:{
amend(name) {
// 验证规则
this.$refs[name].validate((valid) => {
if (valid) {
} else {
this.$Message.error('请按规则填写!');
}
})
},
}
// 主要就是几个东西:
// 1.prop="dataValueLow" 在FormItem 添加prop属性。
// 对应Form ref="editData" :model="editData" :label-width="80" :rules="rules"中的rules。
// 在data中设置rules属性 特殊验证用validator: dataValueLowValidate (自定义的属性)。
// 在 data中定义属性dataValueLowValidate,在里面定义一下特殊的验证规则,一般正则,或者逻辑定义。
简单版就这样了,还有个复杂点的,computed中验证,有时间在写吧,这个简单的挺好用的。
忘加图了,补充一下,点击确定按钮时验证。