element form 自定义校验

element-ui 表单校验总结

作为一名前端开发，会遇到各种各样的表单处理。为了给用户更好的体验，行内表单校验及错误展示被广泛使用。由于工作中用到element-ui较多，所以这里简单谈一谈日常工作遇到的【有意思】的表单交互。

element-ui官网链接： https://element.eleme.cn/#/zh-CN/component/form, 简单的表单校验可以直接参考官网套着用

实现原理

1. 基于 el-form-item 下面的表单项做校验，而不是基于 prop
2. 嵌套校验为啥需要”…“字符串拼接的语法

一行多交互框

这种交互的特点是同一个label下有多个关联的输入框，改变的时候需要校验彼此

// template
<el-form-item
  label="区间"
  :rules="[{ validator: numValidator, trigger: ['blur', 'change'] }]">
  <el-input-number
    v-model="form.values.min" /> ~
  <el-input-number
    v-model="form.values.max" />
</el-form-item>

// script
{
  data() {
    return {
      form: {
        values: {
          min: 0,
          max: 10
        }
      }
    }
  },
  methods: {
    numValidator(rule, value, callback) {
      const { min, max } = this.form.values;
      if (min > max) {
        callback(new Error(""));
        return;
      }
      callback();
    }
  }
}

多行多交互框

这种交互是上一个的升级版，放在这里单独拿出来，是为了突出一下 validator 传参。基于validator传参可以更 优雅 的实现复用

// template
<el-form-item
  label="区间1"
  :rules="[{ validator: numValidator.bind(this, {
    text: '区间1'
  }), trigger: ['blur', 'change'] }]">
  <el-input-number
    v-model="form.values1.min" /> ~
  <el-input-number
    v-model="form.values1.max" />
</el-form-item>
<el-form-item
  label="区间2"
  :rules="[{ validator: numValidator.bind(this, {
    text: '区间2'
  }),, trigger: ['blur', 'change'] }]">
  <el-input-number
    v-model="form.values2.min" /> ~
  <el-input-number
    v-model="form.values2.max" />
</el-form-item>

// script
{
  data() {
    return {
      form: {
        values1: {
          min: 0,
          max: 10
        },
        values2: {
          min: 0,
          max: 10
        }
      }
    }
  },
  methods: {
    numValidator({text}, rule, value, callback) {
      const { min, max } = this.form.values;
      if (min > max) {
        callback(new Error(`${text}开始限制不能大于结束限制`));
        return;
      }
      callback();
    }
  }
}

循环嵌套表单

这种也很常见，表单的数量不定，表单下的交互项数量也不定

// script
forms: [
  {
    name: '',
    children: [
      {
        key1: '',
        key2: ''
      },
      {
        key1: '',
        key2: ''
      },
    ]
  },
  {
    name: '',
    children: [
      {
        key1: '',
        key2: ''
      }
    ]
  },
]

// template
<template v-for="form in forms">
  <el-form
    :model="form">
    <el-form-item 
      label="名称"
      prop="name">
      <el-input v-model="form.name" />  
    </el-form-item>
    <template v-for="(item, idx) in form.children">
      <el-form-item 
        :label="'字段1_' + (idx + 1)"
        :prop="'form.children.' + idx + '.key1'"
        :rules="[{ required: true, message: '字段不能为空', trigger: ['change', 'blur'] }]">
        <el-input v-model="item.key1" />  
      </el-form-item>
      <el-form-item 
        :label="'字段2_' + (idx + 1)"
        :prop="'form.children.' + idx + '.key2'"
        :rules="[{ required: true, message: '字段不能为空', trigger: ['change', 'blur'] }]">
        <el-input v-model="item.key2" />  
      </el-form-item>
    </template>
  </el-form>

</template>