element表单校验的几种方式（精品）

1 element表单校验

1 普通校验写法

这都不懂的去看官方文档

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

image

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

image

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

3嵌套写法

image

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

注意看外层el-form-item不写prop，黄色框内的prop单独写，这两是不一样的
image

想要联动校验，注意看红框内是使用this.formData.minPrice去与当前方法的value做比较的

4传值校验

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

image

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

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

小技巧

image

trigger事件可以写多个哦

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容