elementui form表单 数组校验 深结构校验

先以官方的demo举例

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      return {
        ruleForm: {
          pass: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

普通对象属性

其实普通对象属性就是除数组外的数据结构，可以使用数组，对象或是validator函数来进行校验，此时校验的原理是通过prop获取到el-form标签绑定对应的哪一项item，再检验值是否为空（null，''，undefined），如果为空状态则报错，这是最简单理解的第一种情况

data() {
    return {
        pass: [
            { validator: validatePass, trigger: "blur" } // 可以自定义校验规则的方式
          ],
        check: [{ require: true, message: "请填写*****", trigger: "blur"}]  // 简单校验方式
    }
}

数组对象属性

上面提到rules的校验规则是判断值是否为空，那数组是不为空的，因为!![] === true，因此有两种方式可以实现数组的校验

第一种方式

第一种方式适用于数组中每一项有特定的条件进行判断，如数组中某一项值不能重复的场景，可以把rules规则放在数组父级的el-form-item标签中，再在对应的validator里通过value的值做一系列的判断。

 var validatePass = (rule, value, callback) => {
    if (Array.isArray(val) {
        callback(new Error('数据异常'));
    } else {
        value.map(item=>{
              // do sth.
        })
    }
 };

第二种方式

第二种方式适用于把数组项当做一个小的form表单，即无法和数组中的其他项发生联动（实际上是可以的，但是写法很反人类，不推荐这样写），但是校验会轻巧一点。
简单展示一下示例代码，我这里是把他抽象成一个组件了

<template>
  <div>
    <el-row v-for="(form, index) in value" :key="index">
      <el-col :span="10" style="padding-right: 10px;">
        <el-form-item :prop="prop+`[${index}].key`" :rules="rules.key">
          <el-select v-model="form.key" placeholder="请选择条件" clearable>
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" style="padding-right: 10px;">
        <el-form-item prop="condition">
          <el-select v-model="form.condition" placeholder="请选择条件" clearable>
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" style="padding-right: 10px;">
        <el-form-item :prop="prop+`[${index}].value`" :rules="rules.value">
          <el-input v-model="form.value" placeholder="请选择条件" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="2" :offset="0" class="btn-opt">
        <i v-if="index ===0" class="c-p el-icon-circle-plus" style="color: #409eff" @click="addItem()"></i>
        <i v-else class="c-p el-icon-remove" style="color: #f56c6c" @click="delItem(index)"></i>
      </el-col>

    </el-row>
  </div>
</template>

<script>
export default {
  name: 'InputItem',
  props: {
    value: {
      type: Array,
      require: true,
      default() {
        return [{
          key: '',
          condition: '',
          value: '',
        }]
      },
    },
    prop: {
      type: String,
      require: true,
      default: '',
    },
  },
  data() {
    return {
      rules: {
        key: [{ required: true, message: '请输入调整后价格', trigger: 'change' }],
        condition: [{ required: true, message: '请输入调整后价格', trigger: 'change' }],
        value: [{ required: true, message: '请输入调整后价格', trigger: 'blur' }],
      },
    }
  },
  methods: {
    addItem(val) {
      this.$emit('input', [...this.value, Object.assign({
        key: '',
        condition: '',
        value: '',
      }, val)])
    },
    delItem(index, howmany = 1) {
      const ary = this.value
      ary.splice(index, howmany)
      this.$emit('input', ary)
    },
  },
}
</script>

<style lang="scss" scoped>
.btn-opt {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  font-size: 24px;
}
</style>

然后在实际表单中这样使用

最终效果：

深结构校验

如果理解了上面的第二种校验方式，就不难理解深结构校验了。
实际上form表单的校验规则是根据没个el-form-item标签内的prop属性，由字符串转化成对象属性，再找到form表单绑定的v-mode的值进行判断，那么深结构的普通校验可以沿用上面第二种方式，但是绑定的prop就再增加一层关系就可以了。