记录Promise.all同步验证element的form表单,单个input验证

getyefang

已于 2022-10-12 14:10:16 修改

阅读量941

点赞数

分类专栏： vue 文章标签： elementui vue.js javascript

于 2021-12-09 15:42:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36821274/article/details/121826187

版权

vue 专栏收录该内容

19 篇文章

订阅专栏

由于某一种需求，同一个页面存在多个form表单，提交的时候需要同时验证。

1、同步验证

<el-form :model="formCar" ref="formCar" :rules="rules" :hide-required-asterisk="true" label-width="120px" :inline="true" class="topFormTitle">
   <el-form-item label="车牌号:" prop="carNo">
    <el-input
        type="text"
        v-model="formCar.carNo"
        class="w130"
        size="medium"
        placeholder="请输入完整车牌号"
     ></el-input>
   </el-form-item>
</el-form>
<el-form
    ref="form"
    :model="form"
    label-width="120px"
    :rules="rules"
    :inline="true"
    :hide-required-asterisk="true"
    class="mt20"
 >
  <el-form-item label="收取费用:" prop="receivableAmount">
      <el-input type="number" v-model.number="form.receivableAmount" class="w180" size="medium"></el-input>
  </el-form-item>
  <el-form-item label="支付费用:" prop="payableAmount">
          <el-input type="number" v-model.number="form.payableAmount" class="w180" size="medium"></el-input>
  </el-form-item>
</el-form>

export default {
  data() {
    return {
      form: {
        replaceItemId: "",
        supplierId: "",
        supplierName:'',
        payableAmount: "",
        receivableAmount: "",
        feeBearerId:''
      },
      formCar:{
        carNo:''
      },
      rules: {
        carNo: [{ required: true, message: "车牌号码不能为空" }],
        receivableAmount: [{ required: true, message: "收取不能为空" }],
        payableAmount: [{ required: true, message: "支付费用不能为空" }]
      },
    };
  },
  methods: {
    onSubmitform(formdata) {
      let formCarVal=new Promise((resolve,reject)=>{
        this.$refs['formCar'].validate(valid => {
        if (valid) {
          return resolve(true)
        } else {
          return reject(false);
        }
      });
      })
      let formVal=new Promise((resolve,reject)=>{
        this.$refs[formdata].validate(valid => {
        if (valid) {
          return resolve(true)
        } else {
          return reject(false);
        }
      });
      })
      Promise.all([formCarVal,formVal]).then((result)=>{
        this.postProcedureAdd()
      }).catch((error)=>{
        return error
      })
    },
  }
};

2、单个input验证

 <el-form :model="codeform" :rules="codeformRule" ref="codeform" :hide-required-asterisk="true">
      <el-form-item label="手机号码" prop="tel">
        <el-input v-model="codeform.tel" ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="codeform.code" @keyup.enter.native="nextStep">
          <template slot="append">
            <el-button class="bluetxt" @click="getCode" :disabled="codeText!='获取验证码'">{{codeText}}</el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>

data(){
 return {
    codeformRule: {
        code: [{ validator: checkCode, trigger: 'blur' }],
        tel: [{ required: true, trigger: 'blur', message: '请输入手机号码'},{pattern:/^1[3|4|5|6|7|8|9][0-9]\d{8}$/,message: '请输入正确的手机号码'}]
      },
 }
},
methods: {
    getCode() {
      this.$refs.codeform.validateField('tel')//验证单个
    }
}