关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

方法使用前需了解： 来自”和“小编的小提示： 首先打印一下this. $refs[formName]，检查是否拿到了正确的需要验证的form。 其次在拿到了正确的form后，检查该form上添加的表单验证是否正确，需要注意的点有： 1.使用此方法前检查prop一定必须要写在上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定） 2.el-form rules，model属性绑定，ref标识 自定义表单验证的坑: 一.validate/resetFields 未定义。 1：要验证的DOM，还没有加载出来。 2：有可能this.$refs[ruleForm].validate() 方式不识别。需要使用: this. $refs.ruleForm.validate(); 这种方式，不是你们想要的结果。 解决办法： this.ticketDialog = true; //对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 this.$nextTick(function() { this. $refs.ticketInfoForm.resetFields(); }) 或者：this.$refs[ruleForm].validate() 方式不识别。需要使用: this. $refs.ruleForm.validate(); 那么如下所示： methods: { submitForm(ruleForm2) { //官网 this.$refs[ruleForm2].validate(); //在实际使用中，会报错。validate未定义 //使用this. $refs.ruleForm2.validate(); 成功。 this.$refs[ruleForm2].validate((valid) => { if (valid) { alert(‘submit!’); } else { console.log(‘error submit!!’); return false; } }); } } 二. 数字类型的验证, 兼容mac和windows系统。 数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。 如下所示：