自带气泡提示的vue校验插件(vue-verify-pop)


Posted in Javascript onApril 07, 2017

本教程大家分享了自带气泡提示的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>

自带气泡提示的vue校验插件(vue-verify-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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript插入动态样式实现代码
Feb 22 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
浅谈javascript的分号的使用
May 12 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
实例分析javascript中的异步
Jun 02 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JS仿Base.js实现的继承示例
Apr 07 #Javascript
vue-hook-form使用详解
Apr 07 #Javascript
ES6实现的遍历目录函数示例
Apr 07 #Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 #Javascript
JS实现css hover操作的方法示例
Apr 07 #Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 #Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 #Javascript
You might like
isset和empty的区别
2007/01/15 PHP
php与php MySQL 之间的关系
2009/07/17 PHP
一些不错的js函数ajax
2008/08/20 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
vue bootstrap小例子一枚
2017/06/09 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python中的index()方法使用教程
2015/05/18 Python
Python 登录网站详解及实例
2017/04/11 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
深入浅析Python的类
2018/06/22 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python reversed函数及使用方法解析
2020/03/17 Python
如何在django中实现分页功能
2020/04/22 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
财务人员的自我评价范文
2014/03/03 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
政府采购方案
2014/06/12 职场文书
拾金不昧感谢信
2015/01/21 职场文书
自荐信格式范文
2015/03/04 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Python中异常处理用法
2021/11/27 Python