项目地址
写在前面
笔者在写项目时，使用了vue-cli构建工具，默认使用了vue-router，笔者在项目中也使用到了其他组件，element-ui、vuex、vee-validate。
vee-validate组件与其他组件使用时，可能会出现一个问题computed property fields already taken，我的第一篇文章讲到了，如果不巧你也遇到了，请移步 解决方案 。
为什么选择这个？
- 因为笔者PHP出身，
Laravel忠实粉丝。vee-validate的语法借鉴于laravel的validate组件。 - 比起vue-validate而言，它更加迷你、实用。（这个是在网上说的，笔者没有亲自去使用，列位看官可以亲自去实践）
让我们来进行实战吧
在这里，基本的使用笔者就不再说明，这里只是说几点，笔者在项目中使用的到的几点。
本地化实战
-
提示信息本地化
在没有进行本地化之前，你的提示信息是这样的：
image.png
在使用之后，你的效果是这样的:
aaa
可以看到，本地化的提示信息是多么舒服，这是在生产环境我们需要的提示信息。
其实在官方文档中，已经给我们提供了本地化的代码，如下所示：
// 加载vee-validate下面本地化文件zh_CN（中文提示信息），默认是加载en（英文提示信息）
import zh_CN from 'vee-validate/dist/locale/zh_CN';
import VeeValidate, { Validator } from 'vee-validate';
// 添加一个本地化文件
Validator.addLocale(zh_CN);
// 让Vue使用VeeValidate插件，并且使用本地化文件zh_CN
Vue.use(VeeValidate, {
locale: 'zh_CN'
});
这样做了，基本上就可以了。
- 属性本地化
在项目中，我们可能需要业务需要去定义字段，而这些字段可能是默认字段不存在的，比如beigin_time开始时间，而在本地化后，他不会自动解析为开始时间,那么它的报错信息就是这样的
begin_time 是必填选项
这样显然是不友好的，这就需要我们自己手动进行更改，如何更改呢？手册也给了我们相关demo。
import { Validator } from 'vee-validate';
const dictionary = {
zh_CN: {
attributes: {
begin_time: '开始时间'
}
},};
// 组件的字典进行更新
Validator.updateDictionary(dictionary);
在我们完成上面代码后，它的显示就是这样的:
开始时间 是必填选项
显然，这才是我们需要的。
自定义规则实战
在vee-validate组件中只有20多条验证规则，不过也好，太过臃肿会导致文件过大。那么这种情况下，我们很可能会自己写验证规则，来实现我们要的验证。幸运的是，官方手册也给我们提供了相关方法。以下是笔者写的一个demo：
# validate/dictionary.js
export const isMobile = {
messages: {
zh_CN: '手机 格式错误',
},
validate: (value, args) => {
return value.length === 11 && /^1[3-8]{1}\d{9}$/.test(value);
}
};
# main.js
import * as rules from './validate/rules';
Validator.extend('mobile', rules.isMobile);// 添加手机号验证规则
这时，我们就可以为在表单中进行验证了。
我的HTML文件是这样的
<div class="login-container">
<el-form autoComplete="on" v-model="loginForm" label-position="left" label-width="0px"
class="card-box login-form">
<el-form-item>
<el-input v-validate="'required|mobile'" v-model="loginForm.tel"
:class="{'input': true, 'is-danger': errorsBag.has('tel') }" name="tel" type="text"
placeholder="Account"></el-input>
<span v-show="errorsBag.has('tel')" class="el-form-item__error">{{ errorsBag.first('tel') }}</span>
</el-form-item>
<el-form-item>
<el-input v-validate="'required|min:6'" v-model="loginForm.password"
:class="{'input': true, 'is-danger': errorsBag.has('password') }" name="password" type="password"
placeholder="Password"></el-input>
<span v-show="errorsBag.has('password')" class="el-form-item__error">{{ errorsBag.first('password') }}</span>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;">
登录
</el-button>
</el-form-item>
</el-form>
</div>
