<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>
el-form多個表單同時驗證必填項
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
推薦閱讀更多精彩內容
- element-ui中的el-form表單驗證,只有在提交按鈕點擊時才進行驗證,這樣會減少消耗。看別人寫的文章 ,...
- 前同事在代碼里寫了大量v-if 編輯表單彈出時會觸發一次驗證 輸入時輸入框框有值也會觸發驗證規則 點擊提交也會觸發...
- vue打開模態窗口時會自動進行表單驗證如下圖 原因是form屬性在data中的初始化需要給值。如下: data()...