怎么在Vue中实现表单验证

本篇文章给大家分享的是有关怎么在Vue中实现表单验证，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

<div>
 <h3>你好，请登录</h3>
 <div>
  <form id="loginFrom">
   <div>
    <label>邮箱</label>
    <input type="text" class="form-control" id="inputEmail3" placeholder="Email" v-model="email">
    </div>
   </div>
   <div>
    <label>密码</label>
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password" v-model="password">
   </div>
   <div>
    <button type="button" class="btn btn-default login" v-on:click="login()">登录</button>
   </div>
   <div v-if="errorList.length > 0">
    <div class="alert alert-danger" role="alert">{{errorList.join(';')}}</div>
   </div>
  </form>
 </div>
</div>
<script>
var vm = new Vue({
 el: '#loginFrom',
 data: {
  email: "",
  password: "",
  errorList: []
 },
 methods: {
  validate: function () {
   this.errorList = []
   if (this.email == '') {
    this.errorList.push('请输入邮箱');
   } else {
    var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if (!reg.test(this.email)) {
     this.errorList.push('请输入有效的邮箱');
    }
   }
   if (this.password == '') {
    this.errorList.push('请输入密码');
   } else {
    if (this.password.length < 6) {
     this.errorList.push('密码长度不得少于6位');
    }
   }

   return this.errorList.length <= 0;
  },
  login: function () {
   if (this.validate()) {
    alert('登录成功');
   }
  }
 }
});
</script>

为了排除无关内容对大家的影响，写这个例子的时候，博主排除了一切复杂的HTML结构和CSS样式，经过简单润色以后，这个例子的效果展示如下，果然GUI满足了人们颜控的一面，可让这个世界高速运行的是CLI，Bootstrap是博主这种“全栈工程师”的最爱之一。这种验证方式简直是人类本能的反应，可这恰好是最糟糕的一个例子，因为这个代码完全没法复用，可以想象得到，如果再继续增加针对密码强度，譬如大小写、数字等等的验证，这个代码会混乱成什么样子，所以，这是最简单的表单验证，同样是最糟糕的表单验证。

基于jQuery的表单验证

其实，如果不是因为老项目依赖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:

<!-- template of LoginForm -->
<template>
 <div class="container">
 <h3 class="text-center">你好，请登录</h3>
 <div class="row">
  <form class="form-horizontal col-md-offset-4 col-md-4" id="loginFrom">
  <div class="form-group">
   <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
   <div class="col-sm-10">
   <input type="text" class="form-control" id="email" name="email" placeholder="Email" v-model="email" v-validate="'required|email'" data-vv-as="邮箱"/>
   <p class="alert alert-danger" role="alert" v-show="errors.has('email')">{{ errors.first('email') }}</p>
   </div>
  </div>
  <div class="form-group" name="password" rules="required">
   <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
   <div class="col-sm-10">
   <input type="password" class="form-control" id="password" name="password" placeholder="Password" v-model="password" v-validate="'required|min:6'" data-vv-as="密码"/>
   <p class="alert alert-danger" role="alert" v-show="errors.has('password')">{{ errors.first('password') }}</p>
   </div>
  </div>
  <div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
   <div class="checkbox">
    <label>
    <input type="checkbox" />记住密码
    </label>
   </div>
   </div>
  </div>
  <div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
   <button type="button" class="btn btn-default login" v-on:click="login()">登录</button>
   </div>
  </div>
  </form>
 </div>
 </div>
</template>
<!-- script of LoginForm -->
<script>
export default {
 name: "LoginForm",
 components: {},
 data: () => ({
 email: "",
 password: ""
 }),
 methods: {
 login: function() {

 }
 }
};
</script>
<!-- style of LoginForm -->
<style scoped>
.login {
 color: white;
 height: 38px;
 width: 300px;
 background-color: #2b669a;
}
</style>

可以看到，我们在关键的两个input控件上添加了v-validate和data-vv-as这两个属性。比如我们这里需要验证用户输入的邮箱是否合法、邮箱是否为空，那么我们就可以使用下面的语法：

<input type="text" class="form-control" id="email" name="email" placeholder="Email" v-model="email" v-validate="'required|email'" data-vv-as="邮箱"/>
<p class="alert alert-danger" role="alert" v-show="errors.has('email')">{{ errors.first('email') }}</p>

这些语法在Vue中被称为指令，而data-vv-as则是HTML5中的一个特性，用来给提示信息中的字段起一个别名。实际上，这个插件里同样内置了一批常见的校验规则。当控件中的值不满足校验条件时，就会在errors中产生错误信息，所以，我们根据错误信息中是否包含指定字段来决定要不要展示错误信息，这就是这个插件的作用。运行这个例子，我们会得到下面的结果。

既然提到这类表单验证最难的地方在于扩展性，那么下面我们再来看看如何扩展一个新的校验规则，这里以最常见的手机号校验为例, 个人以为这是这个插件最为强大的地方：

Validator.extend('isMobile', {
 messages: {
 zh_CN: field => field + '必须是11位手机号码'
 },
 validate: value => {
 return value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
 }
})

以上就是怎么在Vue中实现表单验证，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。