vue 项目遇到要表单验证了吧, 对我来说表单验证是个很纠 (dan) 结(teng)的内容, 各种判断凌乱到飞起. 往常使用 jquery 的 validate 插件做表单验证方便吧, 你也可以在 Vue 里引入 jquery 的 validate 插件(如何引入 jquery 在我上一篇博文有介绍, 点击查看). 但是我们是做 vue 项目也, 不到实在解决不了还是建议不要引入, 因为 Vue 自己就有表单验证的插件, 那就是 vee-validate.
我在这并不是详细讲解 vee-validate 的使用功能, 只是快速了解如何在项目里使用 vee-validate, 做项目时哪有那么多时间让你去熟悉一个插件, 肯定先搞定了再说, 具体熟悉掌握了解请自行查阅相关资料.
1.npm 安装 vee-validate:
npm install vee-validate --save --registry=https://registry.npm.taobao.org --verbose
2. 安装成功后在 main.js 中引入:
3. 在你要进行表单验证的 input 标签加入相关的代码:
注意:
(1)errors 打印出来是这样的:
{ "item": [ { "id": "_9e6hk2qh2", "field": "email", "msg": "email 是必须的", "rule": "email", "scope": null } ] }
,span 标签通过 errors 的几个方法来进行显示隐藏和提示错误, 这里列出几个常用的 errors 方法: errors.first('field'): 当前 field 的第一个错误信息, 字符串 errors.collect('field'): 当前 field 的所有错误信息, 数组列表 errors.has('field'): 当前 filed 是否有错误, 布尔值 errors.all(): 当前表单所有错误, 数组列表 errors.any(): 当前表单是否有任何错误, 布尔值
- (2)
- v-validate="'required | email'"
有两个验证, 一个是为空验证, 一个是输入错误验证, 你想要多少种验证就在这里写. 比如你要限制字数, 那就加多个 max, 即 v-validate="'required | email | max:9'".
(3)name 属性一定要写, span 标签是展示错误提示的. 其实此时已经基本完成表单验证了, 只是出现的提示是插件提供的默认提示, 比如 email 的错误提示如下图所示, 这肯定不是我们想要的, 我们需要定义一下.
4. 定义成我们需要的文字提示:
效果如下:
其中 field 获取的是 attributes 中的 email 的 value 值, 也就是'邮箱'.vee-validate 提供了一些规则, 具体可以去 vee-validate 官网 http://vee-validate.logaretm.com/index.html 查看.
5. 接下来是重点: 自定义规则. 以下是自定义身份证号验证的 demo:
效果如下:
如果需求里不需要多一个提示的标签, 只需要在错误验证时显示警示颜色, 那可以通过在 input 标签上写:
class="{error:error.has('idCard')}"
来实现. 至此已经可以满足基本的验证需求了, 更多的 vee-validate 插件功能会在往后更新完善, 希望对大家有帮助.
总结
以上所述是小编给大家介绍的 Vue 中使用 vee-validate 表单验证的方法, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/139780.htm