1.安装
cnpm install vee-validate --save
2.在assets文件夹下创建一个validate.js文件
'use strict';
import Vue from 'vue'
import VeeValidate, {Validator} from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN';//引入中文文件
// 配置中文
Validator.addLocale(zh);
const config = {
locale: 'zh_CN'
};
Vue.use(VeeValidate,config);
// 自定义validate
const dictionary = {
zh_CN: {
messages: {
email: () => '请输入正确的邮箱格式',
required: ( field )=> "请输入" + field
},
attributes:{
email:'邮箱',
password:'密码',
name: '账号',
phone: '手机'
}
}
};
Validator.updateDictionary(dictionary);
//扩展自定义的验证,比如这边自定义了电话的表单验证。
Validator.extend('phone', {
messages: {
zh_CN:field => field + '必须是11位手机号码',
},
validate: value => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
});
3.在main.js中引入这个js文件
import "./assets/validata.js"
4.使用
在 HelloWord.vue文件中写入一下测试代码
<p>
<input v-validate="'required|email'" name="email" type="text" placeholder="Email">
<span v-show="errors.has('email')" >{{ errors.first("email") }}</span>
</p>
<p>
<input v-validate="'required|phone'" name="phone" type="text" placeholder="phone">
<span v-show="errors.has('phone')" >{{ errors.first("phone") }}</span>
</p>
5.运行
npm run dev
网友评论