最近刚开始接触饿了吗组件,各种还是挺好用的,不过也有一些使用在文档是没有说全的,网上也比较少案例,以下是一个多表单验证的Demo。
需求如下图:点击提交时候要对n个表单进行验证。
<div id="app">
<div v-for="(item,index) in Data">
<el-form :model="item" :ref="'ValidateForm'" class="demo-ruleForm" :rules="rules">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="item.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="item.checkPass" auto-complete="off"></el-input>
</el-form-item>
</el-form>
</div>
</div>
首先,用官方的简单的单表单验证如下:
<el-form :model="Data[0]" :ref="'ValidateForm'" class="demo-ruleForm" :rules="rules">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="Data[0].pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="Data[0].checkPass" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="submitForm('ValidateForm')">提交</el-button>

可以看到,this.$refs[formName]获取到的是一个对象。
所以多个表单的时候,我的想法是ref=‘ValidateForm+index’,然后遍历this.$refs[formName+index]后发现,得到的却是数组,而不再是对象。
如次,我将验证代码改为如下即可:
submitForms(formName) {
for (var i = 0; i < this.Data.length; i++) {
this.$refs[formName+i][0].validate((valid) => {
if (valid) {
console.log('验证成功!');
} else {
console.log('error submit!!');
}
});
}
},
既然在for循环的多个表单this.$refs[formName]会变成数组,那ref=‘ValidateForm’也是个数组,果不其然:
这样看来,使用同一个ref的值更好。
需求上,因为确认密码要和当前form的密码做比较,而自定义验证方法中的参数并没有当前表单其他的值,而又无法知道当前表单是第几个。所以我使用一个属性SelectedIndex来用来存储当前验证的窗体下标,解决了此问题。
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.Data[this.SelectedIndex].pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
submitForms(formName) {
for (var i = 0; i < this.Data.length; i++) {
this.SelectedIndex = i;
this.$refs[formName][i].validate((valid) => {
if (valid) {
console.log('验证成功!');
} else {
console.log('error submit!!');
}
});
}
},
全部代码:
<div id="app">
<div v-for="(item,index) in Data">
<el-form :model="item" :ref="'ValidateForm'" class="demo-ruleForm" :rules="rules">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="item.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="item.checkPass" auto-complete="off"></el-input>
</el-form-item>
</el-form>
</div>
<el-button type="primary" @click="submitForms('ValidateForm')">提交</el-button>
<el-form :model="Data[0]" :ref="'ValidateForm'" class="demo-ruleForm" :rules="rules">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="Data[0].pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="Data[0].checkPass" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="submitForm('ValidateForm')">提交</el-button>
</div>
<script>
var vue = new Vue({
el: '#app',
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.Data[this.SelectedIndex].pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
Data: [
{
pass: '',
checkPass: '',
},
{
pass: '',
checkPass: '',
},
{
pass: '',
checkPass: '',
}
],
rules: {
checkPass: [
{ validator: validatePass, trigger: 'blur' }
]
},
SelectedIndex: 0
}
},
methods: {
submitForms(formName) {
for (var i = 0; i < this.Data.length; i++) {
this.SelectedIndex = i;
this.$refs[formName][i].validate((valid) => {
if (valid) {
console.log('验证成功!');
} else {
console.log('error submit!!');
}
});
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log('验证成功!');
} else {
console.log('error submit!!');
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
});
</script>