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

Vue快速实现通⽤表单验证功能本⽂开篇第⼀句话，想引⽤鲁迅先⽣《祝福》⾥的⼀句话，那便是：“我真傻，真的，我单单知道后端整天都是CRUD，我没想到前端整天都是Form表单”。这句话要从哪⾥说起呢？⼤概要从最近半个⽉的“全栈⼯程师”说起。项⽬上需要做⼀个城市配载的功能，顾名思义，就是通过框选和拖拽的⽅式在地图上完成配载。博主选择了前后端分离的⽅式，在这个过程中发现：⾸先，只要有依赖jQuery的组件，譬如Kendoui，即使使⽤了Vue，依然需要通过jQuery去操作DOM。其次，只有有通过Rozar⽣成的DOM，譬如HtmlHelper，Vue的双向绑定就突然变得尴尬起来，更不⽤说，Rozar中的@语法和Vue中的@指令相互冲突的问题，原本可以直接⽤v-for⽣成列表，因为使⽤了HtmlHelper，突然⼀下⼦变得厌恶起来，虽然Rozar语法⾮常强⼤，可我依然没有在JavaScript⾥写C#的热情，因为实在太痛苦啦Orz……所以，想做好前后端分离，⾸先需要分离出⼀套前端组件库，做不到这⼀点，前后端分离就⽆从谈起，就像我们公司的项⽬，即使框架切换到.NET Core，可是在很长的⼀段时间⾥，我们其实还是再写MVC，因为所有的组件都是后端提供的HtmlHelper/TagHelper这种形式。我这次做项⽬的过程中，其实是通过jQuery实现了⼀部分组件，正因为如此，⼀个在前后端不分离时⾮常容易实现的功能，在前后端分离以后发现缺好多东西，就⽐如最简单的表单验证功能，即便你是在做⼀个新项⽬，为了保证产品在外观上的⼀致性，你还是得依赖⽼项⽬的东西，所以，这篇博客主要想说说前后端分离以后，Vue的时代怎么去做表单的验证。因为我不想测试同事再给我提Bug，问我为什么只有来⾃后端接⼝的验证，⽽没有来⾃前端页⾯的验证。我希望，在写下这篇博客之前，我可以实现和⽼项⽬⼀模⼀样的表单验证。如同CRUD之于后端，80%的前端都是在写Form表单，所以，这个事情还是挺有意思的。最简单的表单验证OK，作为国内最接“地⽓”的前端框架，Vue的⽂档可以说是相当地“亲民”啦！为什么这样说呢，因为其实在官⽅⽂档中，尤⼤已经提供了⼀个表单验证的⽰例，这个⽰例让我想起给某银⾏做⾃动化⼯具时的情景，因为这两者都是采⽤MVVM的思想，所以，理解起来是⾮常容易的，即：通过⼀个列表来存储错误信息，⽽这个错误信息会绑定到视图层，所以，验证的过程其实就是向这个列表⾥添加错误信息的过程。我们⼀起来看这个例⼦：

你好，请登录

