vue+axios+element-ui实战（五）-- 验证、清除多个form表单

对于表单验证和重置，element ui提供了非常好用的方法http://element-cn.eleme.io/#/zh-CN/component/form，但这只是一个页面只有一个form的情况，而实际工作中，有时候页面设计会比较复杂，就不得不写入多个form，这时候想要做到提交form表单是校验所有表单，并提交后清除用户填入的内容，我们可以结合Promise与forEach两大方法来解决。

上代码：

[code]<template>
<div style="margin-left: 30px;">
<div>表单1</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="5">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="1">-</el-col>
<el-col :span="5">
<el-form-item prop="date2">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="活动形式" prop="desc" style="width: 800px;">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
</el-form>
<div>表单2</div>
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name" style="width: 400px;">
<el-input v-model="ruleForm2.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm2.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动形式" prop="desc" style="width: 800px;">
<el-input type="textarea" v-model="ruleForm2.desc"></el-input>
</el-form-item>
</el-form>
<div>表单3</div>
<el-form :model="ruleForm3" :rules="rules3" ref="ruleForm3" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name" style="width: 400px;">
<el-input v-model="ruleForm3.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm3.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div>
<el-button type="primary" @click="checkAllForm()">校验全部</el-button>
<el-button @click="clearAllForm()">清除全部</el-button>
</div>
</div>
</template>

<script>
export default {
name: "clearForm",
data() {
return {
formArr: [ // form表单的ref
'ruleForm',
'ruleForm2',
'ruleForm3'
],
resultArr: [], // 用来接受返回结果的数组
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
desc: ''
},
ruleForm2: {
name: '',
region: '',
desc: ''
},
ruleForm3: {
name: '',
region: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
},
rules2: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
},
rules3: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
}
}
},
methods: {
// 校验全部表单
checkAllForm() {
let _this = this
function checkForm (formName) { // 封装验证表单的函数
let result = new Promise(function (resolve, reject) {
_this.$refs[formName].validate((valid) => {
if (valid) {
resolve()
} else {
reject(new Error(''))
}
})
})
_this.resultArr.push(result) // push 得到promise的结果
}
_this.formArr.forEach(item => { // 根据表单的ref校验
checkForm(item)
})

Promise.all(_this.resultArr).then(function () { // 都通过了
console.log('checkAll')
}).catch(function () {
console.log('err')
})
},
// 清除全部表单
clearAllForm() {
let _this = this
_this.formArr.forEach(item => {
clearForm(item)
})
function clearForm (formName) {
let result = new Promise(function (resolve, reject) {
_this.$refs[formName].resetFields()
})
_this.resultArr.push(result) // push 得到promise的结果
}
}
}
}
</script>

<style scoped>

</style>