VUE2表单检验及提示的消除
表单的检验规则如下:
rules: {
brandId: [
{ required: true, message: "品牌不能为空", trigger: "blur" }
],
seriesId: [
{ required: true, message: "系列不能为空", trigger: "blur" }
],
levelName: [
{ required: true, message: "等级名称不能为空", trigger: "blur" }
],
firstLetter: [
{ required: true, message: "检索首字母不能为空", trigger: "blur" }
],
}
上面的检验存在局限性,当表单数据发生变化时,不能灵活做到提示文字的消除。可通过以下方式来实现:
1. 使用 trigger: 'change'
或 trigger: 'input'
默认情况下,trigger: 'blur'
会在输入框失去焦点时触发校验。如果你希望输入内容时实时校验,可以将 trigger
改为 'change'
或 'input'
。
rules: {
brandId: [
{ required: true, message: "品牌不能为空", trigger: "change" } // 实时校验
],
seriesId: [
{ required: true, message: "系列不能为空", trigger: "change" } // 实时校验
],
levelName: [
{ required: true, message: "等级名称不能为空", trigger: "change" } // 实时校验
],
firstLetter: [
{ required: true, message: "检索首字母不能为空", trigger: "change" } // 实时校验
],
}
2. 使用 validateField
方法手动触发校验
如果你希望在数据变化时手动触发校验,可以使用 validateField
方法。例如,在输入框的 @input
事件中调用该方法。
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="品牌" prop="brandId">
<el-input v-model="form.brandId" @input="validateField('brandId')"></el-input>
</el-form-item>
<el-form-item label="系列" prop="seriesId">
<el-input v-model="form.seriesId" @input="validateField('seriesId')"></el-input>
</el-form-item>
<el-form-item label="等级名称" prop="levelName">
<el-input v-model="form.levelName" @input="validateField('levelName')"></el-input>
</el-form-item>
<el-form-item label="检索首字母" prop="firstLetter">
<el-input v-model="form.firstLetter" @input="validateField('firstLetter')"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
brandId: "",
seriesId: "",
levelName: "",
firstLetter: "",
},
rules: {
brandId: [
{ required: true, message: "品牌不能为空", trigger: "blur" }
],
seriesId: [
{ required: true, message: "系列不能为空", trigger: "blur" }
],
levelName: [
{ required: true, message: "等级名称不能为空", trigger: "blur" }
],
firstLetter: [
{ required: true, message: "检索首字母不能为空", trigger: "blur" }
],
}
};
},
methods: {
validateField(prop) {
this.$refs.form.validateField(prop);
}
}
};
</script>
3. 使用 watch
监听表单数据变化
如果你不想在每个输入框上绑定 @input
事件,可以通过 watch
监听表单数据的变化,并调用 validateField
方法。
export default {
data() {
return {
form: {
brandId: "",
seriesId: "",
levelName: "",
firstLetter: "",
},
rules: {
brandId: [
{ required: true, message: "品牌不能为空", trigger: "blur" }
],
seriesId: [
{ required: true, message: "系列不能为空", trigger: "blur" }
],
levelName: [
{ required: true, message: "等级名称不能为空", trigger: "blur" }
],
firstLetter: [
{ required: true, message: "检索首字母不能为空", trigger: "blur" }
],
}
};
},
watch: {
"form.brandId": function (newVal) {
this.$refs.form.validateField("brandId");
},
"form.seriesId": function (newVal) {
this.$refs.form.validateField("seriesId");
},
"form.levelName": function (newVal) {
this.$refs.form.validateField("levelName");
},
"form.firstLetter": function (newVal) {
this.$refs.form.validateField("firstLetter");
},
}
};
4. 使用 clearValidate
方法清除校验状态
如果输入框的值已经合法,你可以调用 clearValidate
方法清除校验状态。
methods: {
validateField(prop) {
this.$refs.form.validateField(prop, (errorMessage) => {
if (!errorMessage) {
this.$refs.form.clearValidate(prop); // 清除校验状态
}
});
}
}
5. 使用 async-validator
的 validate
方法
如果你需要更灵活的控制,可以直接使用 async-validator
的 validate
方法。
import Schema from "async-validator";
const descriptor = {
brandId: { required: true, message: "品牌不能为空" },
seriesId: { required: true, message: "系列不能为空" },
levelName: { required: true, message: "等级名称不能为空" },
firstLetter: { required: true, message: "检索首字母不能为空" },
};
const validator = new Schema(descriptor);
methods: {
validateField(prop) {
validator.validate({ [prop]: this.form[prop] }, (errors) => {
if (errors) {
// 显示错误信息
} else {
// 清除错误信息
}
});
}
}