关于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;
3. //对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
5. this.$nextTick(function() {
7. this.$refs.ticketInfoForm.resetFields();
9. })

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

那么如下所示：

1. methods: {
3. submitForm(ruleForm2) {
5. //官网 this.$refs[ruleForm2].validate();
7. //在实际使用中，会报错。validate未定义
9. //使用this.$refs.ruleForm2.validate(); 成功。
11. this.$refs[ruleForm2].validate((valid) => {
13. if (valid) {
15. alert('submit!');
17. } else {
19. console.log('error submit!!');
21. return false;
23. }
25. });
27. }
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"里面的小坑的问题解答，希望对有需要的网友有所帮助。