起因:今天在做一个功能模块的时候,给一个表单加了验证,有一个下拉框设置为多选multiple属性,在加入验证之后,首次打开这个窗口,就会触发一次验证。
验证代码:
appraisalcategoryid: [ { trigger: 'change', required: true, message: this.getRes('ReleaseAppraisalForm.Error.AppraisalCategory')}, ],
原因:select下拉框在设置为多选后,加载页面就会触发其中的change事件。
解决方法:设置一个变量用来表示是否是第一次加载这个页面,如果是第一次加载就不用判断。
改进后的代码:
data () { let __checkAppraisalCategoryid = (rule, value, callback) => { if (!this.isFirstLoad) { if (value.length === 0) { callback(new Error(this.getRes('ReleaseAppraisalForm.Error.AppraisalCategory'))); } else { callback(); } } else { this.isFirstLoad = false; } }; return { isFirstLoad: true }; appraisalcategoryid: [ { trigger: 'change', validator: __checkAppraisalCategoryid}, ], }
记得在下拉框的el-form-item中加入样式class = "is-required",让该行有一个必填验证的样式。
《参考链接》