如何实例化使用Vue表单验证的rules和validator验证器？

本文共计1489个文字，预计阅读时间需要6分钟。

目录+前言+表单验证rules+自定义校验规则+总结+前言+为防止用户犯错，尽可能尽早地发现并纠正错误。Element中Form组件（表单）提供了表单验证功能，只需通过rules属性传入约定好的校验规则即可实现。

目录

• 前言
• 表单验证rules
• 自定义校验规则
• 总结

前言

为防止用户犯错，尽可能更早地发现并纠正错误。

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

注意：prop对应表单域 model 字段，使用 validate方法时，该属性是必填的。

表单验证rules

以官网给出的例子分析来看

将prop属性设置为需校验的字段名。

在data里配置要校验字段和校验规则：

required:true表示为必须输入；

message:""设置不符合校验规则时的提示信息；

trigger:""设置校验的触发方式：

‘change’:数据改变时触发；

‘blur’:失去焦点时触发；

没有进行任何输入时,不会触发change,但一定会触发blur事件。