? 方法使用前需了解：
來自”和“小編的小提示：
首先打印一下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((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((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
總結
以上是生活随笔為你收集整理的关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
