vee-validate的使用

给你一囗甜甜゛ 提交于 2020-01-26 19:37:40

官网地址:http://vee-validate.logaretm.com/

这是一个插件Vue.js可以验证输入字段,显示错误,在一个简单而强大的方法。
学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则。


下面来简单总结一下使用方法:
一、安装

npm install vee-validate@next --save

后面加@next是为了安装vue2.0的版本


二、引入
使用的是vue-cli脚手架工具,需要在main.js中

import VeeValidate from 'vee-validate'
Vue.use(VeeValidate);

 

三、简单的使用
这个时候其实已经可以使用了,先上demo

<div>
  <label for="email">邮箱:</label>
  <input v-validate ="'required|email'" type="text" id="email" name="myEmail">
</div>
<span v-show="errors.has('myEmail')">{{ errors.first('myEmail')}}</span>

解释一下:v-validate后面的required和email是官方已经规定好的几种默认错误类型中的两个,这个可以阅读官方文档。
span中用到了errors的几个方法,这里的参数都是定义了验证规则的表单的name。列举几个errors的方法:

  • first(‘field’)

field中(也就是刚刚说过的name表单)中的第一个错误

  • collect(‘field’)

field中所有的错误

  • has(‘field’)

field中是否有错误

  • all()

当前表单中的所有错误

  • any()

当前表单中是否有错误

  • count()

当前表单中的错误数量

  • clear()

清除当前表单中的所有错误


四、使用中文错误提示
没有配置过的错误提示默认使用英文显示的,如果想要用中文显示需要我们手动配置一下
首先还是在main.js中引入

import zh_CN from 'vee-validate/dist/locale/zh_CN'
import { Validator } from 'vee-validate';

紧接着再加一句

Validator.addLocale(zh_CN);

最后需要把第一步的Vue.use(VeeValidate)改为

Vue.use(VeeValidate, {
  locale: 'zh_CN',
});

现在错误提示已经是中文了
五、配置组件
上一点中的配置中文其实已经是对组件的配置了,再说一说其他的配置。

//配置
const config = {
  errorBagName: 'errors', // change if property conflicts.
  fieldsBagName: 'fields',
  delay: 0,
  locale: 'zh_CN',
  strict: true,
  enableAutoClasses: false,
  classNames: {
  touched: 'touched', // the control has been blurred
  untouched: 'untouched', // the control hasn't been blurred
  valid: 'valid', // model is valid
  invalid: 'invalid', // model is invalid
  pristine: 'pristine', // control has not been interacted with
  dirty: 'dirty' // control has been interacted with
},
events: 'blur',
inject: true
};
Vue.use(VeeValidate, config);

delay是指对错误提示的延迟时间;locale就是上一点中对中文的配置,只是这里统一写到了config中;strict=true代表没有设置规则的表单不进行校验,events默认是input|blur,就是在用户输入和表单失去焦点时都进行校验,这里我改成了blur,即只有失去焦点时才开始验证。


五、修改默认的错误提示信息

//修改默认错误提示
const dictionary = {
  zh_CN: {
  messages: {
    email: () => '邮箱格式不正确哦'
    }
  }
};
Validator.updateDictionary(dictionary);

demo中修改了email的错误提示信息,因为使用的中文(前面引入的),所以是zh_CN。最后用updateDictionary方法加入到Validator中。


六、自定义规则

Validator.extend('qq', {
  messages: {
    zh_CN:field => 'qq号码输入不正确'
  },
  validate: value => {
    return /^[1-9][0-9]{4,14}$/.test(value);
  }
});

extend的第一个参数就是自定义的规则的名字,可以像使用默认规则一样使用它,messages中是错误提示信息,validate是验证规则,返回一个布尔值或promise.

main.js引入

