简介
写一个全局注册指令，用来验证input
包含：非空验证，email，phone，密码，最小值，最大值，最小长度，最大长度，自定义正则
提交时，当前页面做一个验证
效果图
全局注册指令
assets/js 下边新建一个directive.js文件，用来放置验证，及注册指令
input组件：本文使用的Ant Design of Vue(也可以自己修改成其他input组件，或者自己写)，提示信息的添加和移除需要针对修改
import Vue from 'vue'
var elArr = [];//保存所有input的el
// 全局注册input验证
Vue.directive('validate', {
inserted: function (el, validateStr) {
// 将验证规则拆分为验证数组
let validateRuleArr = validateStr.value.split("|");
var el = el;
var elInput = el;
if (el.className.indexOf('ant-input-password') !== -1) {
elInput = el.firstChild;
}
// 监听失去焦点的时候
elInput.addEventListener('blur', function () {
//失去焦点进行验证
checkedfun();
});
//用于提交的时候验证
for(let a in elArr){
if(elArr[a].outerHTML==elInput.outerHTML){
elArr.splice(a,1);
}
}
elArr.push(elInput);
// 循环进行验证
function checkedfun() {
for (var i = 0; i < validateRuleArr.length; ++i) {
let requiredRegex = /^required$/; // 判断设置了required
let emailRegex = /^email$/; // 判断设置了email
let phoneRegex = /^phone$/; // 判断设置了 phone
let pwdRegex = /^pwd$/; // 判断设置了 pwd
let minRegex = /min\(/; //判断设置了min 最小值
let maxRegex = /max\(/; //判断设置了max 最大值
let minlengthRegex = /minlength\(/; //判断设置了 minlength 最大长度
let maxlengthRegex = /maxlength\(/; //判断设置了 maxlength 最大长度
let regexRegex = /regex\(/;
// 判断设置了required
if (requiredRegex.test(validateRuleArr[i])) {
if (!required()) {
break;
} else {
removeTips();
}
}
// 判断设置了email
if (emailRegex.test(validateRuleArr[i])) {
if (!email()) {
break;
} else {
removeTips();
}
}
// 判断设置了 phone
if (phoneRegex.test(validateRuleArr[i])) {
if (!phone()) {
break;
} else {
removeTips();
}
}
// 判断设置了 pwd
if (pwdRegex.test(validateRuleArr[i])) {
if (!pwd()) {
break;
} else {
removeTips();
}
}
// 判断是否设置了最小值
if (minRegex.test(validateRuleArr[i])) {
if (!eval(validateRuleArr[i])) {
break;
} else {
removeTips();
}
}
// 判断是否设置了最大值
if (maxRegex.test(validateRuleArr[i])) {
if (!eval(validateRuleArr[i])) {
break;
} else {
removeTips();
}
}
// 判断设置了最小长度
if (minlengthRegex.test(validateRuleArr[i])) {
if (!eval(validateRuleArr[i])) {
break;
} else {
removeTips();
}
}
// 判断设置了最大长度
if (maxlengthRegex.test(validateRuleArr[i])) {
if (!eval(validateRuleArr[i])) {
break;
} else {
removeTips();
}
}
// 判断测试正则表达式
if (regexRegex.test(validateRuleArr[i])) {
if (!eval(validateRuleArr[i])) {
break;
} else {
removeTips();
}
}
}
}
// 验证是否是必填项
function required() {
if (elInput.value == '' || elInput.value == null) {
// console.log("不能为空");
tipMsg("该输入框不能为空哦~");
return false;
}
return true;
}
// 验证是否是邮箱
function email() {
let emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if (!emailRule.test(elInput.value)) {
tipMsg("请输入正确的邮箱地址");
return false;
}
return true;
}
// 验证是否是手机号码
function phone() {
let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!phoneRule.test(elInput.value)) {
tipMsg("请输入正确的手机号码");
return false;
}
return true;
}
// 进行密码的验证
function pwd() {
let pwdRule = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z._*#$@]{6,12}$/;
if (!pwdRule.test(elInput.value)) {
tipMsg("密码必须由6-12位数字和字母组成。\n特殊字符包含（. _ * # $ @）");
return false;
}
return true;
}
// 最小值验证
function min(num) {
if (elInput.value < num) {
tipMsg("最小值不能小于" + num);
// console.log('最小值不能小于'+num);
return false;
}
return true;
}
// 最大值验证
function max(num) {
if (elInput.value > num) {
tipMsg("最大值不能大于" + num);
//console.log('最大值不能大于'+num);
return false;
}
return true;
}
// 最小长度验证
function minlength(length) {
if (elInput.value.length < length) {
// console.log('最小长度不能小于' + length);
tipMsg("最小长度不能小于" + length);
return false;
}
return true;
}
// 最大长度进行验证
function maxlength(length) {
if (elInput.value.length > length) {
tipMsg("最大长度不能大于" + length);
return false;
}
return true;
}
// 进行正则表达式的验证
function regex(rules) {
if (!rules.test(elInput.value)) {
tipMsg("请输入正确的格式");
return false;
}
return true;
}
// 添加提示信息
function tipMsg(msg) {
removeTips();
elInput.classList.add('tip_el');
let tipsDiv = document.createElement('div');
tipsDiv.innerText = `${msg}`;
tipsDiv.className = 'tip_msg';
let parent = el.parentNode;
if (parent.lastChild == el) {
parent.appendChild(tipsDiv);
}
}
// 移除提示信息
function removeTips() {
elInput.classList.remove('tip_el');
let parent = elInput.parentNode;
if (parent.lastChild.className == 'tip_msg') {
parent.removeChild(parent.lastChild);
}
//password
if (el.className.indexOf('ant-input-password') !== -1) {
let parent = el.parentNode;
if (parent.lastChild.className == 'tip_msg') {
parent.removeChild(parent.lastChild);
}
}
}
},
});
// 提交验证
Vue.directive('checkSubmit', {
inserted: function (el, binding, vNode) {
el.addEventListener('click', function (event) {
var evObj = document.createEvent('Event');
evObj.initEvent('blur', true, true);
for (let elArrChild of elArr) {
elArrChild.dispatchEvent(evObj);
}
/*
*有一个参数
*eg: v-checkSubmit="submitBtn"
*参数为时间名
*/
let doc = document;
let submitEvent = binding.value;
/*
*有两个参数
*用于一个页面有两个确定，或者有其他因素干扰了确定按钮时使用
*eg: v-checkSubmit="{submitEvent:submitBtn,cls:'backups_all_input'}"
*submitEvent:事件名称
*cls：需要检测的class名下的input
*/
if(binding.value.hasOwnProperty('cls')){
doc = document.getElementsByClassName(binding.value.cls)[0];
submitEvent = binding.value.submitEvent;
}
let errorInputs = doc.getElementsByClassName('tip_el');//tip_el 检测不通过的input
if(errorInputs.length === 0){
submitEvent();//执行提交事件
}
})
}
});
css
css部分我写在reset.scss全局文件中了
//input 提示样式
.tip_msg{
color: $danger_color;
padding-left: 0;
display: inline-block;
// margin-top: -20px;
animation: tips .5s linear forwards;
}
.tip_el{
border :1px solid $danger_color !important;
border-radius: 4px;
}
.tip_el:focus{
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
}
@keyframes tips{
0%{
opacity: 0;
// margin-top: -20px;
padding-left: 0;
}
100%{
opacity: 1;
// margin-top: 0;
padding-left: 10px;
}
}
全局引入
main.js
//全局注册input验证
import './assets/js/directive.js'
使用方式
//鼠标离开时验证
<a-input size="large" placeholder="用户名" v-model="username" v-validate="'required'"/>
<a-input-password size="large" placeholder="登录密码" v-model="password" @blur="blurPwd" v-validate="'required|pwd'"/>
//提交验证
//将@click替换成v-checkSubmit，并将submitBtn实践传过去
//只有一个验证
<a-button type="primary" size="large" v-checkSubmit="submitBtn"> 提交 </a-button>
//如果有多个提交按钮，为了不让多个按钮冲突需要多传一个class参数
//submitEvent:事件名称
//cls：需要检测的class名下的input
<a-button type="primary" size="large" v-checkSubmit="{submitEvent:okBtn,cls:'popup_check_input'}" >提交 </a-button>
参考资料：# vue 自定义指令input表单的数据验证
在此，抱拳感谢~
转载请著名出处~
-----*13
网友评论