vue2使用elementUI的表单组件如何判断输入框里的值已存在,rules该怎样编写?
<template>
<el-form :model="form" :rules="rules" ref="myForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
email: '',
},
rules: {
username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{
validator: this.checkUsername,
trigger: 'blur',
},
],
email: [
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change'],
},
],
},
};
},
methods: {
checkUsername(rule, value, callback) {
// 假设这里的checkUsername是一个异步校验函数,它会返回一个Promise对象
checkUsername(value)
.then(res => {
if (res.data.isExist) {
callback(new Error('用户名已存在'));
} else {
callback();
}
})
.catch(() => {
callback(new Error('校验失败'));
});
},
submitForm() {
this.$refs.myForm.validate(valid => {
if (valid) {
// 表单验证通过,执行提交操作
this.submit();
} else {
// 表单验证失败,给出提示信息
this.$message.error('表单验证失败,请检查表单填写内容');
}
});
},
},
};
</script>
在上面的代码中,我们定义了一个名为checkUsername
的自定义校验函数,并将其应用到了username
字段上。在校验函数中,我们调用了一个checkUsername
异步函数来判断输入框中的值是否已存在。如果存在,则调用回调函数,并传递一个错误信息给它。如果不存在,则调用回调函数,而不传递任何信息。这个回调函数会在表单验证过程中被调用,它的作用是将错误信息返回给表单组件。