import validate, { config } from './public/js/vee-validate'; //表单验证插件配置
Vue.use(validate, config);
import validate, {Validator} from 'vee-validate';
const messagesCn = {
  after: (field, [target]) => ` ${field}必须在${target}之后`,
  alpha_dash: (field) => ` ${field}能够包含字母数字字符,包括破折号、下划线`,
  alpha_num: (field) => `${field} 只能包含字母数字字符.`,
  alpha_spaces: (field) => ` ${field} 只能包含字母字符,包括空格.`,
  alpha: (field) => ` ${field} 只能包含字母字符.`,
  before: (field, [target]) => ` ${field} 必须在${target} 之前.`,
  between: (field, [min, max]) => ` ${field} 必须在${min}~${max}之间.`,
  confirmed: (field, [confirmedField]) => ` ${field} 不能和${confirmedField}匹配.`,
  date_between: (field, [min, max]) => ` ${field}必须在${min}和${max}之间.`,
  date_format: (field, [format]) => ` ${field}必须在在${format}格式中.`,
  decimal: (field, [decimals] = ['*']) => ` ${field} 必须是数字的而且最多包含${decimals === '*' ? '' : decimals}位小数.`,
  digits: (field, [length]) => ` ${field} 必须是${length}位数字`,
  dimensions: (field, [width, height]) => ` ${field}必须是 ${width} 像素到 ${height} 像素.`,
  email: (field) => ` ${field} 必须是有效的邮箱.`,
  ext: (field) => ` ${field} 必须是有效的文件.`,
  image: (field) => ` ${field} 必须是图片.`,
  in: (field) => ` ${field} 必须是一个有效值.`,
  ip: (field) => ` ${field} 必须是一个有效的地址.`,
  max: (field, [length]) => ` ${field} 不能大于${length}个字.`,
  mimes: (field) => ` ${field} 必须是有效的文件类型.`,
  min: (field, [length]) => ` ${field} 不能少于${length}个字.`,
  not_in: (field) => ` ${field}必须是一个有效值.`,
  numeric: (field) => ` ${field}只能包含数字.`,
  regex: (field) => ` ${field} 格式无效.`,
  required: (field) => `${field}不能为空.`,
  size: (field, [size]) => ` ${field} 必须小于 ${size} KB.`,
  url: (field) => ` ${field}不是有效的url.`,
  phone: (field) => ` ${field} 格式不正确.`,
  msgCode: (field) => ` ${field} 格式不正确.`,
  nickname: (field) => ` ${field} 只能包含字母、数字或中文.`,
  minChar: (field, [length]) => ` ${field}不能小于${length}个字符.`,
  maxChar: (field, [length]) => ` ${field}不能大于${length}个字符.`
}
//手机号码
Validator.extend('phone', {
  getMessage: field => field + ' 格式不正确',
  validate: value => !!/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)
});
//6位手机短信验证码
Validator.extend('msgCode', {
  getMessage: field => field + ' 格式不正确',
  validate: value => !!/^[a-zA-Z0-9]{6}$/.test(value)
});
//昵称
Validator.extend('nickname', {
  getMessage: field => field + ' 只能包含字母、数字或中文',
  validate: value => !!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)
});
//最小字符
Validator.extend('minChar', {
  getMessage:(field,params) => {
  return field+ '不能小于'+params[0]+'个字符.'
},
validate: (value,params) => {
  return !(value.replace(/[^\x00-\xff]/g, 'xx').length<parseInt(params[0]))
}
})
// 最大字符
Validator.extend('maxChar', {
  getMessage:(field,params) => {
  return field+ '不能大于'+params[0]+'个字符.'
},
validate: (value,params) => {
  return !(value.replace(/[^\x00-\xff]/g, 'xx').length>parseInt(params[0]))
  }
})
export const config = {
  errorBagName: 'errors', // change if property conflicts
  // fieldsBagName: 'fields',
  fieldsBagName: 'fieldsBag',
  locale: 'zh_CN',
  dictionary: {
    zh_CN: {
      messages: messagesCn
    }
  }
};
export default validate

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!