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

 

 

方法使用前需了解：

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

首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form。

其次在拿到了正确的form后，检查该form上添加的表单验证是否正确，需要注意的点有：

1.使用此方法前检查prop一定必须要写在<el-form-item>上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定）

2.el-form rules，model属性绑定，ref标识

自定义表单验证的坑:

 

一.validate/resetFields 未定义。

1：要验证的DOM，还没有加载出来。

2：有可能this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate(); 这种方式，不是你们想要的结果。

解决办法：

1.  
   this.ticketDialog = true;
2.  
    
3.  
   //对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
4.  
    
5.  
   this.$nextTick(function() {
6.  
    
7.  
   this.$refs.ticketInfoForm.resetFields();
8.  
    
9.  
   })

或者：this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate();

那么如下所示：

1.  
   methods: {
2.  
    
3.  
   submitForm(ruleForm2) {
4.  
    
5.  
   //官网 this.$refs[ruleForm2].validate();
6.  
    
7.  
   //在实际使用中，会报错。validate未定义
8.  
    
9.  
   //使用this.$refs.ruleForm2.validate(); 成功。
10.  
     
11.  
    this.$refs[ruleForm2].validate((valid) => {
12.  
     
13.  
    if (valid) {
14.  
     
15.  
    alert('submit!');
16.  
     
17.  
    } else {
18.  
     
19.  
    console.log('error submit!!');
20.  
     
21.  
    return false;
22.  
     
23.  
    }
24.  
     
25.  
    });
26.  
     
27.  
    }
28.  
     
29.  
    }

二. 数字类型的验证, 兼容mac和windows系统。

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。
如下所示：

1.  
   <el-form-item label="年龄" prop="age">
2.  
   <el-input type="number" v-model.number="ruleForm2.age"></el-input>
3.  
   </el-form-item>

如有不解，可以查看具体案例：

html:

1.  
   <script src="//unpkg.com/vue/dist/vue.js"></script>
2.  
   <script src="//unpkg.com/element-ui/lib/index.js"></script>
3.  
   <div id="app">
4.  
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
5.  
   <el-form-item label="密码" prop="pass">
6.  
   <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
7.  
   </el-form-item>
8.  
   <el-form-item label="确认密码" prop="checkPass">
9.  
   <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
10.  
    </el-form-item>
11.  
    <el-form-item label="年龄" prop="age">
12.  
    <el-input type="number" v-model.number="ruleForm.age"></el-input>
13.  
    </el-form-item>
14.  
    <el-form-item>
15.  
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
16.  
    <el-button @click="resetForm('ruleForm')">重置</el-button>
17.  
    </el-form-item>
18.  
    </el-form>
19.  
    </div>

js:

1.  
   var Main = {
2.  
   data() {
3.  
   var checkAge = (rule, value, callback) => {
4.  
   if (!value) {
5.  
   return callback(new Error('年龄不能为空'));
6.  
   }
7.  
   setTimeout(() => {
8.  
   if (!Number.isInteger(value)) {
9.  
   callback(new Error('请输入数字值'));
10.  
    } else {
11.  
    if (value < 18) {
12.  
    callback(new Error('必须年满18岁'));
13.  
    } else {
14.  
    callback();
15.  
    }
16.  
    }
17.  
    }, 1000);
18.  
    };
19.  
    var validatePass = (rule, value, callback) => {
20.  
    if (value === '') {
21.  
    callback(new Error('请输入密码'));
22.  
    } else {
23.  
    if (this.ruleForm.checkPass !== '') {
24.  
    this.$refs.ruleForm.validateField('checkPass');
25.  
    }
26.  
    callback();
27.  
    }
28.  
    };
29.  
    var validatePass2 = (rule, value, callback) => {
30.  
    if (value === '') {
31.  
    callback(new Error('请再次输入密码'));
32.  
    } else if (value !== this.ruleForm.pass) {
33.  
    callback(new Error('两次输入密码不一致!'));
34.  
    } else {
35.  
    callback();
36.  
    }
37.  
    };
38.  
    return {
39.  
    ruleForm: {
40.  
    pass: '',
41.  
    checkPass: '',
42.  
    age: ''
43.  
    },
44.  
    rules: {
45.  
    pass: [
46.  
    { validator: validatePass, trigger: 'blur' }
47.  
    ],
48.  
    checkPass: [
49.  
    { validator: validatePass2, trigger: 'blur' }
50.  
    ],
51.  
    age: [
52.  
    { validator: checkAge, trigger: 'blur' }
53.  
    ]
54.  
    }
55.  
    };
56.  
    },
57.  
    methods: {
58.  
    submitForm(ruleForm) {
59.  
    //官网 this.$refs[ruleForm].validate();
60.  
    //在实际使用中，会报错。validate未定义
61.  
    //
62.  
    //使用this.$refs.ruleForm.validate(); 成功。
63.  
    this.$refs.ruleForm.validate((valid) => {
64.  
    if (valid) {
65.  
    alert('submit!');
66.  
    } else {
67.  
    console.log('error submit!!');
68.  
    return false;
69.  
    }
70.  
    });
71.  
    },
72.  
    resetForm(formName) {
73.  
    this.$nextTick(function() {
74.  
    this.$refs[formName].resetFields();
75.  
    })
76.  
    }
77.  
    }
78.  
    }
79.  
    var Ctor = Vue.extend(Main)
80.  
    new Ctor().$mount('#app')

以上介绍了" (vue.js)element ui 表单验证 this$refs[formName]validate"里面的小坑的问题解答，希望对有需要的网友有所帮助。