方法使用前需了解：
来自”和“小编的小提示：
首先打印一下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();
解决办法：
-
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 类型的修饰符。
如下所示：
-
<el-form-item label="年龄" prop="age">
-
<el-input type="number" v-model.number="ruleForm2.age"></el-input>
-
</el-form-item>
如有不解，可以查看具体案例：
html:
-
<script src="//unpkg.com/vue/dist/vue.js"></script>
-
<script src="//unpkg.com/element-ui/lib/index.js"></script>
-
<div id="app">
-
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-
<el-form-item label="密码" prop="pass">
-
<el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
-
</el-form-item>
-
<el-form-item label="确认密码" prop="checkPass">
-
<el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
-
</el-form-item>
-
<el-form-item label="年龄" prop="age">
-
<el-input type="number" v-model.number="ruleForm.age"></el-input>
-
</el-form-item>
-
<el-form-item>
-
<el-button type="primary" @click="submitForm(‘ruleForm‘)">提交</el-button>
-
<el-button @click="resetForm(‘ruleForm‘)">重置</el-button>
-
</el-form-item>
-
</el-form>
-
</div>
js:
-
var Main = {
-
data() {
-
var checkAge = (rule, value, callback) => {
-
if (!value) {
-
return callback(new Error(‘年龄不能为空‘));
-
}
-
setTimeout(() => {
-
if (!Number.isInteger(value)) {
-
callback(new Error(‘请输入数字值‘));
-
} else {
-
if (value < 18) {
-
callback(new Error(‘必须年满18岁‘));
-
} else {
-
callback();
-
}
-
}
-
}, 1000);
-
};
-
var validatePass = (rule, value, callback) => {
-
if (value === ‘‘) {
-
callback(new Error(‘请输入密码‘));
-
} else {
-
if (this.ruleForm.checkPass !== ‘‘) {
-
this.$refs.ruleForm.validateField(‘checkPass‘);
-
}
-
callback();
-
}
-
};
-
var validatePass2 = (rule, value, callback) => {
-
if (value === ‘‘) {
-
callback(new Error(‘请再次输入密码‘));
-
} else if (value !== this.ruleForm.pass) {
-
callback(new Error(‘两次输入密码不一致!‘));
-
} else {
-
callback();
-
}
-
};
-
return {
-
ruleForm: {
-
pass: ‘‘,
-
checkPass: ‘‘,
-
age: ‘‘
-
},
-
rules: {
-
pass: [
-
{ validator: validatePass, trigger: ‘blur‘ }
-
],
-
checkPass: [
-
{ validator: validatePass2, trigger: ‘blur‘ }
-
],
-
age: [
-
{ validator: checkAge, trigger: ‘blur‘ }
-
]
-
}
-
};
-
},
-
methods: {
-
submitForm(ruleForm) {
-
//官网 this.$refs[ruleForm].validate();
-
//在实际使用中，会报错。validate未定义
-
//
-
//使用this.$refs.ruleForm.validate(); 成功。
-
this.$refs.ruleForm.validate((valid) => {
-
if (valid) {
-
alert(‘submit!‘);
-
} else {
-
console.log(‘error submit!!‘);
-
return false;
-
}
-
});
-
},
-
resetForm(formName) {
-
this.$nextTick(function() {
-
this.$refs[formName].resetFields();
-
})
-
}
-
}
-
}
-
var Ctor = Vue.extend(Main)
-
new Ctor().$mount(‘#app‘)
以上介绍了" (vue.js)element ui 表单验证 this$refs[formName]validate"里面的小坑的问题解答，希望对有需要的网友有所帮助。
原文地址：https://www.cnblogs.com/huge1122/p/11286860.html