HTML部分：

<!-- 避免表單在點擊按鈕的時候頁面刷新無法執行JS的問題出現,我們在 action 里面編寫一個地址，這個地址是防止跳轉的; 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>重復密碼:<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')

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

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

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

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

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

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

添加事件監聽：

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

郵箱驗證的函數：

//郵箱帳號驗證函數function validateEamil() {//獲取輸入框的文本內容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.?位數驗證?;?

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

????????????//?這種存在多個規則驗證的核心在于一個驗證沒有通過的情況下不繼續執行下一個驗證;?

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

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

重復密碼驗證函數：

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');}}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。