//自定义校验规则
var checkIdCard = (rule, value, cb) => {
const regIdCard = /^[0-9A-Za-z]+$/;
if (regIdCard.test(value)) {
return cb();
}
cb(new Error('只能输入数字或字母'));
};
datacode: [
{ required: true, message: '请输入指标编码', trigger: 'blur' },
{ validator: checkIdCard, trigger: 'blur' },
],
------------------------------------------手动分割-------------------------------------------------------------------
在 Element UI 中的 el-form 组件中,可以通过自定义校验规则来进行表单验证。以下是一个示例,展示了如何在 el-form 中添加自定义的校验规则:
首先,在 Vue 的 data 中定义一个名为 rules 的对象,用于存储校验规则。校验规则以表单项的字段名作为 key,以数组的形式存储一个或多个校验规则。
data() {
return {
form: {
name: '', // 表单项名称
age: null, // 表单项年龄
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 10, message: '姓名长度在2到10个字符之间', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字', trigger: 'blur' },
{ validator: this.checkAge, trigger: 'blur' }
]
}
};
},
在 methods 中定义一个名为 checkAge 的校验函数,该函数接收三个参数:rule、value 和 callback。其中,rule 是当前校验的规则,value 是当前校验的值,callback 是回调函数,在校验完成后使用它来返回校验结果。
methods: {
checkAge(rule, value, callback) {
if (value < 0 || value > 150) {
callback(new Error('年龄必须在0到150之间'));
} else {
callback();
}
}
},
checkNum(rule, value, callback) {
const positiveRegex = /^(?!0+(\.0+)?$)\d{1,13}(\.\d{1,4})?$/;
if (!positiveRegex.test(value)) {
callback(new Error("资金必须大于0,并且最多保留4位小数"));
} else {
callback();
}
},
在 el-form-item 中使用 :rules 属性将对应的校验规则应用到表单项上。
<el-form :model="form" :rules="rules"></el-form>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input-number v-model="form.age"></el-input-number>
</el-form-item>
</el-form>
通过以上步骤,你可以在 el-form 组件中使用自定义的校验规则进行表单验证。校验规则可以包括内置的验证规则(如 required、min、max 等),也可以自定义 validator 规则来执行更复杂的校验逻辑。