vue表单验证,vee-Validate

Posted 2021-01-03 eva67

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) } }

);