Element UI Form表单验证

Form组件提供表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。

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

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

表明要使用验证器的类型，类似于数据格式校验，使用这个，可以对一些特定的字段进行校验，不用像之前那样写正则了。

可识别的类型值有：

必填字段，即非空验证。

正则表达式，如果需要验证手机号码之类的，可以直接编写正则表达式配置道校验规则中，就不需要自己去校验了。

判断数据大小范围，通常对数字大小范围做校验。对于字符串和数组类型，将根据长度进行比较。

长度验证

枚举值验证

验证是否只有空格（如果没有该配置，则全空格的输入也是有效的）

有时有必要在验证之前转换值，以强制或以某种方式对其进行清理。为此transform，向验证规则添加一个功能。在验证之前，先转换属性，然后将其重新分配给原对象，以更改该属性的值。

如上，只有输入1、2、3的时候才能校验通过。

貌似这个只能辅助校验，并不能改变组件绑定变量本身的值。

深层规则，可以通过将嵌套规则分配给规则的属性来验证object或array类型的验证规则，

```

<div v-for="(item, index) intemp.templateValue" :key="index">

  <el-form-item v-if="0===index" :label="$t('模板内容值')" :prop="item" :rules="{required: true,message: `${item}不能为空`,trigger: 'blur'}" required>

    <el-input v-model="temp[item]" :placeholder = "`请输入${item}内容`" type="text" style="width: 300pxdisplay: block"/>

  <el-form-item v-else :prop="item" :rules="{required: true,message: `${item}内容不能为空`,trigger: 'blur'}" required>

    <el-input v-model="temp[item]" :placeholder = "`请输入${item}内容`" :rules="{required: true,message: `${item}不能为空`,trigger: 'blur'}" type="text" style="width: 300pxdisplay: block"/>

</div>

```

1 element表单校验

1 普通校验写法

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

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

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

3嵌套写法

这种一行多个input的，应该怎么写，相比有很多人遇到多，还要能成对校验

4传值校验

有些时候表单内的input是循环出来了的，他的校验规则需要拿到当前循环内的某个值来做比较，大家都知道element官方的校验方法是不支持自定义传参的，那么怎样才能解决这个问题

直接在el-form-item内绑定rules参数，校验规则选择自定义validator，值为一个写在methods生命周期内的valid方法，并且把参数传递过去

在methods生命周期内的valid方法内返回一个箭头函数，箭头函数内写入你想要的验证规则，这样就能接收到自定义参数了。

---