前后端分开后，表单校验如何破局？探讨数据驱动与事件驱动

 
你好，请登录
 

  
   

    邮箱
    
    
   
   

    密码
    
   
   

    登录
   
   
 0">
    
{{errorList.join(';')}}
   
  
 

现在聊聊数据驱动和事件驱动。你可能听说过某些人因为错过了一个事件，就浪费了整整一天的宝贵时间！这可真让人生气。所以，我来告诉你们一个好用的JavaScript表单验证插件：jQuery Validation。它的主要目的，就是实现博主给自己定下的任务——进行跟旧项目一模一样的表单验证。并且，用JavaScript定义验证规则正好符合Vue数据驱动的操作习惯哦!

别急，我还有好多有趣的玩意儿要告诉你！咱们能直接把基于jQuery的表单验证从之前那个例子里顺手拈来。你说，要是老项目用的jQuery，新项目还要保持以前的样子，那为啥不能继续用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);
 }
});

知乎上有人问前端要不要全信后端传回来的数据？当然不能，不核实数据会出大问题。其实，前后端这两种验证方式都挺重要的，不能忽视！别以为有历史包袱就没用。

别急！现在，让我给你们科普一下一个超棒的表单验证方法。在vue文档中，关于数据校验的那部分告诉我们有两个好用的插件：vuelidate和VeeValidate。而之前那篇博客的第一个例子就是用它们做的！不过这个过程最麻烦的就是怎么添加新规则。所以接下来，咱们就研究一下怎样添加上最常用的手机号校验！我觉得这功能真的超级实用啊!

老实说，做这个验证的工具或框架多得是。把它融入Vue里就像弄个插件，啥时候想扣你钱就在登录或填写信息时它帮你检查。所以看你们需要什么，选个适合的插件干活儿。我今儿就和大伙分享下如何搞定前后端分隔的表单验证。如果感兴趣，记得到评论区找我聊聊天！还有，别忘了赞一个，把文章转发给朋友们！谢谢大伙的支持

npm install vee-validate@2.0.0 --save
npm install vue-i18n

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
 }
});