vue-better-verify
一个基于 vue 的表单验证指令 支持自定义扩展正则 临时跳过验证 并且提供了完美的密码相等性验证
安装
yarn add vue-better-verify // 这是推荐的安装方式使用 yarn 来安装,或者使用下面的方法
npm install vue-better-verify --save // 不推荐
简述
这个包诞生的目的就是让表单类控件的验证更加的方便、清晰,没有过于复杂的规则,但是又提供了应对各种场景的高级功能,但是请放心这些高级功能也将是非常直观易用的,对于一些没有提供的功能,大多是因为这些功能应该由你自己来做,例如:验证失败的提示语,验证字符的长度等
视频教程
还没有。。。
适用范围
- html 原生 input 库
- 其他 ui 框架的 input 组件
- 前期的版本没有实现对 select checkbox 等的验证是因为这些验证主要是空验证,是可以自己在该插件的基础上进一步封装的功能,当然后续也可能逐渐支持这些元素
使用方式
// main.js
import Vue from "vue"
import vueVerify from "vue-better-verify"
Vue.use(vueVerify)
// 组件内
<template>
<div>
<label>密码</label>
<input v-verify.equal></input>
</div>
<div>
<label>确认密码</label>
<input v-verify.password.equal="passVerify"></input>
<template v-if="!passVerify.isFirst">
<div style="color:red;" v-if="!passVerify.regExp">密码格式错误</div>
<div style="color:red;" v-if="!passVerify.equal">两次密码输入不一致</div>
</template>
</div>
</template>
<script>
export default {
data () {
return {
passVerify: { // 其实你也可以直接写个空对象,然后直接使用 empty equal regExp 这些值
isFirst: true, // 是否是第一次加载 这个状态很重要用于控制页面加载的时候不显示你预设的提示语
empty: "", // 空验证的结果
equal: "", // 相等性验证的结果
regExp: "" // 正则验证的结果
}
}
}
}
</script>
语法解释
<!-- 其中命名空间可以省略 equal 只在 2 个或以上输入框做相等性验证的时候才是必要的 -->
<input v-verify:命名空间.规则1.规则2.equal="当前标签验证状态"></input>
正则的扩展
默认插件已经提供了一些基本的正则:
phone: /^1[2-9][0-9]{9}$/
email: /^\w+@\w+\.\w+$/
password: /^(?=.*\d)(?=.*[A-z])[\w_]{6,18}$/
sms: /^\d{6}$/ // 6位数字验证码验证
规则可以被联合
<!-- 下面是一个可以输入手机号也可以输入邮箱的输入框 -->
<input v-verify.phone.email="verify"></input>
规则可以被扩展
// 想扩展规则可以在入口处进行全局设置
import Vue from "vue"
import vueVerify from "vue-better-verify"
// 例如我要添加一个中文名的正则
Vue.use(vueVerify, {
regExp: {
cname: /^[\u4e00-\u9fa5]{2,4}$/ // 添加的自定义正则
},
defaultStyle: true // 这个值默认就是 true 验证框在验证失败的时候有一个默认的红色提醒,由这个属性来控制
})
扩展之后可以直接使用<input v-verify.cname></input>
获取组件所有的验证是否通过
this.$verify.命名空间.all // 默认没有设置命名空间的情况下,命名空间为 default
手动验证
手动验证功能很重要,他的使用方式也很简单
// 验证默认命名空间的所有输入框
this.$verify.doVerify()
// 验证所有命名空间
this.$verify.doVerify("all")
// 验证特定命名空间
this.$verify.doVerify("命名空间")
高级(动态跳过验证、动态切换必填状态、联合命名空间)
联合命名空间
你可能会遇到这样的场景,注册页面用户可以切换选择手机注册或者邮箱注册,这里的问题是密码框是可以共用的,手机和邮箱的框不公用,那么用户在手机注册的时候,你势必要连着未显示的邮箱一起验证了,我们想做的是在用户手机注册的时候跳过邮箱框的验证
在最开始是可以变通的通过命名空间来解决这个问题,他们之间冲突的原因就是默认都在一个叫做 default 的命名空间,但是如果将邮箱验证设定一个 email 命名空间,手机验证设定一个 phone 命名空间,密码可以使用默认的命名空间,那么手机注册的时候只需要联合判断 phone 和 default,邮箱雁阵则联合判断 email 和 default
动态跳过验证
新的 api 可以在一个命名空间下解决上述的问题,在元素上加入 skip 值为布尔,则可以动态跳过当前框的验证,true 的时候表示要跳过 false 表示不跳过,默认为 false
<input v-verify.email="emailVerify" :skip="skip"></input>
export default {
data () {
return {
emailVerify: {},
skip: true
}
}
}
动态切换必填状态
在标签中添加 need 属性可以设置框为必填项,他也支持动态值,true 为必填 false 为非必填,并且你可以随时更改,这是有相应的应用场景的,有的表单在新增的时候个别输入框是必填项,但是如果编辑的时候则是非必填,此时就用到了这个功能。
注意:设为必填不影响 empty 空验证的结果,他只影响最终联合验证的结果,因为在联合验证的时候如果发现是非必填的那么就会忽略掉 empty 的值
注意事项
- 在使用的过程中请勿在输入框外层使用 v-if 而应该使用 v-show 这是因为 v-if 会清楚 input 的 html 结构 而验证是依赖于 dom 的
- 可以在提示信息中使用 v-if