vue表单验证rules及validator验证器的使用方法实例_vue.js_

前言

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

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

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

表单验证rules

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

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

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

required:true表示为必须输入；

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

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

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

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

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

设置校验规则后，表头会出现红色*样式

该示例完整代码：

-立即创建重置

自定义校验规则

除此之外，我们还可以使用validator验证器来自定义校验规则，

举一个使用自定义验证规则来完成密码的二次验证的例子。

还是和之前一样，设置prop需校验的字段名和v-model绑定值

 但这时，我们需要在data中自己定义校验规则，需要注意的是，设置的规则与return同级。

 在rules中配置要校验的字段和用到的规则

完整代码如下：

提交重置

总结

到此这篇关于vue表单验证rules及validator验证器使用的文章就介绍到这了,更多相关vue表单验证器使用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！