文章目录
情况说明
el-form校验项为数组- 自定义组件（非
elementUI表单组件）
<el-form-item prop="fileList" :rules="rules">
<!-- 文件上传自定义组件，接收是一个数组类型的集合 -->
<ty-upload :fileList.sync="form.fileList" />
</el-form-item>
rules: [{
required: true, message: "请选择", trigger: "change" }],
问题说明
- 此时校验不生效
- 自定义校验validator也无效
解决办法
watch: {
// 校验主动处理
"form.fileList"(val) {
this.$nextTick(() => {
this.$refs?.form?.validateField("fileList");
});
},
},
思考：当我们开`el-select的multiple时，v-model绑定的值也是数组，为什么可以正常触发校验？
因为在el-select组件的源码中，他主动触发了el-form的校验，但我们组件内部是没有触发的
最后提一下自定义校验，用于一些校验一些复杂的值
validator的参数有：(rule, value, callback)，前三个比较重要。
- rule：指向该条规则对象。
- value：新的值，用于参与运算、对比。
- callback：执行回调，使用方法是：callback(‘…’);。
- 如果不传参：表示验证通过，一般不必专门强调。
- 如果传入值：字符串会作为错误提示，但是显示优先级低于外层的message。比如callback(‘内层错误提示’);跟message: '外层错误提示’同时存在，则会提示：外层错误提示。
data() {
const name = (rule, value, callback) => {
console.log(rule);
console.log(value);
console.log(callback);
if (this.oldName === value) {
callback(new Error("新名字不能和旧名字一致"));
} else {
callback();
}
};
return {
rules: {
name: [
{
required: true, trigger: "blur", message: "请再次输入新名字" },
{
required: true, validator: name, trigger: "blur" },
],
},
};
},