el-form表单验证

1. 如果table在form中，且需要对每个表格进行验证的话，需要对prop进行处理
2. el-form 上，model绑定的数据是json对象格式
3. el-form-item 上，prop绑定的值必须可以通过 . 的方式从el-form上的model绑定的对象中找到(即prop值和el-form-item中model的名字一致)

例如设置某动态表单

<!--表单项部分-->
<el-form-item :prop="'list.'+ index + '.tobaccoTypeId'" :rules="rules.tobaccoTypeId">
            <el-select
              v-model="detail.tobaccoTypeId"
              placeholder="请选择"
              filterable
              style="width:240px"
              @change="getTobaccoRemainWeight"
            >
              <el-option
                v-for="item in brandList"
                :key="item.TOBACCO_TYPE_ID"
                :label="item.TOBACCO_TYPE_NAME+'(剩余量:'+item.NOT_USED_WEIGHT+'kg)'"
                :value="item.TOBACCO_TYPE_ID"
              ></el-option>
            </el-select>
</el-form-item>

:prop="'list.'+ index + '.tobaccoTypeId'"相当于获取list[index].tobaccoTypeId

动态表单验证完整代码如下：

<el-form
      ref="dataForm"
      :model="blendingOrder"
      size="mini"
      label-position="right"
      label-width="90px"
      style="margin-left:50px;"
    >
      <el-form-item label="残损烟丝：" prop="fragmentList">
        <el-row>
          <el-col :span="12">
            <p>牌号</p>
          </el-col>
          <el-col :span="6">
            <p>重量(kg)</p>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addFragmentDetail">添加</el-button>
          </el-col>
        </el-row>
        <div v-for="(detail,index) in blendingOrder.list" :key="index">
          <el-row :key="index">
            <el-col :span="12">
              <el-form-item :prop="'list.'+ index + '.tobaccoTypeId'" :rules="rules.tobaccoTypeId">
                <el-select
                  v-model="detail.tobaccoTypeId"
                  placeholder="请选择"
                  filterable
                  style="width:240px"
                  @change="getTobaccoRemainWeight"
                >
                  <el-option
                    v-for="item in brandList"
                    :key="item.TOBACCO_TYPE_ID"
                    :label="item.TOBACCO_TYPE_NAME+'(剩余量:'+item.NOT_USED_WEIGHT+'kg)'"
                    :value="item.TOBACCO_TYPE_ID"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :prop="'list.'+ index + '.weight'" :rules="rules.weight">
                <el-input v-model="detail.weight" placeholder="请输入掺配重量" style="width:80%" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button
                  v-show="showDelete"
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="delFragmentDetailList"
                >删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- </el-form-item> -->
        </div>
      </el-form-item>

data(){
    return{
        blendingOrder: {
            list: [
              {
                tobaccoTypeId: "",
                quantity: 0
              }
            ]
        },
        rules: {
        tobaccoTypeId: [
          { required: true, message: "请选择卷烟牌号", trigger: "change" }
        ],
        // 包含小数的数字验证
        weight: [
          {
            validator: (rule, value, callback) => {
              //包含小数的数字
              let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
              if (!value) {
                return callback(new Error("掺配重量不能为空"));
              }
              setTimeout(() => {
                if (!reg.test(value)) {
                  callback(new Error("请输入数字值"));
                } else {
                  if (value > this.tobaccoRemainWeight) {
                    callback(new Error("必须小于当前烟丝剩余重量"));
                  } else if (value < 0) {
                    callback(new Error("不能为负数"));
                  } else {
                    callback();
                  }
                }
              }, 1000);
            },
            trigger: ["blur", "submit"]
          }
        ]
    }
}

页面图