VeeValidate的使用方法

官网: http://vee-validate.logaretm….

引入:

npm install vee-validate --save

vue代码:

import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'; //引入中文包,提示信息可以以中文形式显示
import { Validator } from 'vee-validate';

Validator.addLocale(zh_CN); // 设置提示信息中文方式显示

const config = {
  errorBagName: 'errors', 
  fieldsBagName: 'fields',
  delay: 100,   
  locale: 'zh_CN', 
  strict: true,  
  enableAutoClasses: true,
  events: 'blur', 
  inject: true
};
Vue.use(VeeValidate, config); //一般插件都要use一下

config配置信息

插件的一些功能可以自定义,需要编写config,然后Vue.use(VeeValidate, config)来使用
一下为配置信息的意思(可能不全面)

  • errorBagName: ‘erroers’

    所有的错误信息都是放在这个里面的,如果名称和页面上的变量名字冲突,需要修改成其他的,当是errors.fist的时候,error就是字符串,当使用error.all()/error.collect()的时候就是数组

  • fieldsBagName: ‘fields’

    字段的名称(标志)的对象,将在每个Vue的实例数据注入。如果在页面上使用了ip的验证,那么,可以通过如下获取一个对象:

this.fileds.ip
 >> 获取到的对象:
{
    dirty :true
    invalid:false
    pending:false
    pristine:false
    required:true
    touched:true
    untouched:false
    valid:true
    validated:true
}
  • delay : 100

    表示获取输入信息的时间

  • locale: ‘zh_CN’

    验证消息的默认语言。

  • strict: true

    表示没有设置规则的表单不进行验证

  • classes (不懂)

  • events: ‘blur|input’

    默认是input|blur 就是在用户输入和表单失去焦点的时候都进行验证,blue表示失去焦点的时候进行验证

自带规则

after/before

 <input v-validate="'required|after: 01/01/2010'" name="日期" type="text" placeholder="填入日期应该在01/01/2010之后">

我理解的是向上面一样写,但是不管我输入什么日期,一直会提醒错误,如果有知道正确写法的朋友,希望能指点下

alpha
   <input v-validate="'required|alpha'" name="" type="text" placeholder="只能输入字符串">
alpha_dash
<input v-validate="'required|alpha_dash'" name="" type="text" placeholder="能输入字母数字破折号下划线">
alpha_num
<input v-validate="'required|alpha_num'" name="" type="text" placeholder="能输入字母数字">
alpha_spaces
<input v-validate="'required|alpha_spaces'" name="" type="text" placeholder="能输入字母空格"><br>
between
<input v-validate="'required|between: 1,10'" name="" type="text" placeholder="1-10">
confirmed :一般用于需要再次输入的验证,比如密码的再次输入
<input v-validate="'required|confirmed:123'" name="password" type="text" placeholder="输入的内容要和123相同">
credit_card
<input v-validate="'required|credit_card'" name="password" type="text" placeholder="输入的内容格式是信用卡的号码格式">
date_between
 <input v-validate="'required|date_between:10/09/2016, 20/09/2016'" name="日期" type="text" placeholder="输入的日期要在10/09/2016和20/09/2016之间">
date_format
 <input type="text" v-validate="'date_format:MM/DD/YYYY'" name="" placeholder="输入的日期格式要是MM/DD/YYYY"> 
decimal
<input type="text" v-validate="'decimal:2'" name="" placeholder="输入的数字的小数点个数是2"> 
digits
<input type="text" v-validate="'digits:2'" placeholder="数字长度是两位">
dimensions
<input type="file" v-validate="'dimensions:10,10'" placeholder="上传的图片是10像素到10像素">
email
 <input type="text" v-validate="'date_format:MM/DD/YYYY'" name="" placeholder="输入的日期格式要是MM/DD/YYYY"> 
ext
<input type="file" v-validate="'ext: zip, png'" placeholder="上传文件后缀名限制为zip和png">
image
<input v-validate="'required|email'" name="email" type="text" placeholder="输入内容为email格式">
in / not_in
<select name="" v-validate="'in:1,3,4'">
        <option value="1">One</option> 
        <option value="2">Invalid</option> 
        <option value="3">Three</option> 
        <option value="4">Four</option>
    </select>
ip
<input v-validate="'required|ip'" name="ip" type="text" placeholder="输入内容为ip格式">
max
<input type="text" v-validate="'max:10'" name="" placeholder="字符串最大长度是10,空格也计算在内"> 
max_value
<input type="text" v-validate="'max_value:100'" placeholder="输入的数字最大为100">
mimes
<input v-validate="'required|mimes:[image/jpeg,image/png]'" name="mimes" type="file” >  mimes: [里面可以写文件类型] 如果是写image好像不辨别
min
 <input type="text" v-validate="'min:5'" placeholder="输入的字符长度最小为最大为5">
min_value
<input type="text" v-validate="'min_value:5'" placeholder="输入的数字最小为5">
numeric
<input type="text" v-validate="'numeric'" placeholder="输入的数字最小为5">
regex
<input type="text" v-validate="'regex:^([0-9]+)$'" placeholder="regex后面可以写正则表达式,匹配输入的内容">
required
<input v-validate="'required'" name="username" type="text" placeholder="内容必须填写">
size
<input type="file" v-validate="'size:100'" placeholder="上传文件大小限制,必须小于100kb">
url
<input v-validate="'required|url'" name="url" type="text" placeholder="输入内容格式为url">
rules
<input type="text" v-validate="{ rules: { regex: /^([0-9]+)$/, max_value:100 } }" placeholder="使用rules可以组合使用规则">

自定义部分

自定义规则:
Validator.extend('qq', {
  messages: {
 zh_CN:field => 'qq号码输入不正确'
  },
  validate: value => {
 // 获取输入的value
 return /^[1-9][0-9]{4,14}$/.test(value);
  }
});
自定义提示信息
const dictionary = {
  zh_CN: {
    messages: {
      email: () => '邮箱格式不正确哦>.<'
    }
  }
};
Validator.updateDictionary(dictionary);

未完。。。

    原文作者:oylp
    原文地址: https://segmentfault.com/a/1190000011296437
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