本教程大家分享了自带气泡提示的vue校验插件，供大家参考，具体内容如下

安装

npm install vue-verify-pop

使用

VUE版本：1.x
必须在vue-cli生成的webpack模板环境中使用

一、在./main.js中执行全局配置

import vue from 'vue'
import verify from 'vue-verify-pop'
vue.use(verify)
// 以下配置非必须，按你的需求来
// 配置默认校验不通过时的提示信息
verify.errMsg = YourErroMsg
// 增加校验规则
verify.addRule('myRule', (v) => {return '校验不通过'})

二、在表单元素中配置校验规则

<!--待校验元素的pop容器-->
<pop>
 <!--该输入框内容为最多为两位小数的数字-->
 <input v-verify decimal-length="2">
</pop>

ok，您已经完成了一个基础校验。气泡提示怎么样？丑的话自己用css改吧。。
当输入框失去焦点时会自动触发校验，如果校验不通过会出现气泡。再次输入气泡会消失

支持的校验规则(继承verify-base.js)

• length: 校验文本长度
• minLength: 校验文本最短长度
• maxLength: 校验文本最长长度
• maxNumber: 校验数字最大值
• minNumber: 校验数字最小值
• decimalLength: 校验小数位
• number: 校验是否为数字
• int: 校验是否为整数
• phone: 校验是否为手机号
• idCard: 校验是否为身份证号
• bankCard: 校验是否为银行卡号
• email: 校验是否为电子邮件地址
• verifyCode: 校验是否为6位数字验证码
• canBeNull: 当参数为空时跳过校验，不会执行后面的校验规则(注意：自定义校验函数'verify'仍然会执行)
  

重要参数说明

注意：规则中不能有大写字母，用中划线分隔，同vue props属性设置规则

errMsg

用于自定义校验不通过提示

<pop>
 <input v-verify length="10" err-msg="请输入正确的卡号">
</pop>

maxNumber

注意小于和小于等于的写法

<!--该输入框内容必须为小于等于10的数字-->
<pop>
 <input v-verify max-number="10">
</pop>
<!--该输入框内容必须为小于10的数字,通过'!'来标识-->
<pop>
 <input v-verify max-number="!10">
</pop>

minNumber

参考maxNumber配置

pop

用于设置气泡组件的位置。
默认情况下，插件会查找待校验元素的分发对象或父容器(父容器的父容器的父容器...)是否为pop组件，如果找到则使用之。
当待校验元素和气泡提示不再满足父子容器关系时，可以用如下方式去指定：

<!--当校验不通过时，气泡提示会出现在这个div上面-->
<pop id="cardIdPop">
  <div>我是一个div</div>
</pop>
<input v-verify length="10" err-msg="卡号不正确" pop="cardIdPop">

noCache

用于禁止插件对校验结果的缓存。默认情况下，插件会缓存上次的校验结果，直到待校验元素的值发生变化

<pop>
 <input v-verify length="10" err-msg="卡号不正确" no-cache>
</pop>

canBeNull

插件默认校验输入内容不为空，该参数一般用于如下情况，比如邀请码这种一般可以为空，不为空又需要校验的输入项

自定义校验方法verify始终会执行，主要考虑到该校验方法中的校验对象很可能不仅仅是输入框本身的值，故不应受该配置项的影响

<!--当邀请码不为空时才校验长度是否等于10-->
<pop>
 <input v-verify length="10" err-msg="邀请码不正确" can-be-null>
</pop>

watch

监听其他变量，触发自身校验。
一个常见例子:最少参与人数不能大于最多参与人数，当最少参与人数变化时应当触发最多参与人数的校验

<template>
 <pop>
  <input placeholder="最少参与人数" v-verify v-model="minNumber" v-verify int>
 </pop>
 <pop>
  <input placeholder="最多参与人数" v-verify v-model="minNumber" v-verify int :verify="verifyMaxNumber" :watch="minNumber">
 </pop>
