Vue快速实现通用表单验证的方法

通常情况下，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请求，这里面的确是有非常多的细节支撑的。第一种方案不支持远程校验，这更加能说明校验本身要考虑的不单单只有前端了，同理，有了前端的校验，不代表后端可以不做校验。前端时间有人在知乎上提问，大意是说前端该不该完全信任后端返回的数据，严格来说，我们不应该信任任何人提供的数据，而这就是校验这件事情本身的意义。