2023年6月21日发(作者：)

Vue中使⽤vee-validate表单验证的⽅法Vue项⽬遇到要表单验证了吧，对我来说表单验证是个很纠(dan)结(teng)的内容，各种判断凌乱到飞起。往常使⽤jquery的validate插件做表单验证⽅便吧，你也可以在Vue⾥引⼊jquery的validate插件(如何引⼊jquery在我上⼀篇博⽂有介绍，)。但是我们是做vue项⽬也，不到实在解决不了还是建议不要引⼊，因为Vue⾃⼰就有表单验证的插件，那就是vee-validate。我在这并不是详细讲解vee-validate的使⽤功能，只是快速了解如何在项⽬⾥使⽤vee-validate，做项⽬时哪有那么多时间让你去熟悉⼀个插件，肯定先搞定了再说，具体熟悉掌握了解请⾃⾏查阅相关资料。2.安装成功后在中引⼊：3.在你要进⾏表单验证的input标签加⼊相关的代码：注意：(1)errors打印出来是这样的：{ "item": [ { "id": "_9e6hk2qh2", "field": "email", "msg": "email 是必须的", "rule": "email", "scope": null } ] }，span标签通过errors的⼏个⽅法来进⾏显⽰隐藏和提⽰错误，这⾥列出⼏个常⽤的errors⽅法： ('field')：当前field的第⼀个错误信息，字符串 t('field')：当前field的所有错误信息，数组列表 ('field')：当前filed是否有错误，布尔值 ()：当前表单所有错误，数组列表 ()：当前表单是否有任何错误，布尔值(2)v-validate="'required | email'"有两个验证，⼀个是为空验证，⼀个是输⼊错误验证，你想要多少种验证就在这⾥写。⽐如你要限制字数，那就加多个max，即v-validate="'required | email | max:9'"。(3)name属性⼀定要写，span标签是展⽰错误提⽰的。其实此时已经基本完成表单验证了，只是出现的提⽰是插件提供的默认提⽰，⽐如email的错误提⽰如下图所⽰，这肯定不是我们想要的，我们需要定义⼀下。4.定义成我们需要的⽂字提⽰：效果如下：其中field获取的是attributes中的email的value值，也就是'邮箱'。vee-validate提供了⼀些规则，具体可以去查看。 5.接下来是重点：⾃定义规则。以下是⾃定义⾝份证号验证的demo：效果如下：如果需求⾥不需要多⼀个提⽰的标签，只需要在错误验证时显⽰警⽰颜⾊，那可以通过在input标签上写:class="{error:('idCard')}"来实现。⾄此已经可以满⾜基本的验证需求了，更多的vee-validate插件功能会在往后更新完善，希望对⼤家有帮助。总结以上所述是⼩编给⼤家介绍的Vue中使⽤vee-validate表单验证的⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

2023年6月21日发(作者：)

Vue中使⽤vee-validate表单验证的⽅法Vue项⽬遇到要表单验证了吧，对我来说表单验证是个很纠(dan)结(teng)的内容，各种判断凌乱到飞起。往常使⽤jquery的validate插件做表单验证⽅便吧，你也可以在Vue⾥引⼊jquery的validate插件(如何引⼊jquery在我上⼀篇博⽂有介绍，)。但是我们是做vue项⽬也，不到实在解决不了还是建议不要引⼊，因为Vue⾃⼰就有表单验证的插件，那就是vee-validate。我在这并不是详细讲解vee-validate的使⽤功能，只是快速了解如何在项⽬⾥使⽤vee-validate，做项⽬时哪有那么多时间让你去熟悉⼀个插件，肯定先搞定了再说，具体熟悉掌握了解请⾃⾏查阅相关资料。2.安装成功后在中引⼊：3.在你要进⾏表单验证的input标签加⼊相关的代码：注意：(1)errors打印出来是这样的：{ "item": [ { "id": "_9e6hk2qh2", "field": "email", "msg": "email 是必须的", "rule": "email", "scope": null } ] }，span标签通过errors的⼏个⽅法来进⾏显⽰隐藏和提⽰错误，这⾥列出⼏个常⽤的errors⽅法： ('field')：当前field的第⼀个错误信息，字符串 t('field')：当前field的所有错误信息，数组列表 ('field')：当前filed是否有错误，布尔值 ()：当前表单所有错误，数组列表 ()：当前表单是否有任何错误，布尔值(2)v-validate="'required | email'"有两个验证，⼀个是为空验证，⼀个是输⼊错误验证，你想要多少种验证就在这⾥写。⽐如你要限制字数，那就加多个max，即v-validate="'required | email | max:9'"。(3)name属性⼀定要写，span标签是展⽰错误提⽰的。其实此时已经基本完成表单验证了，只是出现的提⽰是插件提供的默认提⽰，⽐如email的错误提⽰如下图所⽰，这肯定不是我们想要的，我们需要定义⼀下。4.定义成我们需要的⽂字提⽰：效果如下：其中field获取的是attributes中的email的value值，也就是'邮箱'。vee-validate提供了⼀些规则，具体可以去查看。 5.接下来是重点：⾃定义规则。以下是⾃定义⾝份证号验证的demo：效果如下：如果需求⾥不需要多⼀个提⽰的标签，只需要在错误验证时显⽰警⽰颜⾊，那可以通过在input标签上写:class="{error:('idCard')}"来实现。⾄此已经可以满⾜基本的验证需求了，更多的vee-validate插件功能会在往后更新完善，希望对⼤家有帮助。总结以上所述是⼩编给⼤家介绍的Vue中使⽤vee-validate表单验证的⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！