在 Element Plus 中,表单校验规则可以单独抽离到一个对象中进行统一管理。如果需要实现“值的关联校验”(如密码和确认密码一致、开始时间小于结束时间等),可以通过自定义校验函数实现。
1. 校验规则抽离
export const formRules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
// 关联校验在下面
]
};
2. 实现值的关联校验
以“密码”和“确认密码”一致为例:
export const formRules = (form) => ({
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value !== form.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
},
trigger: 'blur'
}
]
});
3. 在组件中使用
<script setup>
import { reactive, ref } from 'vue';
import { formRules } from '@/rules/formRules.js';
const form = reactive({
username: '',
password: '',
confirmPassword: ''
});
const rules = formRules(form);
</script>
<template>
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" />
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="form.confirmPassword" type="password" />
</el-form-item>
<el-button @click="submit">提交</el-button>
</el-form>
</template>
4. 总结
- 校验规则可以单独抽离成模块。
- 关联校验通过自定义
validator
,并传入整个表单对象实现。 - 只要在
validator
里能访问到其他字段的值,就能实现各种关联校验。
如需更多复杂校验,可继续扩展 validator
函数逻辑。
Comments
请在后台配置评论类型和相关的值。