</template>
<script>
export default{
 data () {
  return {
   minNumber: ''
  }
 },
 methods: {
  verifyMaxNumber (val) {
   if (val - this.minNumber < 0) return '最多参与人数不能小于最少参与人数'
  }
 }
}
</script>

规则简写

number/int/phone等无须设定值的规则可以直接：

<pop>
 <!--该输入框内容必须为手机号-->
 <input v-verify phone>
</pop>

maxNumber/minNumber/decimalLength无须写number规则

<pop>
 <!--该输入框内容必须为不大于10的数字-->
 <input v-verify max-number="10">
 <!--不用这么写-->
 <input v-verify number max-number="10">
</pop>

自定义校验方法

如果自带的校验方法满足不了您的需求，可以在校验规则中插入您自己的校验方法

<template>
 <pop>
  <!--通过给props.verify赋值来植入自定义校验-->
  <!--当length规则通过时才会执行自定义校验-->
  <input v-verify length="10" :verify="verifyCardId" err-msg="卡号不正确">
 </pop>
</template>
<script>
export default{
 methods: {
  verifyCardId (val) {
   // val: 待校验的值
   // 可以直接return校验不通过的提示
   // if (val.substr(0,1) !== '0') return '卡号不正确'
   // 如果直接return true/false 校验不通过提示将使用errMsg或默认错误提示
   // return val.substr(0,1) === '0'
  }
 }
}
</script>

自定义校验规则

和自定义校验方法的区别是这个适用于全局，等于增加插件自带的校验规则

// 新增校验是否为6位数字 val: 待校验的值 rule: 规则值。
// 校验是否为6位数字这种一般时不需要额外参数用来对比,所以rule参数用不到。校验文本长度，数字大小这种才会用到rule
// <input v-verify length="6"> '6'会作为rule参数
var verifyBase = verify.verifyBase
verify.addRule('number6', (val, rule) => {
 // 判断是否为6位数字
 // 只需要关注错误的情况 返回默认出错提示即可
 if (!verifyBase('number')(val).valid || !verifyBase('length')(val, 6)) return '请输入正确的6位数字'
})

调用

<!--校验不通过提示优先errMsg,然后才是您自定义规则中返回的默认出错提示-->
<input v-verify number6 err-msg="请输入正确的6位数字验证码">

手动触发校验&分组校验

<template>
 <pop>
  <!--给目标元素设置v-el-->
  <input v-verify length="10" err-msg="卡号1不正确" v-el:ipt>
 </pop>
 <pop>
  <!--给目标元素设置id-->
  <input v-verify length="10" err-msg="卡号2不正确" id="ipt">
 </pop>
 <!--给目标元素设置组名-->
 <verify name="verifyGroup">
  <pop>
   <input v-verify length="10" err-msg="卡号3不正确">
  </pop>
  <pop>
   <input v-verify length="10" err-msg="卡号4不正确">
  </pop>
 </verify>
</template>
<script>
export default{
 ready () {
  // 调用vm对象中$verify方法
  // 无参调用会触发当前vm中所有的待校验元素执行校验并显示校验气泡
  this.$verify()
  // 通过传id参数('#'+id)触发输入框的校验并显示校验气泡
  this.$verify('#ipt')
  // 通过传dom元素触发输入框的校验并显示校验气泡
  this.$verify(this.$els.ipt)
  // 通过传校验组名来校验该组的所有待校验元素
  this.$verify('verifyGroup')
  // 只校验，不显示校验气泡
  this.$verify('verifyGroup', false)
  // 返回：
  {
   // 所有校验结果是否都通过
   valid: true/false,
   results: [
    {
     // 校验的dom元素
     el: DOM,
     // 该元素校验是否通过
     valid: true/false,
     // 错误信息
     msg: ''
    }
   ]
  }
 }
}
</script>

插件的默认校验不通过提示模版

