襄阳网站建设多少钱_什么是电子商务运营_关键词排名怎么上首页_百度seo关键词优化市场

表单的检验规则如下：

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 {// 清除错误信息}});}
}