首页 > 其他 > 详细

vue表单验证,vee-Validate

时间:2018-08-31 16:24:09      阅读:322      评论:0      收藏:0      [点我收藏+]

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

原文:https://www.cnblogs.com/eva67/p/9566277.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!