VeeValidate的使用方法

2024年3月24日 151次阅读来源: oylp

引入：

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

引入：