veeValidate@2的使用及部分内置验证

最新推荐文章于 2023-08-05 16:29:04 发布

酸奶味的核桃

最新推荐文章于 2023-08-05 16:29:04 发布

阅读量1.2k

点赞数 1

分类专栏：插件文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_58061710/article/details/127663156

版权

插件专栏收录该内容

9 篇文章

订阅专栏

文章目录

一、使用步骤
二、其他配置
三、完整的用法示例
四、部分内置校验案例
总结

一、使用步骤

npm  i vee-validate@2

//创建规则文件VeeValidate.js ,并进行以下配置
import Vue from 'vue'
import VeeValidate,{Validator} from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN'  //汉化包
Vue.use(VeeValidate)

//在入口文件main.js中执行该文件
import "@/utils/VeeValidate.js"

二、其他配置

1、触发方式更改

触发的方式：
vee-validate提供了四种触发验证的方式，默认情况下用户输入时触发。

aggressive ，输入时触发(默认)
passive ，表单提交时触发
lazy ，失去焦点(blur)或者更改(change)时触发
eager ，Aggressive 和 Lazy 的组合，当输入框失去焦点(blur)或者内容更改(change)时触发一次校验，如果无效，进入Aggressive模式，直到输入变为有效

以下是官网的三种更改方式:

//方式一:
局部单独设置:   //测试可用,name提示field指代  该方法
<ValidationProvider rules="required|email" mode="eager" name="性别">
  <div slot-scope="{ errors }">
    <input v-model="val">
    <span>{{ errors[0] }}</span>
  </div>
</ValidationProvider>

//在script内引入并注册组件, 用组件包裹input结构
<script>
import { ValidationProvider } from 'vee-validate';
export default {
  components:{
    ValidationProvider,
  }
};
</script>

//方式二:全局设置触发调用方法
import VeeValidate from 'vee-validate';    
VeeValidate.setMode('passive');   //demo中测试没生效,不知道是啥问题

//方式三:全局触发use插件时传入配置项
import Vue from 'vue'
Vue.use(VeeValidate, {     //demo中测试没生效,不知道是啥问题
  mode: 'eager'
});

2、重写内置规则提示信息

import VeeValidate from 'vee-validate' //引入插件
import zh_CN from 'vee-validate/dist/locale/zh_CN'  //汉化包


//方式一: 全局配置
VeeValidate.Validator.localize('zh_CN',{
  messages: {
      ...zh_CN.messages,
      required:(field)=>`请填写${field}`  //重写必填提示信息
  },
  attributes:{ //配置field字段中文名称对照,全局,不配置则会使用input的name属性直接提示信息
    tel:'手机号',  //与input的name属性配套, key值为name属性值
    code:'验证码',
    password:'密码',
    password1:'重复密码',
    isAgree:'协议',
}
})

//方式二: 局部的名称对照替代使用data-vv-as属性
<input v-validate="{mimes:['image/*']}" data-vv-as="图片" name="mimes_field" type="file">

3、自定义规则

配置自定义规则:

import Vue from 'vue'
import VeeValidate,{Validator} from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN'  //汉化包
Vue.use(VeeValidate)

// 自定义规则,使用Validator.extend()函数
Validator.extend('text', {
  getMessage: field => field + "格式不对",  //错误提示信息
  validate: value => {
    return /^1\d{10}$/.test(value)  //返回校验结果,为布尔值
  }
});

使用:

<input type="text" name="tel" id="tel" v-validate="{text:true }" />
<!--错误提示  -->
<span>{{ errors.first("tel")}}</span>

三、完整的用法示例

1、vue区域:

<template>
  <div class="container">
    <form>
       <!--全局验证写法 text为自定义-->
      <label for="tel">电话:</label>
      <input type="text" name="tel" id="tel" v-validate="{ required:true,text:true }"/><br />
      <!--错误信息 -->
      <span >{{errors.first("tel")}}</span>      <br />
       jubu 
       
      <!--局部验证单独写法 mode为触发方式,name为信息提示的filed的替换值 组件需要引用注册-->
      <ValidationProvider :rules="{required:true}" mode="eager" name="性别">
        <div slot-scope="{ errors }">
          <input v-model="val" type="text"/>
          <span id="error">{{ errors[0] }}</span>  <!--错误信息 -->
        </div>
      </ValidationProvider>

    </form>
  </div>
</template>
<script>
import { ValidationProvider } from 'vee-validate';
export default {
  name: "ValidatePage",
  data() {
    return {
      val:""
    };
  },
  components:{
    ValidationProvider
  }
};
</script>

2、规则js文件

import Vue from 'vue'
import VeeValidate,{Validator} from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN'  //汉化包
Vue.use(VeeValidate)

// 重写规则提示信息,以及字段中文对照表
VeeValidate.Validator.localize('zh_CN',{
  messages: {
      ...zh_CN.messages,
      required:(field)=>`请填写${field}`
  },
  attributes:{ //配置字段名称对照
    tel:'手机号',
    code:'验证码',
    password:'密码',
    password1:'重复密码',
    isAgree:'协议',
    sex:"性别"
}

})

