9

官网: 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之后">

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

    有朋友提示,可以这样写

    <input v-validate="'required|date\_format:DD/MM/YYYY|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
    365 声望17 粉丝

    只是一个普普通通喜欢吃脂肪还长肉的人