• 自定義校驗規(guī)則額外參數(shù)

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

• 多個輸入框校驗邏輯一致

  /** 指標(biāo)配置驗證規(guī)則 */
  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  {驗證數(shù)字的有效范圍}
   */
  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的嵌套寫法

  頁面中的表單經(jīng)常會有校驗?zāi)承┳侄蔚男枰Ｒ?guī)的寫法是prop和表單的字段名一致即可，但是表單的數(shù)據(jù)格式可能會很復(fù)雜，如果 某個字段有多級嵌套，那我們該如何正確的寫prop呢，下面的三種情況中，我分別介紹如何設(shè)置prop屬性才能正確的校驗name字段。

  • 常規(guī)寫法

    這種情況我們只需要設(shè)置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: ''    
        }
    }
    

  • 數(shù)組嵌套寫法

    如果校驗的字段是數(shù)據(jù)里面的某一項的某個字段，我們需要從user_info開始，然后跟上數(shù)組的索引，最后再加上需要校驗的字段

    <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: ''    
            }
        ]
    }
    

  總結(jié)：el-form-item上的屬性prop字段，必須是其父級組件el-form中綁定model字段中的一個直接子屬性。比如某個字段我們可以通過this.form.user_info[0].name獲取到，那么我們就需要設(shè)置prop為user_info[0].name，這樣就可以添加校驗規(guī)則了，其他嵌套情況也一樣。

• 添加驗證方式

  • 方式一

  <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' ? '請輸入具體數(shù)值' : ''},
          { 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>