// 自定义规则
Validator.extend('text', {
  getMessage: field => field + "格式不对",
  validate: value => {
    return /^1\d{10}$/.test(value)
  }
});

3、在main.js中执行

import "@/utils/VeeValidate.js"

四、部分内置校验案例

 + required                    - 必传参数 
  <input type="text" name="tel" id="tel" v-validate="{ required: true}" />
      
 + regex:pattern               - 值必须符合正则pattern 
  <input type="text" name="tel" id="tel" v-validate="{regex:/^1\d{10}$/}" />
      
 + is:{data}                   - 值必须与data数据相同
 <input type="text" name="tel" id="tel" v-validate="{is:'张三'}" />
  
 + is_not                      - is否定版本
  <input v-validate="{is_not:'3'}" type="text" name="field_123">
  <span >{{ errors.first("field_123") }}</span>
 //数据不可以为3
     
 + date_format:format         - 合法的format格式化日期，格式(yyyy-MM-dd) 年-月-日
  <input type="text" name="date" v-validate="{date_format:'yyyy-MM-dd'}" />

 + date_between:[min,max]      - 日期在min和max之间 
    <input type="text" name="date" v-validate="{date_format:'yyyy/MM/dd',date_between:['2022/01/14','2022/12/01']}"/>
   //与date_format连用,date_format用于规定格式,
        
 + after:target                - 比target要大的一个合法日期，格(DD/MM/YYYY) 
  <input type="text" name="tel" id="tel" v-validate="{date_format:'yyyy/MM/dd',after:'2022/01/12'}" />
  //与date_format连用,date_format用于规定格式, after要与date_format格式统一,最后输入日期要大于设置值
      
  + before:target              - 和after相反 
  <input type="text" name="date" v-validate="{date_format:'yyyy/MM/dd',before:'2022/01/12'}"/>
   //与date_format连用,date_format用于规定格式, before要与date_format格式统一,最后输入日期要小于设置值

 + alpha                       - 只包含英文字符 
     <input type="text" name="alpha" v-validate="{alpha:true}"/>
         
 + alpha_dash                  - 可以包含英文、数字、下划线、破折号 
     <input type="text" name="alpha_dash" v-validate="{alpha_dash:true}"/>
         
 + alpha_num                    - 可以包含英文和数字 
  <input type="text" name="alpha_dash" v-validate="{alpha_dash:true}"/>
 
 + between:[min,max]            - 在min和max之间的数字 
  <input type="text" name="between" v-validate="{between:[1,10]}"/>
      
 + confirmed:target             - 必须和target一样 ,感觉用起来与is差不多
 <input type="text" name="confirmed" v-validate="{confirmed:'123456'}"/>
     
 + decimal:decimals             - 数字，小数位数最多多少位
 <input v-validate="'decimal:3'" name="decimal_field" type="text">
  //小数位数最多3位,可以没有,符合条件的输入:33, 33.1, 33.11, 33.111
     
 + digits:length                - 长度为length的数字 
   <input v-validate="{digits:3}" name="digits_field" type="text">  //输入必须是数字并且长度为3
       
 + dimensions:[width,height]    - 验证上传文件,上传必须是图片,并验证宽高 
  <input v-validate="{dimensions:[30,30]}"  name="dimensions_field" type="file" >
      
 + email                         - 邮箱
   <input v-validate="'email'" data-vv-as="email" name="email_field" type="text">
  
 + ext:[extensions]              - 后缀名,对文件后缀名进行验证
  <input v-validate="{ext:['jpeg','jpg']}" data-vv-as="field" name="ext_field" type="file">
  <span >{{ errors.first("ext_field") }}</span>

 + image                         - 图片,验证上传文件是否为图片
  <input v-validate="{image:true}"  name="image_field" type="file"><br/>
   <span >{{ errors.first("image_field") }}</span>

 + included:[list]               - 输入值是否在list列表内 
  <input v-validate="{included:['张三',2,3]}"  name="included" type="text"><br/>
  <span >{{ errors.first("included") }}</span>

 + ip                            - ipv4地址验证
 <input v-validate="{ip:true}"  name="ip_field" type="text">
      
 + max:length                    - 最大长度为length的字符
 <input v-validate="{max:10,min:4}"  name="max" type="text"><br/>
     
 + min:{length}                  - max相反
 <input v-validate="{max:10,min:4}"  name="max" type="text"><br/>

 + mimes:[list]                  - 文件类型 
  <input v-validate="{mimes:['image/*']}" data-vv-as="123" name="mimes_field" type="file">
  <span >{{ errors.first("mimes_field") }}</span>

 + numeric                       - 只允许数字 
<input v-validate="{numeric:true}" name="numeric_field" type="text">
    
 + size:{kb}                      - 上传文件大小不超过 
 <input v-validate="{size:10}" name="size_field"  type="file">