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

最新推荐文章于 2024-04-09 18:40:00 发布

原创最新推荐文章于 2024-04-09 18:40:00 发布 · 9.4k 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍Vue中表单验证的常见问题及解决方案，包括如何正确使用prop属性、el-form-rules及ref标识进行表单验证，并提供数字类型验证的方法。

                    
                    方法使用前需了解：

来自”和“小编的小提示：

首先打印一下this.refs[formName]，检查是否拿到了正确的需要验证的form。其次在拿到了正确的form后，检查该form上添加的表单验证是否正确，需要注意的点有：1.使用此方法前检查prop一定必须要写在上面，写在里面的input上或者其他任何地方都不行（el−form−itemprop属性绑定）2.el−formrules，model属性绑定，ref标识自定义表单验证的坑:一.validate/resetFields未定义。1：要验证的DOM，还没有加载出来。2：有可能this.refs[formName]，检查是否拿到了正确的需要验证的form。其次在拿到了正确的form后，检查该form上添加的表单验证是否正确，需要注意的点有：1.使用此方法前检查prop一定必须要写在上面，写在里面的input上或者其他任何地方都不行（el−form−itemprop属性绑定）2.el−formrules，model属性绑定，ref标识自定义表单验证的坑:一.validate/resetFields未定义。1：要验证的DOM，还没有加载出来。2：有可能this.refs[ruleForm].validate() 方式不识别。需要使用: this.refs.ruleForm.validate();这种方式，不是你们想要的结果。解决办法：this.ticketDialog=true;//对整个表单进行重置，将所有字段值重置为初始值并移除校验结果this.refs.ruleForm.validate();这种方式，不是你们想要的结果。解决办法：this.ticketDialog=true;//对整个表单进行重置，将所有字段值重置为初始值并移除校验结果this.nextTick(function() {

  this.refs.ticketInfoForm.resetFields();

})
或者：this.refs.ticketInfoForm.resetFields();})或者：this.refs[ruleForm].validate() 方式不识别。需要使用: this.refs.ruleForm.validate();
那么如下所示：
methods: {   

  submitForm(ruleForm2) {

    //官网 this.refs.ruleForm.validate();那么如下所示：methods: {     submitForm(ruleForm2) {    //官网 this.refs[ruleForm2].validate();  

    //在实际使用中，会报错。validate未定义

    //使用this.refs.ruleForm2.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 类型的修饰符。
如下所示：