一、代碼
<template>
<div class="check" >
<h3>{{msg}}</h3>
<div class="input">
<input type="text" v-input v-focus><span>{{msg1}}</span>
</div>
<div class="input">
<input type="text" v-input v-required><span>{{msg2}}</span>
</div>
<div class="input">
<!-- required：true/false 表示這個是必填項 -->
<input type="text" v-input v-checked="{required:true,}"><span>{{msg3}}</span>
</div>
<div class="input">
<!-- <input type="text" v-input v-validate="'required|email|phone|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'">
required 驗證是否是必填項
email 驗證是否是郵箱
phone 驗證是否是電話號碼
min(5) 驗證最小值
max(3) 驗證最大值
minlength(6) 驗證最小長度
maxlength(12) 驗證最大長度
regex(/^[0-9]*$/) 進行正則驗證
-->
<input type="text" v-input
v-validate="'required|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'" placeholder="多選驗證">
</div>
<div class="input">
<!--
驗證必須是數字：/^[0-9]*$/
驗證由26個英文字母組成的字符串：/^[A-Za-z]+$/
驗證手機號： /^[1][3,4,5,7,8][0-9]{9}$/;
驗證郵箱：/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
-->
<input type="text" v-input v-validate="'required|phone'" placeholder="驗證手機號碼">
</div>
<div class="input">
<input type="text" v-input v-validate="'required|email'" placeholder="驗證郵箱">
</div>
</div>
</template>
<script>
export default {
name: 'check',
data() {
return {
msg: '指令',
tipsBorderColor: 'red',
msg1: '最簡單的指令',
msg2: '驗證不能為空的指令',
msg3: '進行正則驗證',
tipsMsg: '',
}
},
directives: {
// 修飾input框的指令
input: {
// 當被綁定的元素插入到DOM上的時候
inserted: function (el) {
el.style.width = "300px";
el.style.height = "35px";
el.style.lineHeight = "35px";
el.style.background = "#ddd";
el.style.fontSize = "16px";
el.style.border = "1px solid #eee";
el.style.textIndent = "5px";
el.style.textIndent = "8px";
el.style.borderRadius = "5px";
}
},
// input框默認選中的指令
focus: {
inserted: function (el) {
el.focus();
}
},
// 不能為空的指令
required: {
inserted: function (el) {
el.addEventListener('blur', function () {
if (el.value == '' || el.value == null) {
el.style.border = "1px solid red";
console.log('我不能為空');
}
})
}
},
// 驗證指令
checked: {
inserted: function (el) {
return el
}
},
// 驗證
validate: {
inserted: function (el, validateStr) {
// 將驗證規則拆分為驗證數組
let validateRuleArr = validateStr.value.split("|");
// 監聽失去焦點的時候
el.addEventListener('blur', function () {
//失去焦點進行驗證
checkedfun();
});
// 循環進行驗證
function checkedfun() {
for (var i = 0; i < validateRuleArr.length; ++i) {
let requiredRegex = /^required$/; // 判斷設置了required
let emailRegex = /^email$/; // 判斷設置了email
let phoneRegex = /^phone$/; // 判斷設置了 phone
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();
}
}
// 判斷是否設置了最小值
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 (el.value == '' || el.value == null) {
// console.log("不能為空");
tipMsg("不能為空");
return false;
}
return true;
}
// 驗證是否是郵箱
function email() {
let emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if (!emailRule.test(el.value)) {
tipMsg("請輸入正確的郵箱地址");
return false;
}
return true;
}
// 驗證是否是手機號碼
function phone() {
let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!phoneRule.test(el.value)) {
tipMsg("請輸入正確的手機號碼");
return false;
}
return true;
}
// 最小值驗證
function min(num) {
if (el.value < num) {
tipMsg("最小值不能小於" + num);
//console.log('最小值不能小於'+num);
return false;
}
return true;
}
// 最大值驗證
function max(num) {
if (el.value > num) {
tipMsg("最大值不能大於" + num);
//console.log('最大值不能大於'+num);
return false;
}
return true;
}
// 最小長度驗證
function minlength(length) {
if (el.value.length < length) {
//console.log('最小長度不能小於'+length);
tipMsg("最小長度不能小於" + length);
return false;
}
return true;
}
// 最大長度進行驗證
function maxlength(length) {
if (el.value.length > length) {
//console.log('最大長度不能大於'+length);
tipMsg("最大長度不能大於" + length);
return false;
}
return true;
}
// 進行正則表達式的驗證
function regex(rules) {
if (!rules.test(el.value)) {
tipMsg("請輸入正確的格式");
return false;
}
return true;
}
// 添加提示信息
function tipMsg(msg) {
removeTips();
let tipsDiv = document.createElement('div');
let curDate = Date.parse(new Date());
tipsDiv.innerText = msg;
tipsDiv.className = "tipsDiv";
tipsDiv.id = curDate;
tipsDiv.style.position = "absolute";
tipsDiv.style.top = el.offsetTop + 45 + 'px';
tipsDiv.style.left = el.offsetLeft + 'px';
document.body.appendChild(tipsDiv);
//setTimeout(function(){
// document.getElementById(curDate).remove();
//},2000);
}
// 移除提示信息
function removeTips() {
if (document.getElementsByClassName('tipsDiv')[0]) {
document.getElementsByClassName('tipsDiv')[0].remove();
}
}
},
}
}
}
</script>
<style>
.input {
padding-bottom: 20px;
float: left;
clear: both;
margin-left: 500px;
display: block;
}
.check input {
width: 300px;
height: 35px;
outline: none;
background: #ddd;
}
.check span {
padding-left: 20px;
}
.tipsDiv {
height: 27px;
line-height: 25px;
border: 1px solid #333;
background: #333;
padding: 0px 5px;
border-radius: 4px;
color: #fff;
font-size: 16px;
}
.tipsDiv:before {
content: '';
display: block;
border-width: 0 5px 8px;
border-style: solid;
border-color: transparent transparent #000;
position: absolute;
top: -9px;
left: 6px;
}
</style>