> 一個頁面上多個表單需要在一個操作情況下同時驗證必填項是否填寫完整 ``` <template> <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData1" > <el-form-item label="訂單號:" v-if="editorShow" class="el-form-pad"> <template slot-scope="scope"> <el-button type="text" @click="onEdit(scope.row, scope.$index)"> {{formData.orderId}} </el-button> </template> </el-form-item> </el-form> <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData2"> <el-form-item label="訂單類型:" prop="orderTypeValue"> <el-select v-model="formData.orderTypeValue" placeholder="請選擇" size="mini" :disabled="disableIsShow"> <el-option v-for="item in orderTypeList" :key="item.orderTypeValue" :label="item.orderTypeName" :value="item.orderTypeValue"></el-option> </el-select> </el-form-item> </ell-form> <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData3"> <el-form-item label="收貨人:" prop="userName"> <el-input v-model="formData.userName" size="mini" class="box-width" :disabled="disableIsShow" /> </el-form-item> </el-form> <button class="mini-search-btn" @click="handleSave('formData')"> 保存訂單 </button> </template> ``` ``` <script> export default { data() { return { formData: { orderTypeValue: '', // 訂單類型 distributionId: '', // 配送方式 invoiceType: '', // 發票類型 payWay: '', // 支付方式 isInvoice: 0, // 是否開票 provinceId: "", // 省份id cityId: "", // 城市id districtId: "", // 區id importOrderId: "", zipCode: '', // 郵編 }, rules: { // 必填輸入提示 payWay: [ {required: true, message: '請選擇支付方式', trigger: 'change' } ], distributionId: [ {required: true, message: '請選擇配送方式', trigger: 'change' } ], orderTypeValue: [ { required: true, message: "請選擇訂單類型", trigger: "change" } ], userName: [ { required: true, message: "請輸入收貨人名字", trigger: "blur" } ], provinceId: [ { required: true, message: "請選擇地區", trigger: "change" } ], address: [ { required: true,message: "請輸入街道地址",trigger: "blur"} ], mobile: [ { required: true,message: "請輸入手機號碼",trigger: "blur"}, { validator: validatePhone } ], }, } }, methods: { // 對于四個form進行promise封裝進行同時驗證 handleSave(formData) { // 保存操作 let formArr=['formData1','formData2','formData3']//三個form表單的ref var resultArr=[] //用來接受返回結果的數組 var _self=this function checkForm(formName) { //封裝驗證表單的函數 var result = new Promise(function(resolve, reject) { _self.$refs[formName].validate((valid) => { if (valid) { resolve(); } else { reject() } }) }) resultArr.push(result) //push 得到promise的結果 } formArr.forEach(item => { //根據表單的ref校驗 checkForm(item) }) Promise.all(resultArr).then(values => { this.submitForm() // 此時必填完成，做保存后的業務操作 }).catch( _ => { console.log('err') }) }, } } </script> ```