代碼如下：

<!--登錄表單區域--> <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> <!--按鈕區域--> <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 { //登錄表單數據綁定對象 loginForm:{ username:’’, password:’’ }, //表單驗證規則 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表單的數據驗證的代碼

一、代碼

<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]*$/) 進行正則驗證 --> <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>

總結

到此這篇關于vue實現表單數據驗證的實例代碼的文章就介紹到這了,更多相關vue 表單數據驗證內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！