HTML部分：

<!-- 避免表單在點擊按鈕的時候頁面刷新無法執(zhí)行JS的問題出現(xiàn),我們在 action 里面編寫一個地址，這個地址是防止跳轉(zhuǎn)的; action="javascript:void(0)"-->

<form action="javascript:void(0)" id="login"><p>賬號:&emsp;&emsp;<input type="text" id="email"><span>提示</span></p><p>密碼:&emsp;&emsp;<input type="text" id="pwd"><span>提示</span></p><p>重復(fù)密碼:<input type="text" id="rpwd"><span>提示</span></p><button id="login-btn">登錄</button></form>

CSS部分：

<style>#login span {display: none;font-size: 14px;font-weight: bold;</style>

dom選擇器獲取ID

var email = document.getElementById('email'); var pwd = document.getElementById('pwd'); var rpwd = document.getElementById('rpwd'); var btn = document.getElementById('login-btn')

//?表單驗證都是在輸入框失去焦點的時候進行驗證

?????????//?登錄驗證?:?

????????//?-?當我們所有的元素都通過驗證了我們就可以進行登錄操作了;

????????//?-?否則哪里沒通過驗證就讓哪里有焦點，重新輸入;

????????//?-?當一個元素通過驗證，我們給元素一個標記;

????????//?-?在提交之前判定所有的元素是否都有標記，如果沒有就終止提交;?

添加事件監(jiān)聽：

email.addEventListener('blur', validateEamil);pwd.addEventListener('blur', validatePwd);rpwd.addEventListener('blur', validateRpwd);btn.addEventListener('click', isLogin)

郵箱驗證的函數(shù)：

//郵箱帳號驗證函數(shù)function validateEamil() {//獲取輸入框的文本內(nèi)容var text = email.value;//找到tip提示元素var tip = email.nextElementSibling;//編寫正則進行匹配var reg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;if (reg.test(text)) {//如果正確// 邊框標注綠色email.style.borderColor = 'green';//隱藏tiptip.style.display = 'none';//驗證標志位email.validate = true;} else {// 如果錯誤// 邊框標注紅色email.style.borderColor = 'red';// 提示文本tip.innerHTML = '請輸入正確的郵箱地址';//顯示tiptip.style.display = 'block';email.validate = false;}}

//?密碼驗證?:?

????????????//?-?1.?位數(shù)驗證?;?

????????????//?-?2.?密碼強度驗證?;?

????????????//?這種存在多個規(guī)則驗證的核心在于一個驗證沒有通過的情況下不繼續(xù)執(zhí)行下一個驗證;?

????????????//??-?驗證失敗就使用?return?跳出程序;?

function validatePwd() {var text = pwd.value;// 找到tip提示元素var tip = pwd.nextElementSibling;// 查看位數(shù)是否6-20位var reg_count = /^.{6,20}$/if (!reg_count.test(text)) {// 提示tip.innerHTML = "密碼的長度應(yīng)該是 6~20位之間，請輸入正確位數(shù)的密碼";//顯示tiptip.style.display = 'block';pwd.style.borderColor = "red";tip.style.color = 'red';pwd.validate = false;return false;} else {tip.style.display = 'none';}// 繼續(xù)驗證 : // - 如何判定密碼強度 : // - 低 : 只有 數(shù)字 | 字母 | 字符串其中之一組成密碼// - 中 : 有 數(shù)字 | 字母 | 字符串其中之二組成密碼// - 高 : 有 數(shù)字 | 字母 | 字符串三者功能組成的密碼var strength = 0;if (/\d/.test(text)) {strength++;}if (/[a-zA-Z]/.test(text)) {strength++;}if (/[\!@#\$%\^&\*\(\)_\+]/.test(text)) {strength++;} // 根據(jù) strength 數(shù)值判定密碼強度; switch (strength) {case 1:// pwd.focus();tip.innerHTML = "密碼強度較低，建議使用數(shù)字字母特殊符號組合密碼";tip.style.color = 'red';tip.style.display = 'block';pwd.validate = false;break;case 2:tip.innerHTML = "密碼強度中等，建議使用更高強度的密碼";tip.style.color = "orange";tip.style.display = 'block';pwd.validate = true;break;case 3:tip.style.display = "none";pwd.style.borderColor = "green";tip.style.display = 'block';pwd.validate = true;break;}}

重復(fù)密碼驗證函數(shù)：

function validateRpwd() {var tip = rpwd.nextElementSibling;if (pwd.value === rpwd.value) {rpwd.style.borderColor = 'green';tip.style.display = "none";rpwd.validate = true;} else {tip.style.display = "block";tip.innerHTML = '請再次輸入相同的密碼'tip.style.color = 'red';rpwd.validate = false;}}

登錄驗證

function isLogin() {if (!email.validate) {email.focus();return;} else if (!pwd.validate) {pwd.focus();return;} else if (!rpwd.validate) {rpwd.focus();return;} else {alert('yes');}}

總結(jié)

以上是生活随笔為你收集整理的JS中的表单验证。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。