?

方法使用前需了解：

來自”和“小編的小提示：

首先打印一下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

總結

以上是生活随笔為你收集整理的关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。