element表单校验的几种方式(精品)

1 element表单校验

1 普通校验写法

这都不懂的去看官方文档

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

element表单校验的几种方式(精品)_第1张图片
循环el-form-item的时候注意prop,和rules书写方式,rules绑定的是data内的rules.link,注意路径要写全

element表单校验的几种方式(精品)_第2张图片
每一个input都是复用link校验方法,并单独校验
element表单校验的几种方式(精品)_第3张图片

2.1二级循环写法

element表单校验的几种方式(精品)_第4张图片

3嵌套写法


这种一行多个input的,应该怎么写,相比有很多人遇到多,还要能成对校验
element表单校验的几种方式(精品)_第5张图片
注意看外层el-form-item不写prop,黄色框内的prop单独写,这两是不一样的
element表单校验的几种方式(精品)_第6张图片
想要联动校验,注意看红框内是使用this.formData.minPrice去与当前方法的value做比较的

4传值校验

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

直接在el-form-item内绑定rules参数,校验规则选择自定义validator,值为一个写在methods生命周期内的valid方法,并且把参数传递过去
element表单校验的几种方式(精品)_第7张图片
在methods生命周期内的valid方法内返回一个箭头函数,箭头函数内写入你想要的验证规则,这样就能接收到自定义参数了。

小技巧

element表单校验的几种方式(精品)_第8张图片
trigger事件可以写多个哦

你可能感兴趣的:(前端,javascript,vue,vue,js,javascript,前端)