在表單提交之前 調用接口校驗用戶輸入是否符合條件
符合則通過， 不符合 不讓提交

<Card :title="title"><Form class="mt10" :model="editFormData" :rules="editFormValidate" style="width:500px;" ref="editForm" :label-width="100"><FormItem label="商品分類 ：" label-position="left" prop="categoryId"><Select v-model="editFormData.categoryId" @on-change='changeCategory'><Option v-for="item in classifyList" :value="item.value" :key="item.label">{{item.label}}</Option></Select></FormItem><FormItem label="品牌名稱 ：" prop="brandName"><Input maxlength="50" show-word-limit placeholder="請輸入品牌名稱" v-model="editFormData.brandName" /></FormItem><FormItem label="商品名稱 ：" prop="name"><Input maxlength="50" show-word-limit placeholder="請輸入商品名稱" v-model="editFormData.name" /></FormItem><div class="flex"><FormItem label="商品規格 ：" prop="specifications" style="width:75%"><Input placeholder="請輸入商品規格" v-model="editFormData.specifications" maxlength="9" show-word-limit/></FormItem><FormItem prop="unit" class="unitInput" style="width:25%"><Select v-model="editFormData.unit" placeholder="規格單位"><Option v-for="item in unitList" :value="item.value" :key="item.label">{{item.label}}</Option></Select></FormItem></div><FormItem label="圖片上傳 ：" prop="file"><div v-if="photo" class="upload-img"><img height="100%" :src="photo" /></div><Upload type="drag" v-model="editFormData.file" style="display:inline-block;width:100px;" :max-size="200" accept=".png" :format="['png']" :before-upload="fileBeforeUpload" action="//"><div v-if="!photo" style="width: 100px;height:100px;line-height: 100px;"><Icon type="md-add" size="20"></Icon></div><span v-else class="cp">更換</span></Upload><div class="tips">請上傳200K以內的PNG格式圖片，尺寸為750x750</div></FormItem><FormItem label="商品條碼 ：" prop="barCode"><Input maxlength="20" show-word-limit placeholder="可以輸入商品外包裝條形碼，或者自行定義的商品碼" v-model="editFormData.barCode"/></FormItem><FormItem label="品目編碼 ：" prop="itemCode"><Input maxlength="50" show-word-limit placeholder="(選填)" v-model="editFormData.itemCode" /></FormItem></FormItem></Form></Card><div class="tac mt10"><Button class="btn" style="margin-right: 8px" @click="handleReset('editForm')">返回</Button><Button class="btn" type="primary" @click="handleSubmit('editForm',submitForm)" :loading="btnLoading">提交</Button></div> export default {data () {const validateFile = (rule, value, callback) => {if (!this.photo && !this.editFormData.file) {callback(new Error('請上傳圖片'))} else {callback()}}// 校驗商品條碼const valideBarCode = (rule, value, callback) => {var reg = /^[0-9]+$/iif (!reg.test(value)) return callback()let idif (this.actionType === 'add') {id = 0} else {id = this.$route.params['id']}const data = {type: 1,code: value,id: id}checkGoods(data).then(res => {const {data: { data }} = resif (data) {callback(new Error('商品條碼重復，請重新輸入'))} else {callback()}}, err => {// 接口錯誤console.log(err)}).catch(err => {// 處理邏輯出錯console.log(err)})}// 校驗品目條碼const valideItemCode = (rule, value, callback) => {console.log(value)let idif (this.actionType === 'add') {id = 0} else {id = this.$route.params['id']}const data = {type: 2,code: value,id: id}checkGoods(data).then(res => {const {data: { data }} = resif (data) {callback(new Error('商品條碼重復，請重新輸入'))} else {callback()}}, err => {// 接口錯誤console.log(err)}).catch(err => {// 處理邏輯出錯console.log(err)})}} }return {barCode: [{ required: true, message: '請輸入數字條碼', trigger: 'change' },{ validator: valideBarCode, trigger: 'blur' },{ message: '請輸入20字以內的數字條碼', trigger: 'change', pattern: /^[0-9]+$/i }],itemCode: [{ required: false, message: '請輸入品目編碼', trigger: 'change' },{ message: '請輸入50字以內 數字和字母的品目編碼', trigger: 'change', pattern: /^[A-Za-z0-9]+$/ },{ validator: valideItemCode, trigger: 'blur' }], } submitForm () { // 提交 }

總結

以上是生活随笔為你收集整理的iview 表单提交之前验证是否符合条件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。