在表单提交之前 调用接口校验用户输入是否符合条件
符合则通过, 不符合 不让提交
<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]+$/i if (!reg.test(value)) return callback() let id if (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 } } = res if (data) { callback(new Error('商品条码重复,请重新输入')) } else { callback() } }, err => { // 接口错误 console.log(err) }).catch(err => { // 处理逻辑出错 console.log(err) }) } // 校验品目条码 const valideItemCode = (rule, value, callback) => { console.log(value) let id if (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 } } = res if (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 () { // 提交 }