html表單驗證用JS攔截提交并檢查數(shù)據(jù)，1.獲取表單和輸入元素；2.添加submit事件監(jiān)聽器；3.驗證郵箱和密碼格式；4.失敗則阻止提交并提示錯誤；5.使用正則表達式校驗復(fù)雜規(guī)則；6.通過input事件實現(xiàn)即時驗證；7.異步驗證需用fetch api結(jié)合blur事件減少請求頻率；8.優(yōu)化體驗包括即時反饋、清晰提示、避免頻繁驗證、提升無障礙性。
HTML表單驗證，用JS來搞定，核心就是攔截表單提交，然后用各種JS技巧來檢查用戶輸入的數(shù)據(jù)是否符合預(yù)期。比如，是不是填了必填項，郵箱格式對不對，密碼強度夠不夠等等。如果驗證沒通過，就阻止表單提交，給用戶一個友好的提示。
解決方案
首先，你需要獲取表單元素和需要驗證的輸入元素。這可以用document.getElementById 或者 document.querySelector來實現(xiàn)。
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
<form id="myForm"> <label for="email">郵箱:</label> <input type="email" id="email" name="email"> <span id="emailError" style="color: red;"></span><br><br> <label for="password">密碼:</label> <input type="password" id="password" name="password"> <span id="passwordError" style="color: red;"></span><br><br> <button type="submit">提交</button> </form> <script> const form = document.getElementById('myForm'); const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); const emailError = document.getElementById('emailError'); const passwordError = document.getElementById('passwordError'); form.addEventListener('submit', function(event) { let isValid = true; // 郵箱驗證 if (!validateEmail(emailInput.value)) { emailError.textContent = '郵箱格式不正確'; isValid = false; event.preventDefault(); // 阻止表單提交 } else { emailError.textContent = ''; } // 密碼驗證 (假設(shè)密碼至少8位) if (passwordInput.value.length < 8) { passwordError.textContent = '密碼至少需要8位'; isValid = false; event.preventDefault(); // 阻止表單提交 } else { passwordError.textContent = ''; } if (!isValid) { event.preventDefault(); // 確保如果之前有錯誤，仍然阻止提交 } }); function validateEmail(email) { const re = /^[^s@]+@[^s@]+.[^s@]+$/; return re.test(email); } </script>
這段代碼做了這些事情：
- 獲取了表單和輸入框元素。
- 給表單添加了一個submit事件監(jiān)聽器。
- 在提交的時候，先驗證郵箱和密碼。
- 如果驗證失敗，就顯示錯誤信息，并阻止表單提交。
- validateEmail函數(shù)使用正則表達式來驗證郵箱格式。
如何使用input事件進行實時驗證？
input事件會在輸入框的值發(fā)生變化時觸發(fā)。你可以利用它來實時驗證用戶的輸入，提供即時反饋。
<input type="text" id="username" name="username"> <span id="usernameError" style="color: red;"></span> <script> const usernameInput = document.getElementById('username'); const usernameError = document.getElementById('usernameError'); usernameInput.addEventListener('input', function(event) { const username = event.target.value; if (username.length < 3) { usernameError.textContent = '用戶名至少需要3個字符'; } else { usernameError.textContent = ''; } }); </script>
這段代碼監(jiān)聽了username輸入框的input事件。當(dāng)用戶輸入內(nèi)容時，會立即檢查用戶名長度，并顯示相應(yīng)的錯誤信息。
如何使用正則表達式進行更復(fù)雜的驗證？
正則表達式是進行復(fù)雜字符串匹配的利器。上面郵箱驗證就是一個例子。 再舉個例子，驗證手機號碼：
function validatePhoneNumber(phoneNumber) { const re = /^1[3456789]d{9}$/; // 中國大陸手機號碼 return re.test(phoneNumber); }
這個正則表達式^1[3456789]d{9}$的含義是：
- ^: 匹配字符串的開頭。
- 1: 必須以1開頭。
- [3456789]: 第二位可以是3、4、5、6、7、8、9中的任意一個數(shù)字。
- d{9}: 后面跟著9個數(shù)字。
- $: 匹配字符串的結(jié)尾。
如何處理異步驗證，比如檢查用戶名是否已存在？
有時候，你需要向服務(wù)器發(fā)送請求來驗證數(shù)據(jù)，比如檢查用戶名是否已經(jīng)被注冊。這需要用到異步操作。
<input type="text" id="username" name="username"> <span id="usernameError" style="color: red;"></span> <script> const usernameInput = document.getElementById('username'); const usernameError = document.getElementById('usernameError'); usernameInput.addEventListener('blur', async function(event) { // 使用 blur 事件，在失去焦點時驗證 const username = event.target.value; try { const response = await fetch(`/api/checkUsername?username=${username}`); // 假設(shè)后端接口是 /api/checkUsername const data = await response.json(); if (data.exists) { usernameError.textContent = '用戶名已存在'; } else { usernameError.textContent = ''; } } catch (error) { console.error('Error checking username:', error); usernameError.textContent = '驗證失敗，請稍后再試'; } }); </script>
這段代碼使用了fetch API來向后端發(fā)送請求，檢查用戶名是否存在。注意，這里使用了async/await語法，讓異步代碼看起來更像同步代碼。 另外，使用了blur事件，在輸入框失去焦點時才進行驗證，避免頻繁請求。
如何優(yōu)化表單驗證的用戶體驗？
- 即時反饋： 使用input事件提供即時驗證反饋。
- 清晰的錯誤提示： 錯誤信息要明確指出問題所在。
- 避免過度驗證： 不要在用戶輸入時過于嚴(yán)格地驗證，可以等到用戶完成輸入后再進行驗證。
- 無障礙性： 確保驗證信息對屏幕閱讀器等輔助技術(shù)友好。可以使用ARIA屬性來增強無障礙性。
- 表單聚焦： 當(dāng)驗證失敗時，將焦點設(shè)置到第一個錯誤的輸入框。
例如，使用ARIA屬性：
<input type="email" id="email" name="email" aria-describedby="emailHelp"> <small id="emailHelp" class="form-text text-muted">請輸入您的郵箱地址。</small> <span id="emailError" role="alert" style="color: red;"></span>
aria-describedby 關(guān)聯(lián)輸入框和描述信息，role=”alert” 告訴屏幕閱讀器這是一個警告信息。
