一个表单填写区域校验两个字段:
1、校验prop必写: prop="abscissa"
<el-form-item label="横纵坐标值" prop="abscissa">
<el-input
size="small"
id="nodexLeft"
style="width: 50%"
v-model="form.abscissa"
placeholder="请填写数字"
@input="form.abscissa = $util.onkeyNumber(form.abscissa)"
>
<template slot="prepend">x</template>
</el-input>
<el-input
size="small"
id="nodeyRight"
style="width: 50%"
v-model="form.ordinate"
placeholder="请填写数字"
@input="form.ordinate = $util.onkeyNumber(form.ordinate)"
>
<template slot="prepend">y</template>
</el-input>
</el-form-item>
2、data下添加自定义校验规则 + 普通定义校验rules
data() {
// 自定义横纵坐标验证规则
const checknodexy = (rule, value, callback) => {
if (!(this.form.ordinate && this.form.abscissa)) {
return callback(new Error('请填入横纵坐标'));
} else {
callback();
}
};
return {
rules: {
abscissa: [
// checknodexy用的是上面定义的
{ validator: checknodexy, required: true, trigger: 'blur' }
]
},
}
}