为了排除⽆关内容对⼤家的影响，写这个例⼦的时候，博主排除了⼀切复杂的HTML结构和CSS样式，经过简单润⾊以后，这个例⼦的效果展⽰如下，果然GUI满⾜了⼈们颜控的⼀⾯，可让这个世界⾼速运⾏的是CLI，Bootstrap是博主这种“全栈⼯程师”的最爱之⼀。这种验证⽅式简直是⼈类本能的反应，可这恰好是最糟糕的⼀个例⼦，因为这个代码完全没法复⽤，可以想象得到，如果再继续增加针对密码强度，譬如⼤⼩写、数字等等的验证，这个代码会混乱成什么样⼦，所以，这是最简单的表单验证，同样是最糟糕的表单验证。基于jQuery的表单验证其实，如果不是因为⽼项⽬依赖jQuery，⽽新项⽬在某些地⽅⼜需要和⽼项⽬保持⼀致，有谁会喜欢在Vue的世界⾥使⽤jQuery呢？因为数据驱动和事件驱动，真的是两种不同的思想，我就见过因为监听不到某个事件⽽花费⼀整天时间的⼈……所以，这⾥使⽤jQuery的表单验证插件jQueryValidation，⽬的只有⼀个，即实现博主对⾃⼰的承诺，做⼀个和⽼项⽬⼀模⼀样的表单验证。官⽅这个⽰例最⼤的问题是，它的检验逻辑扩展性⽐较差，后端同学对这个应该有所体会啦，譬如实际业务中常常有邮箱、⼿机号、⾮空、数字、正则等等的验证规则，⽽后端常常采⽤基于Attribute的验证或者是FluentValidation这样的库，所以，核⼼问题是，能不能定义相应的验证规则。接下来，我们通过jQuery的表单验证插件来实现验证。通常情况下，jQuery Validation⽀持⾯向控件和⾯向代码两种验证⽅式。所谓⾯向控件，就是指在控件⾥添加类似required、email、range等等的扩展属性，jQuery Validation内置了⼗余种标准的验证规则，基本可以满⾜我们的⽇常使⽤。⽽⾯向代码，就是通过JavaScript来定义验证规则，这就⾮常符合Vue数据驱动的风格了，因为在JavaScript⾥⼀切皆是对象，⽽这些对象可以作为Vue中的数据来使⽤。⾃然⽽然地，在第⼀个⽰例的基础上，我们可以⾮常容易地扩展出基于jQuery的表单验证：var vm = new Vue({ el:'#loginFrom', data:{ email:"", password:"", validators:{ rules: { email: { required: true, email: true }, password: { required: true, minlength: 6, } }, messages:{ email:{ required:"请输⼊邮箱", email:"请输⼊有效的邮箱" }, password:{ required:"请输⼊密码", minlength:"密码长度不得少于6位" } } } }, mounted:function(){ $('#loginFrom').validate(tors); }});对于当前表单loginFrom，其验证规则为validators，它完全参照jQuery Validation的API⽂档⽽来，具体⼤家可以从jQuery Validation的⽂档来做进⼀步了解。这⾥唯⼀看起来不爽的就是#loginFrom，因为它和整个Vue看起来格格不⼊。不过，像博主⽬前项⽬的处境，如果⽼项⽬⾥使⽤jQuery来对表单进⾏验证，⽽使⽤Vue开发的新项⽬要兼容⽼项⽬的设计风格，使⽤jQuery有什么不可以呢？不得不说，Vue作为⼀个渐进式的开发框架，真正照顾了各个"年龄"段的前端⼯程师。使⽤jQuery Validation以后的表单验证效果如下：通过jQuery Validation，我们或许能感觉到⼀点不⼀样的地⽅，那就是表单验证其实还是蛮有意思的哈。也许是因为我原本是⼀个⽆聊的⼈，所以看到⼀点新的东西就觉得有趣。就像我虽然在提交数据时在后端做了校验，可牺牲的其实是整个前端的使⽤体验。⽽如果在前端对数据进⾏校验，是在输⼊过程中校验还是在输⼊完成校验，是通过表单⾃带的提交功能还是⾃⼰发起⼀个AJAX请求，这⾥⾯的确是有⾮常多的细节⽀撑的。第⼀种⽅案不⽀持远程校验，这更加能说明校验本⾝要考虑的不单单只有前端了，同理，有了前端的校验，不代表后端可以不做校验。前端时间有⼈在知乎上提问，⼤意是说前端该不该完全信任后端返回的数据，严格来说，我们不应该信任任何⼈提供的数据，⽽这就是校验这件事情本⾝的意义。基于Vue的表单验证OK，如果说前⾯的两种校验是因为我们有⼀点历史包袱，那么，接下来，我们将尝试采⽤更“现代化”的表单验证⽅式。通过Vue⽂档中关于数据校验这⼀节的内容，我们了解到官⽅推荐的两个表单验证插件是vuelidate和VeeValidate，⽽实际上这篇博客中的第⼀个例⼦，就是由⽂档中的例⼦演化⽽来。我个⼈⽐较喜欢后者，所以，下⾯我们将使⽤这个插件来完成第三个例⼦。⾸先 ，我们通过Vue-Cli创建⼀个Vue项⽬，然后安装下⾯vee-validate和vue-i18n两个插件：npm install vee-validate@2.0.0 --savenpm install vue-i18n注意到这⾥指定了版本号，这是因为最新的3.x超出了我这个新⼈的接受范围，⼀句话，太难了！接下来，我们在⼊⼝⽂件中添加下⾯的代码，⽬的是启⽤这两个插件：import VueI18n from 'vue-i18n';import VeeValidate from 'vee-validate';import zh_CN from 'vee-validate/dist/locale/zh_CN'//启⽤Vue国际化插件(VueI18n)//配置VeeValidateconst i18n = new VueI18n({ locale: 'zh_CN',})(VeeValidate, { i18n, i18nRootKey: 'validation', dictionary: { zh_CN }});接下来，编写⼀个单⽂件组件:可以看到，我们在关键的两个input控件上添加了v-validate和data-vv-as这两个属性。⽐如我们这⾥需要验证⽤户输⼊的邮箱是否合法、邮箱是否为空，那么我们就可以使⽤下⾯的语法：这些语法在Vue中被称为指令，⽽data-vv-as则是HTML5中的⼀个特性，⽤来给提⽰信息中的字段起⼀个别名。实际上，这个插件⾥同样内置了⼀批常见的校验规则。当控件中的值不满⾜校验条件时，就会在errors中产⽣错误信息，所以，我们根据错误信息中是否包含指定字段来决定要不要展⽰错误信息，这就是这个插件的作⽤。运⾏这个例⼦，我们会得到下⾯的结果。既然提到这类表单验证最难的地⽅在于扩展性，那么下⾯我们再来看看如何扩展⼀个新的校验规则，这⾥以最常见的⼿机号校验为例, 个⼈以为这是这个插件最为强⼤的地⽅：('isMobile', { messages: { zh_CN: field => field + '必须是11位⼿机号码' }, validate: value => { return === 11 && /^((13|14|15|17|18)[0-9]{1}d{8})$/.test(value) }})相信通过今天这篇博客，⼤家应该对Vue⾥的表单验证有⼀点⼼得了。这类验证的库或者框架其实⾮常多，整合到Vue中要做的⼯作⽆外乎写⼀个插件，在控件触发相关事件或者表单提交的时候进⾏验证。作为⼀个Vue的新⼈，这个过程可谓是路漫漫其修远。你⼤概想不到，我是在凌晨加班加到凌晨两点半的情况下做完这⼏个⽰例的，最近这两三个⽉⾥加的班⽐我过去三年都多，这到底是好事还是坏事呢？有时候不知道⾃⼰还能不能坚持下去，往事已矣，⼈难免会感到迷茫的吧！本⽂⼩结这篇博客主要通过三个⽰例分享了Vue下表单校验的实现，⽽促使博主对这⼀切进⾏研究的原始动⼒，则是源于⼀个实际⼯作中通过Vue开发的新项⽬。前后端要不要分离、项⽬⾥要不要继续使⽤jQuery、该不该频繁地操作DOM，这其实是毫⽆关联地三件事情，⽽这种事情90%的⼈是完全不关⼼的，就像有⼀种看起来相当“成年⼈”的做法，出了事情第⼀时间不是去纠结谁的过错，⽽是问能不能马上解决以及解决问题需要多长时间。这看起来好像⼀点问题都没有，可不去在意事件本⾝对错的⼈，是因为这些问题不需要他去处理，利益相关和责任相关是完全不⼀样的，因为你不能⼀出问题全部都找到程序员这⾥，这项⽬⼜不是程序员⼀个⼈的。我关⼼这些⽆关紧要的问题，纯粹是因为我对⾃⼰做的东西有⼀种感情，我想做好它⽽已，我希望⾃⼰是个纯粹的⼈，⽽且可以⼀直纯粹下去，晚安！以上所述是⼩编给⼤家介绍的Vue快速实现通⽤表单验证功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

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

