其实，如果不是因为老项目依赖jQuery，而新项目在某些地方又需要和老项目保持一致，有谁会喜欢在Vue的世界里使用jQuery呢？因为数据驱动和事件驱动，真的是两种不同的思想，我就见过因为监听不到某个事件而花费一整天时间的人……所以，这里使用jQuery的表单验证插件jQuery Validation，目的只有一个，即实现博主对自己的承诺，做一个和老项目一模一样的表单验证。官方这个示例最大的问题是，它的检验逻辑扩展性比较差，后端同学对这个应该有所体会啦，譬如实际业务中常常有邮箱、手机号、非空、数字、正则等等的验证规则，而后端常常采用基于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(this.validators); } });
对于当前表单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 --save npm install vue-i18n
注意到这里指定了版本号，这是因为最新的3.x超出了我这个新人的接受范围，一句话，太难了！接下来，我们在入口文件main.js中添加下面的代码，目的是启用这两个插件：
import VueI18n from 'vue-i18n'; import VeeValidate from 'vee-validate'; import zh_CN from 'vee-validate/dist/locale/zh_CN' //启用Vue国际化插件 Vue.use(VueI18n) //配置VeeValidate const i18n = new VueI18n({ locale: 'zh_CN', }) Vue.use(VeeValidate, { i18n, i18nRootKey: 'validation', dictionary: { zh_CN } });
接下来，编写一个单文件组件LoginForm.vue: