elementui表单自定义校验及嵌套验证

• 自定义校验规则额外参数

indexConfigRules = {
    inputNormalStart: [
      { validator: (rule, value, callback, source, options) => {
        // source是跟value的值一致的键值对象
      }, trigger: 'blur' }
    ]
  }

• 多个输入框校验逻辑一致

  /** 指标配置验证规则 */
  indexConfigRules = {
    inputNormalStart: [
      { validator: (rule, value, callback) => {
        this.validateRange(rule, value, callback, 'inputNormalStart', 'inputNormalEnd');
      }, trigger: 'blur' }
    ],
    inputNormalEnd: [
      { validator: (rule, value, callback) => {
        this.validateRange(rule, value, callback, 'inputNormalStart', 'inputNormalEnd');
      }, trigger: 'blur' }
    ],
    inputStandardStart: [
      { validator: (rule, value, callback) => {
        this.validateRange(rule, value, callback, 'inputStandardStart', 'inputStandardEnd');
      }, trigger: 'blur' }
    ],
    inputStandardEnd: [
      { validator: (rule, value, callback) => {
        this.validateRange(rule, value, callback, 'inputStandardStart', 'inputStandardEnd');
      }, trigger: 'blur' }
    ],
    periodNormalStart: [
      { validator: (rule, value, callback) => {
        this.validateRange(rule, value, callback, 'periodNormalStart', 'periodNormalEnd');
      }, trigger: 'blur' }
    ],
    periodNormalEnd: [
      { validator: (rule, value, callback) => {
        this.validateRange(rule, value, callback, 'periodNormalStart', 'periodNormalEnd');
      }, trigger: 'blur' }
    ]
  }

  /**
   * @Des  {验证数字的有效范围}
   */
  validateRange(rule, value, callback, beforeKey, afterKey) {
    if (value) {
      if (this.indexConfigDialogForm[afterKey]) {
        if (parseFloat(this.indexConfigDialogForm[beforeKey]) > parseFloat(this.indexConfigDialogForm[afterKey])) {
          callback(new Error('输入范围有误，请检查'));
        } else {
          callback()
        }
      } else {
        callback()
      }
    } else {
      callback();
    }
  }

• ElementUI表单校验prop的嵌套写法

  页面中的表单经常会有校验某些字段的需要，常规的写法是prop和表单的字段名一致即可，但是表单的数据格式可能会很复杂，如果 某个字段有多级嵌套，那我们该如何正确的写prop呢，下面的三种情况中，我分别介绍如何设置prop属性才能正确的校验name字段。

  • 常规写法

    这种情况我们只需要设置prop为name即可

    <el-form-item prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
    
    form: {
        name: '',
        sex: '',
        age: ''
    }
    

  • 对象嵌套写法

    如果校验的字段是二级属性，那么prop从一级属性user_info开始

    <el-form-item prop="user_info.name">
        <el-input v-model="form.user_info.name"></el-input>
    </el-form-item>
    
    
    form: {
        user_info: {
            name: '',
            sex: '',
            age: ''    
        }
    }
    

  • 数组嵌套写法

    如果校验的字段是数据里面的某一项的某个字段，我们需要从user_info开始，然后跟上数组的索引，最后再加上需要校验的字段

    <el-form-item
        v-for="(info, index) in form.user_info"
        :prop="'user_info.' + index + '.name'"
    >
        <el-input v-model="info.name"></el-input>
    </el-form-item>
    form: {
        user_info: [
            {
                name: '',
                sex: '',
                age: ''    
            },
            {
                name: '',
                sex: '',
                age: ''    
            }
        ]
    }
    

  总结：el-form-item上的属性prop字段，必须是其父级组件el-form中绑定model字段中的一个直接子属性。比如某个字段我们可以通过this.form.user_info[0].name获取到，那么我们就需要设置prop为user_info[0].name，这样就可以添加校验规则了，其他嵌套情况也一样。

• 添加验证方式

  • 方式一

  <template v-if="dialogFormData.experimentList && dialogFormData.saveAndSubmitBtnFlag">
    <div v-for="(items, outIndex) in dialogFormData.experimentList" :key="items.experimentName">
      <el-form-item label="名称：">{{ items.experimentName }}</el-form-item>
      <el-form-item
        v-for="(item, innerIndex) in items.experimentItemList"
        :key="item.id"
        :label="item.experimentItemName + '：'"
        :prop="'experimentList.' + outIndex + '.experimentItemList.' + innerIndex + '.experimentItemValue'"
        :rules="[
          { required: true, message: '不能为空', trigger: 'blur' },
          { type: item.dataType === 'NUMERICAL_TYPE' ? 'number' : 'string', message: item.dataType === 'NUMERICAL_TYPE' ? '请输入具体数值' : ''},
          { validator: (rule, value, callback) => {
            validateInputLen(rule, value, callback, item.dataType);
          }, trigger: 'blur' },
        ]"
      >
        <!-- <el-input v-model="item.experimentItemValue" autocomplete="off">
          <template slot="append">{{ item.unit }}</template>
        </el-input> -->
        <el-input v-if="item.dataType !== 'NUMERICAL_TYPE'" v-model="item.experimentItemValue" autocomplete="off">
          <template slot="append">{{ item.unit }}</template>
        </el-input>
        <el-input v-else v-model.number="item.experimentItemValue" autocomplete="off">
          <template slot="append">{{ item.unit }}</template>
        </el-input>
      </el-form-item>
    </div>
  </template>