關於vue.js element ui 表單驗證 this.$refs[formName].validate()的問題
方法使用前需瞭解：
來自”和“小編的小提示：
首先打印一下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. 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 類型的修飾符。
如下所示：
