目录

hymn

忽有故人心头过,回首山河已是秋。

vue 动态表单验证

关键的几点
el-form-item 中:

 v-for="(item,index) in tempContract.need" 
:prop="'need.'+ index +'.cname'"
:rules="cardRules.charge"

el-form-item 下的 el-input :

	v-model="need[index].value"
<el-col :span="12" v-for="(item,index) in tempContract.need" :key="index">
   <el-form-item :label="item.label" class="rules" :prop="'need.'+ index +'.cname'" :rules="cardRules.charge">
    <el-input :placeholder="item.value" v-if="item.cname!=='type'" v-model="need[index].value" @change="changeConsole"></el-input>
    <el-select class="selectClass" v-if="item.cname==='type'" v-model="need[index].value" placeholder="请选择">
      <el-option
        v-for="item in xiaXiaoOptions"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </el-for



data() {
      let checknumber = (rule, value, callback) => {
        debugger
        let reg = /^[\d]+$/;
        if (value ==='订单支付金额小写'  && !reg.test(value)) {
          callback(new Error('请输入不小于0的整数'));
        } else {
          callback()
        }
      };
      return {
        saveRules: {
          tempName: [
            {
              required: true, message: '请选择模板', trigger: 'blur'
            }
          ],
          username: [
            {
              required: true, message: '请输入签署人', trigger: 'blur'
            }
          ],
          phone: [
            { required: true, trigger: 'blur', validator: validPhone }
          ],
          tempId: [
            { required: true, trigger: ["blur",'change'], message: '请选择模板' }
          ]
        },
        cardRules: {
          charge: [{
            required: true,
            message: '请输入充值金额',
            trigger: 'blur'
          }, {
            validator: checknumber,
            trigger: 'blur'
          }]
        }
      }
    }

标题:vue 动态表单验证
作者:hymn
地址:https://dxyhymn.com/articles/2020/07/02/1593661447473.html