{
 number: {
  common: '请输入数字',
  // >
  maxNumber: '该输入框数字不能大于{maxNumber}',
  // >=
  maxNumber2: '该输入框数字应小于{maxNumber}',
  // <
  minNumber: '该输入框数字不能小于{minNumber}',
  // <=
  minNumber2: '该输入框数字应大于{minNumber}',
  decimalLength: '该输入框最多接受{decimalLength}位小数'
 },
 // 特殊类型
 int: '该输入框仅接受整数',
 phone: '请输入正确的手机号',
 idCard: '请输入正确的身份证号',
 bankCard: '请输入正确的银行卡号',
 email: '请输入正确的邮箱',
 verifyCode: '请输入正确的验证码',
 common: {
  empty: '请补充该项内容',
  length: '请输入{length}位字符',
  minLength: '该输入框内容至少{minLength}位'
 },
 specialInput: {
  checkbox: '请勾选我'
 }
}

您可以按照上述格式自定义您的错误提示

verify.errMsg = {}

也可以只修改某些项

verify.errMsg.int = '{mark}必须为整数'

彩蛋

校验插件不仅能检测到输入内容的变化，绑定值的变化同样在掌控之内，也就是说校验气泡的出现和消失您完全无须手动控制

<!--当卡号输入框出校验气泡提示时，cardId值的变化或重新输入卡号，气泡提示都会消失-->
<pop>
 <input v-model="cardId" v-verify length="10" err-msg="卡号不正确">
</pop>

verifyBase

本插件校验的核心方法来自verify-base

// 通过该方式获取verifyBase以使用其内置的各种校验方法
verify.verifyBase

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue校验插件  # vue  # verify  # pop  # vue自带气泡提示校验插件  # vue 指令之气泡提示效果的实现代码  # vue实现气泡运动撞击效果  # 输入框  # 卡号  # 请输入  # 自定义  # 不正确  # 最多  # 不通过  # 为空  # 自带  # 您的  # 验证码  # 才会  # 可以直接  # 自己的  # 错误提示  # 情况下  # 在这个  # 才是  # 不需要  # 可以用 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  php 三元运算符实例详细介绍  高防服务器租用如何选择配置与防御等级？  如何在Windows 2008云服务器安全搭建网站？  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  Laravel如何使用withoutEvents方法临时禁用模型事件  如何用AWS免费套餐快速搭建高效网站？  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  zabbix利用python脚本发送报警邮件的方法  Swift开发中switch语句值绑定模式  网站优化排名时，需要考虑哪些问题呢？  如何快速搭建FTP站点实现文件共享？  如何在万网自助建站中设置域名及备案？  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  SQL查询语句优化的实用方法总结  如何安全更换建站之星模板并保留数据？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  Android GridView 滑动条设置一直显示状态(推荐)  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  如何用美橙互联一键搭建多站合一网站？  Laravel与Inertia.js怎么结合_使用Laravel和Inertia构建现代单页应用  如何快速查询域名建站关键信息？  🚀拖拽式CMS建站能否实现高效与个性化并存？  青岛网站建设如何选择本地服务器？  EditPlus中的正则表达式实战(6)  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程  javascript中的try catch异常捕获机制用法分析  Laravel怎么判断请求类型_Laravel Request isMethod用法  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  如何快速生成高效建站系统源代码？  Laravel如何优化应用性能？（缓存和优化命令）  如何快速搭建高效WAP手机网站？  BootStrap整体框架之基础布局组件  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  绝密ChatGPT指令：手把手教你生成HR无法拒绝的求职信  如何在浏览器中启用Flash_2025年继续使用Flash Player的方法【过时】  标题：Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  Swift中循环语句中的转移语句 break 和 continue  Angular 表单中正确绑定输入值以确保提交与验证正常工作  怎样使用JSON进行数据交换_它有什么限制  如何自定义建站之星网站的导航菜单样式？  如何在宝塔面板中修改默认建站目录？  Laravel Fortify是什么，和Jetstream有什么关系  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】