代碼如下：

<!--登錄表單區(qū)域--> <el-form :model='loginForm' label- :rules='loginFormRules'> <!--用戶名--> <el-form-item prop='username'> <el-input v-model='loginForm.username' prefix-icon='el-icon-user'></el-input> </el-form-item> <!--密碼--> <el-form-item prop='password'> <el-input v-model='loginForm.password' prefix-icon='el-icon-lock' type='password'></el-input> </el-form-item> <!--按鈕區(qū)域--> <el-form-item class='btns'> <el-button type='primary'>登錄</el-button> <el-button type='info'>重置</el-button> </el-form-item> </el-form><script> export default{ data(){ return { //登錄表單數(shù)據(jù)綁定對象 loginForm:{ username:’’, password:’’ }, //表單驗證規(guī)則 loginFormRules:{ //驗證用戶名是否合法 username:[ { required: true, message: ’請輸入用戶名’, trigger: ’blur’ }, { min: 3, max: 10, message: ’長度在 3 到 10 個字符’, trigger: ’blur’ } ], //驗證密碼是否合法 password:[ { required: true, message: ’請輸入密碼’, trigger: ’blur’ }, { min: 6, max: 15, message: ’長度在 6 到 15 個字符’, trigger: ’blur’ } ] } } } }</script>

PS：下面看下vue 自定義指令input表單的數(shù)據(jù)驗證的代碼

一、代碼

<template> <div > <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]*$/) 進(jìn)行正則驗證 --> <input type='text' v-input v-validate='’required|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)’' placeholder='多選驗證'> </div> <div class='input'> <!-- 驗證必須是數(shù)字：/^[0-9]*$/ 驗證由26個英文字母組成的字符串：/^[A-Za-z]+$/ 驗證手機(jī)號： /^[1][3,4,5,7,8][0-9]{9}$/; 驗證郵箱：/^(w-*.*)+@(w-?)+(.w{2,})+$/; --> <input type='text' v-input v-validate='’required|phone’' placeholder='驗證手機(jī)號碼'> </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: ’進(jìn)行正則驗證’,tipsMsg: ’’, } }, directives: { // 修飾input框的指令 input: {// 當(dāng)被綁定的元素插入到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框默認(rèn)選中的指令 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) { // 將驗證規(guī)則拆分為驗證數(shù)組 let validateRuleArr = validateStr.value.split('|'); // 監(jiān)聽失去焦點的時候 el.addEventListener(’blur’, function () { //失去焦點進(jìn)行驗證 checkedfun(); }); // 循環(huán)進(jìn)行驗證 function checkedfun() { for (var i = 0; i < validateRuleArr.length; ++i) { let requiredRegex = /^required$/; // 判斷設(shè)置了required let emailRegex = /^email$/; // 判斷設(shè)置了email let phoneRegex = /^phone$/; // 判斷設(shè)置了 phone let minRegex = /min(/; //判斷設(shè)置了min 最小值 let maxRegex = /max(/; //判斷設(shè)置了max 最大值 let minlengthRegex = /minlength(/; //判斷設(shè)置了 minlength 最大長度 let maxlengthRegex = /maxlength(/; //判斷設(shè)置了 maxlength 最大長度 let regexRegex = /regex(/; // 判斷設(shè)置了required if (requiredRegex.test(validateRuleArr[i])) {if (!required()) { break;} else { removeTips();} } // 判斷設(shè)置了email if (emailRegex.test(validateRuleArr[i])) {if (!email()) { break;} else { removeTips();} } // 判斷設(shè)置了 phone if (phoneRegex.test(validateRuleArr[i])) {if (!phone()) { break;} else { removeTips();} } // 判斷是否設(shè)置了最小值 if (minRegex.test(validateRuleArr[i])) {if (!eval(validateRuleArr[i])) { break;} else { removeTips();} } // 判斷是否設(shè)置了最大值 if (maxRegex.test(validateRuleArr[i])) {if (!eval(validateRuleArr[i])) { break;} else { removeTips();} } // 判斷設(shè)置了最小長度 if (minlengthRegex.test(validateRuleArr[i])) {if (!eval(validateRuleArr[i])) { break;} else { removeTips();} } // 判斷設(shè)置了最大長度 if (maxlengthRegex.test(validateRuleArr[i])) {if (!eval(validateRuleArr[i])) { break;} else { removeTips();} } // 判斷測試正則表達(dá)式 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; } // 驗證是否是手機(jī)號碼 function phone() { let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/; if (!phoneRule.test(el.value)) { tipMsg('請輸入正確的手機(jī)號碼'); 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; } // 最大長度進(jìn)行驗證 function maxlength(length) { if (el.value.length > length) { //console.log(’最大長度不能大于’+length); tipMsg('最大長度不能大于' + length); return false; } return true; } // 進(jìn)行正則表達(dá)式的驗證 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>

總結(jié)

到此這篇關(guān)于vue實現(xiàn)表單數(shù)據(jù)驗證的實例代碼的文章就介紹到這了,更多相關(guān)vue 表單數(shù)據(jù)驗證內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！