Vue快速实现通⽤表单验证功能本⽂开篇第⼀句话，想引⽤鲁迅先⽣《祝福》⾥的⼀句话，那便是：“我真傻，真的，我单单知道后端整天都是CRUD，我没想到前端整天都是Form表单”。这句话要从哪⾥说起呢？⼤概要从最近半个⽉的“全栈⼯程师”说起。项⽬上需要做⼀个城市配载的功能，顾名思义，就是通过框选和拖拽的⽅式在地图上完成配载。博主选择了前后端分离的⽅式，在这个过程中发现：⾸先，只要有依赖jQuery的组件，譬如Kendoui，即使使⽤了Vue，依然需要通过jQuery去操作DOM。其次，只有有通过Rozar⽣成的DOM，譬如HtmlHelper，Vue的双向绑定就突然变得尴尬起来，更不⽤说，Rozar中的@语法和Vue中的@指令相互冲突的问题，原本可以直接⽤v-for⽣成列表，因为使⽤了HtmlHelper，突然⼀下⼦变得厌恶起来，虽然Rozar语法⾮常强⼤，可我依然没有在JavaScript⾥写C#的热情，因为实在太痛苦啦Orz……所以，想做好前后端分离，⾸先需要分离出⼀套前端组件库，做不到这⼀点，前后端分离就⽆从谈起，就像我们公司的项⽬，即使框架切换到.NET Core，可是在很长的⼀段时间⾥，我们其实还是再写MVC，因为所有的组件都是后端提供的HtmlHelper/TagHelper这种形式。我这次做项⽬的过程中，其实是通过jQuery实现了⼀部分组件，正因为如此，⼀个在前后端不分离时⾮常容易实现的功能，在前后端分离以后发现缺好多东西，就⽐如最简单的表单验证功能，即便你是在做⼀个新项⽬，为了保证产品在外观上的⼀致性，你还是得依赖⽼项⽬的东西，所以，这篇博客主要想说说前后端分离以后，Vue的时代怎么去做表单的验证。因为我不想测试同事再给我提Bug，问我为什么只有来⾃后端接⼝的验证，⽽没有来⾃前端页⾯的验证。我希望，在写下这篇博客之前，我可以实现和⽼项⽬⼀模⼀样的表单验证。如同CRUD之于后端，80%的前端都是在写Form表单，所以，这个事情还是挺有意思的。最简单的表单验证OK，作为国内最接“地⽓”的前端框架，Vue的⽂档可以说是相当地“亲民”啦！为什么这样说呢，因为其实在官⽅⽂档中，尤⼤已经提供了⼀个表单验证的⽰例，这个⽰例让我想起给某银⾏做⾃动化⼯具时的情景，因为这两者都是采⽤MVVM的思想，所以，理解起来是⾮常容易的，即：通过⼀个列表来存储错误信息，⽽这个错误信息会绑定到视图层，所以，验证的过程其实就是向这个列表⾥添加错误信息的过程。我们⼀起来看这个例⼦：

你好，请登录