面试官：复杂表单校验，你还没掌握？

1 element表单校验

1 普通校验写法

这都不懂的去看官方文档

2.循环el-form-item校验写法

循环el-form-item的时候注意prop，和rules书写方式,rules绑定的是data内的rules.link，注意路径要写全

每一个input都是复用link校验方法，并单独校验

2.1二级循环写法

3嵌套写法

这种一行多个input的，应该怎么写，想必有很多人遇到多，还要能成对校验 注意看外层el-form-item不写prop，黄色框内的prop单独写，这两是不一样的 想要联动校验，注意看红框内是使用this.formData.minPrice去与当前方法的value做比较的

4传值校验

有些时候表单内的input是循环出来了的，他的校验规则需要拿到当前循环内的某个值来做比较，大家都知道element官方的校验方法是不支持自定义传参的，那么怎样才能解决这个问题 直接在el-form-item内绑定rules参数，校验规则选择自定义validator，值为一个写在methods内的valid方法，并且把参数传递过去 在methods内的valid方法内返回一个箭头函数，箭头函数内写入你想要的验证规则，这样就能接收到自定义参数了。

5循环表单校验

业务中可能会遇到需要，校验这样的数组对象[{},{},{}],数组中每一个对象内的键值都需要编辑和校验，那么就需要循环生成表单，并且单独校验每一个表单的内容。

这里需要注意的是，el-form标签上的ref的绑定

代码中可能还会遇见el-item二级循环校验，需注意prop的绑定方式

<el-collapse-item :title="item.name" :name="index" v-for="(item, index) in edit" :key="index">
  <el-form
    :model="item"
    label-width="220px"
    size="small"
    class="price-form"
    :rules="rules"
    :ref="'otherInfo'+index"
  >
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="xxxx" prop="title">
          <el-input v-model="item.title"
                    type="text"
                    size="mini"
                    clearable
                    placeholder="xxxx"
                    style="width: calc(98% - 150px);min-width: 200px;"
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" v-for="(it,j) in item.attributions" :key="it.id">
        <el-form-item :label="it.attribute_key" :prop="'attributions.'+ j +'.attribute_value'"
                      :rules="[{required: true, validator: attBasicInforules(), trigger: 'blur' }]"
        >
          <el-input clearable v-model="it.attribute_value"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</el-collapse-item>

<script>
attBasicInforules() {
      // 属性验证规则（非空）
      return (rule, value, callback) => {
        if (!value) {
          return callback(new Error('该属性不能为空'))
        }
        callback()
      }
    }

const other = () => {
          const list = []
          this.edit.forEach((item, key) => {
            list.push(new Promise((resolve, reject) => {
              this.$refs['otherInfo' + key][0].validate(valid => {
                console.log(valid)
                if (valid) {
                  resolve()
                } else {
                  reject(`区域有错误，请查证第${key}个表单`)
                }
              })
            }))
          })
          return list
        }
        await Promise.all([categoryChange, ...(other())]).then(res => {
        }).catch(err => {
          this.$message.warning(err)
        })
</script>

小技巧

trigger事件可以写多个哦

验证规则rules的详细用法

rules中单个表单域校验规则可以包含多个数组，每个数组即是一条校验规则：

rules: {
          title: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          box: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          box1: [
            { type: 'date', required: true, message: '请选择', trigger: 'change' }
          ],
          box2: [
            { type: 'date', required: true, message: '请选择', trigger: 'change' }
          ]
        }

验证器的类型

数组中的单个检验规则对象中包含required/message/trigger/min/max等参数

表明要使用验证器的类型，类似数据格式检验，使用这个，我们就可以对一些特定的字段进行校验，而不用再像以前一样写正则，做判断。

比如只需要配置 type:'url' 的规则就可以验证url了，验证器都已经封装好了这些功能，你只需调用就可以了

string: 字符串类型（默认值）
number: 数字类型
boolean:布尔类型
method: 函数类型
regexp:正则表达式
integer: 整型
float: 双精度浮点型数字
array: 数组类型
object: 对象类型
enum: 枚举值
date: 日期格式
url: 网址格式
hex: 16进制数字
email: 电子邮箱格式
any: 任意类型

email = [{
    type: "string",
    required: true,
    message: '请输入邮箱地址',
    trigger: 'blur'
  },
  {
    type: 'email',
    message: '请输入正确的邮箱地址',
    trigger: ['blur', 'change']
  }
]

required：必填校验
pattern ：正则表达式 { type : "string" , required: true , pattern : /^[a-z]+$/ }
min/max：：最大最小值
len：长度验证
enum：枚举验证
whitespace：验证是否只有空格(如果没有该配置，则全空格的输入值也是有效的）

官方文档中的介绍太过粗略，更详细校验规则参见async-validator