vue elementUI 表單校驗（多層嵌套）

 

<template>
  <el-form :model="formData" :rules="formRule" ref="formData" label-width="100px">
        <el-form-item prop="name" label="姓名">
            <el-input v-model="formData.name" ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密碼">
          <el-input v-model="formData.password" ></el-input>
        </el-form-item>
        <el-form-item prop="user.tel" label="手機號" >
          <el-input v-model="formData.user.tel" ></el-input>
        </el-form-item>
        <el-form-item prop="phones[0].model" label="手機號">
          <el-input v-model="formData.phones[0].model"></el-input>
        </el-form-item>
        <el-form-item v-for="(phone, index) in formData.phones" :label="phone.brand" :key="phone.brand" :prop="'phones.' + index + '.model'" :rules="{
         required: true, message: 'model不能為空', trigger: 'blur'
         }">
            <el-input v-model="phone.model"></el-input>
            <el-form :model="formData.phones[index]" label-width="100px">
                 <el-form-item v-for="(item, index1) in formData.phones[index].arr" :key="index1" :prop="'arr.' + index1 +  '.data1'" label="data1" :rules="{
                 required: true, message: 'data1不能為空', trigger: 'blur'
                 }">
                     <el-input v-model="item.data1"></el-input>
                 </el-form-item>
           </el-form>
        </el-form-item>
    </el-form>
    <el-button @click="handleSubmit">提交</el-button>    
</template>

data () {
    return {
      formData:{
          name: '',
          password: '',
          user: {
              tel: ''
          },
           phones: [
              { brand: "華為", model: "", arr: [{ data1: "" }] },
              { brand: "小米", model: "", arr: [{ data1: "" }] }
          ] 
      },
      formRule:{
        name: [{required: true, message: '不能為空', trigger: 'blur'},
                {pattern: /^[\u4E00-\u9FA5]+$/, message: '用戶名只能為中文', trigger: 'blur'}],
        password: [{required: true, message: '不能為空', trigger: 'blur'},
          {validator: Verify.validatePassword, trigger: 'blur'},
        ],
        'user.tel' : [{required: true, message: '手機號碼不能為空', trigger: 'blur'}],
        'phones[0].model': [{required: true, message: 'model不能為空', trigger: 'blur'}],
      },
    }
  },

methods: {
    handleSubmit(){
        const t = this;
        t.$refs['formData'].validate((valid) => {
            if(valid){
              console.log(this.formData);
            }
        })
    }
  }

data () {
    return {
      formData:{
          name: '',
          password: '',
          user: {
              tel: ''
          },
           phones: [
              { brand: "華為", model: "", arr: [{ data1: "" }] },
              { brand: "小米", model: "", arr: [{ data1: "" }] }
          ] 
      },
      formRule:{
        name: [{required: true, message: '不能為空', trigger: 'blur'},
                {pattern: /^[\u4E00-\u9FA5]+$/, message: '用戶名只能為中文', trigger: 'blur'}],
        password: [{required: true, message: '不能為空', trigger: 'blur'},
          {validator: Verify.validatePassword, trigger: 'blur'},
        ],
        'user.tel' : [{required: true, message: '手機號碼不能為空', trigger: 'blur'}],
        'phones[0].model': [{required: true, message: 'model不能為空', trigger: 'blur'}],
      },
    }
  },

methods: {
    handleSubmit(){
        const t = this;
        t.$refs['formData'].validate((valid) => {
            if(valid){
              console.log(this.formData);
            }
        })
    }
  }

 

 

 
         <el-row v-for="(couponItem,oIndex) in model.Coupons" :key="oIndex" :inline="true">
                <el-col :span="2">
                    <el-form-item :label="'券'+(oIndex+1)" :rules="couponRules.CouponName" :prop="'Coupons.' + oIndex+'.CouponName'">
                        <el-input v-model="couponItem.CouponName" placeholder="優惠券名稱"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item :rules="couponRules.FaceValue" :prop="'Coupons.' + oIndex+'.FaceValue'">
                        <el-input v-model="couponItem.FaceValue" placeholder="優惠券面值(元)"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item :rules="couponRules.EveryoneSendNumber" :prop="'Coupons.' + oIndex+'.EveryoneSendNumber'">
                        <el-input v-model="couponItem.EveryoneSendNumber" placeholder="每人發優惠券張數"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item :rules="couponRules.VerificationIntegral" :prop="'Coupons.' + oIndex+'.VerificationIntegral'">
                        <el-input v-model="couponItem.VerificationIntegral" placeholder="核銷門店積分/張"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <div style="min-width:310px">
                        <el-form-item :rules="couponRules.StartDate" :prop="'Coupons.' + oIndex+'.StartDate'">
                            <el-date-picker v-model="couponItem.StartDate" type="date" value-format="yyyy-MM-dd" placeholder="選擇有效開始日期" :picker-options="checkTime(couponItem.StartDate,couponItem.EndDate)">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div style="margin-left: 30px;min-width:310px">
                        <el-form-item :rules="couponRules.EndDate" :prop="'Coupons.' + oIndex+'.EndDate'">
                            <el-date-picker v-model="couponItem.EndDate" type="date" value-format="yyyy-MM-dd" placeholder="選擇有效結束日期" :picker-options="checkTime(couponItem.StartDate,couponItem.EndDate)">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="2">
                    <div style="margin-left: 60px;min-width:310px">
                        <el-form-item :rules="couponRules.GoodsIdList" :prop="'Coupons.' + oIndex+'.GoodsIdList'">
                            <el-select v-model="couponItem.GoodsIdList"
                                       filterable
                                       multiple
                                       placeholder="請選擇指定產品">
                                <el-option v-for="item in goodsOptions"
                                           :key="item.value"
                                           :label="item.text"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="2">
                    <div style="margin-left:90px">
                        <el-form-item :rules="couponRules.LimitTing" :prop="'Coupons.' + oIndex+'.LimitTing'">
                            <el-input v-model="couponItem.LimitTing" placeholder="限購使用聽數"></el-input>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="1" v-if="oIndex>=0">
                    <div style="margin-left: 125px">
                        <el-form-item>
                            <el-button type="danger" size="mini" @@click="deleteCoupon(oIndex)" icon="el-icon-delete-solid">
                            </el-button>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

自定義校驗
                couponRules: {
                    CouponName: [validate.required("請輸入優惠券名稱")],
                    FaceValue: [validate.required("請輸入面值"), validate.isCheckRegExp('面值格式不正確', /^([1-9]\d{0,9})(\.\d{1,2})?$/)],
                    EveryoneSendNumber: [validate.required('請輸入每人發放優惠券數量'), validate.isCheckRegExp('數值為正整數', /^\+?[1-9]\d*$/)],
                    VerificationIntegral: [validate.required('請輸入門店核銷分'), validate.isCheckRegExp('數值為正整數', /^\+?[1-9]\d*$/)],
                    StartDate: [validate.required("請選擇開始日期")],
                    EndDate: [validate.required("請選擇結束日期")],
                    GoodsIdList: [validate.required('請選擇指定產品')],
                    LimitTing: [validate.required('請輸入限購使用聽數'),validate.isCheckRegExp('數值為正整數', /^\+?[1-9]\d*$/)]
                },

 

原文 ：https://segmentfault.com/a/1190000014366951

https://blog.csdn.net/weixin_30565327/article/details/97940763