在 Vue 3 中使用 Element Plus 的表单组件进行自定义规则的校验非常方便。Element Plus 提供了 ElForm
和 ElFormItem
组件,它们内置了表单验证的功能。下面我将详细介绍如何使用 Element Plus 进行自定义规则的校验。
创建表单及规则
首先,你需要创建一个 ElForm
组件,并为其提供一个 model
和 rules
对象。然后在每个 ElFormItem
中绑定 prop
属性,该属性应该对应于 model
中的字段。
示例代码
<template>
<el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script setup>
import { ref } from 'vue';
const formRef = ref(null);
const form = ref({
username: '',
password: ''
});
const rules = ref({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
{ validator: validatePassword, trigger: 'blur' }
]
});
function validatePassword(rule, value, callback) {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (form.value.username === value) {
callback(new Error('密码不能与用户名相同'));
} else {
callback();
}
}
}
function submitForm() {
formRef.value.validate((valid) => {
if (valid) {
alert('提交成功!');
} else {
console.log('验证失败');
return false;
}
});
}
</script>
说明
- 定义表单模型:
form
是一个响应式对象,用于存储表单数据。 - 定义验证规则:
rules
对象定义了表单验证规则。required
: 是否必填。min
和max
: 字符串长度的最小和最大值。trigger
: 触发验证的事件,例如blur
表示失去焦点时触发验证,change是change:改变触发。validator
: 自定义验证函数。
- 自定义验证函数:
validatePassword
函数用于验证密码是否与用户名相同。 - 提交表单:
submitForm
函数调用formRef.value.validate
方法来触发表单验证。如果所有验证都通过,则提交表单。
注意事项
- 确保在
ElForm
上使用ref
属性,以便可以通过引用访问表单实例。 - 自定义验证函数的第一个参数
rule
是当前验证规则的信息,第二个参数value
是表单字段的值,第三个参数callback
是回调函数,用于报告验证结果。