:model 绑定的是你想要验证的form v-model好像不可以
ref 后面会用到
:rules 绑定的是校验规则
el-form-item 上添加prop属性 属性值是你要验证的form里的字段
sellPointFormRules: {
name: [
{ required: true, message: "请输入核心卖点名称", trigger: "change" },
],
content: [
{ required: true, message: "请输入核心卖点内容", trigger: "change" },
],
},
trigger绑定两种触发方式是个数组 trigger:[“change”,“blur”] 校验字段改变时和失焦时触发校验
下面是实际开发中遇到的情况
this.$nextTick(() => {
this.$refs.sellPointForm.clearValidate();
});
\\加上$nextTick是因为有时候dom元素还未加载完成 this.$refs.sellPointForm
取不到
clearValidate方法可以消除form验证 在你打开弹窗的时候有可能保留上次的验证结果所以需要取消掉验证
this.$refs.sellPointForm.clearValidate(“content”);
\\这是消除content字段的验证
element组件的image上传组件在验证失败后,重新上传图片,上次失败的结果还是会保留,所以用到取消单个字段的验证
如下图
this.$refs.sellPointForm.validate(valid=>{
if(valid){
console.log("验证通过")
}else {
console.log("验证失败")
}
})
validate方法可以获取form表单是否验证成功的回调