<template>
<div>
<div v-for="(item,index) in Data" :key="index">
<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>
</div>
</template>
<script>
import url from "../../common/api";
export default {
data() {
return {
Data: [
{
pass: '',
checkPass: '',
},
{
pass: '',
checkPass: '',
},
{
pass: '',
checkPass: '',
}
],
rules: {
checkPass: [
{ required: true, message: '验证信息自己写', trigger: 'blur' },
],
},
};
},
methods: {
submitForms(ruleForm) {
let xix=[]//创建一个空数据,用来存每个valid是true/false,
this.Data.forEach((item,index) => {
this.$refs[ruleForm][index].validate((valid) => {
xix.push(valid)
});
});
//查看是否都是true
let xin=xix.every((item,index)=>{
return item
})
//xix.every(valid)每一项都是true才提交请求
if (xin) {
axios.get(...)
} else {
console.log('error submit!!');
}
}
}
}
</script>
<style>
</style>
element-ui多个表单如何同时验证
最新推荐文章于 2024-04-11 20:35:55 发布