标签：strong err ict 手机 ring npm test messages val
1.下载安装
npm install vee-validate --save
2.main.js 添加
//vue表单验证插件
import VeeValidate,{Validator} from ‘vee-Validate‘;
//没有配置过的错误提示默认使用英文显示的，
//如果想要用中文显示需要我们手动配置一下
import zh from ‘vee-validate/dist/locale/zh_CN‘;
Validator.localize(‘zh‘, zh);
//blur 失去焦点时触发验证
Vue.use(VeeValidate,{ events: ‘blur‘ });
3.组件中使用
import { Validator } from "vee-Validate";
<input v-validate="‘required|max:4|min:2‘" data-vv-name="整改人姓名" type="text" name="zhenggai">
<span v-show="errors.has(‘整改人姓名‘)" class="help is-danger">{{ errors.first(‘整改人姓名‘) }}</span>
4.自定义规则，或者修改规则
//定义默认required的显示提示
created() {
const dictionary = {
zh: {
messages: {
required: field => "请输入" + field
}
}
};
Validator.localize(dictionary);
}
//定义自定义规则
Validator.extend(‘phone‘, {
messages: {
zh:field => field + ‘必须是11位手机号码‘,
},
validate: value => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) } }
);
vue表单验证,vee-Validate
标签：strong err ict 手机 ring npm test messages val
原文地址：https://www.cnblogs.com/eva67/p/9566277.html
