基于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">
<h2 class="text-center">你好，请登录</h2>
<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>
