使用JavaScript和HTML5實(shí)現(xiàn)表單驗(yàn)證功能
HTML5 內(nèi)置驗(yàn)證
HTML5 提供了一些內(nèi)置的表單驗(yàn)證功能，例如 required, min, max, pattern 等。這些屬性可以簡單地添加到表單元素中，以實(shí)現(xiàn)基本的驗(yàn)證。
<form> <label for="username">用戶名:</label> <input type="text" id="username" name="username" required minlength="3" maxlength="20"> <label for="email">郵箱:</label> <input type="email" id="email" name="email" required> <label for="password">密碼:</label> <input type="password" id="password" name="password" required minlength="8"> <input type="submit" value="提交"> </form>
在這個例子中，required 屬性確保字段不能為空，minlength 和 maxlength 屬性限制了用戶名的長度，type="email" 確保輸入的郵箱地址格式正確。
JavaScript 自定義驗(yàn)證
雖然 HTML5 提供了基本的驗(yàn)證功能，但在某些情況下，我們需要更復(fù)雜的驗(yàn)證邏輯。這時，可以使用 JavaScript 編寫自定義的驗(yàn)證邏輯。
<form id="myForm">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username">
<label for="email">郵箱:</label>
<input type="email" id="email" name="email">
<label for="password">密碼:</label>
<input type="password" id="password" name="password">
<input type="submit" value="提交">
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單提交
let username = document.getElementById('username').value;
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
if (username.length < 3 || username.length > 20) {
alert('用戶名必須在 3 到 20 個字符之間');
return;
}
if (!validateEmail(email)) {
alert('請輸入有效的郵箱地址');
return;
}
if (password.length < 8) {
alert('密碼必須至少 8 個字符');
return;
}
// 如果所有驗(yàn)證都通過，可以提交表單
alert('表單驗(yàn)證通過，可以提交表單');
// this.submit(); // 如果需要提交表單，可以取消注釋這行
});
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}
</script>在這個例子中，我們使用 JavaScript 監(jiān)聽表單的 submit 事件，并在事件處理函數(shù)中進(jìn)行自定義驗(yàn)證。如果驗(yàn)證失敗，阻止表單提交并顯示錯誤提示。
使用正則表達(dá)式進(jìn)行驗(yàn)證
正則表達(dá)式是驗(yàn)證字符串格式的強(qiáng)大工具。例如，驗(yàn)證郵箱、電話號碼等。
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}
function validatePhone(phone) {
const re = /^\d{10}$/;
return re.test(String(phone));
}使用表單驗(yàn)證 API
HTML5 提供了一些內(nèi)置的表單驗(yàn)證 API，這些 API 可以幫助你更容易地實(shí)現(xiàn)表單驗(yàn)證。
checkValidity()
checkValidity() 方法用于檢查表單或表單元素是否滿足所有的約束條件。如果滿足，返回 true，否則返回 false。
let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault();
alert('請?zhí)顚懰斜靥钭侄?);
}
});reportValidity()
reportValidity() 方法與 checkValidity() 類似，但它會觸發(fā)瀏覽器內(nèi)置的驗(yàn)證提示，顯示錯誤信息。
let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
if (!form.reportValidity()) {
event.preventDefault();
}
});validity 對象
每個表單元素都有一個 validity 對象，它包含多個布爾屬性，用于表示不同的驗(yàn)證狀態(tài)。
let email = document.getElementById('email');
email.addEventListener('input', function() {
if (email.validity.typeMismatch) {
email.setCustomValidity('請輸入有效的郵箱地址');
} else {
email.setCustomValidity('');
}
});validity 對象的常見屬性包括：
valid: 如果元素滿足所有的約束條件，返回true。valueMissing: 如果元素是必填項(xiàng)但沒有值，返回true。typeMismatch: 如果元素的值不符合type屬性的要求（例如email或url），返回true。patternMismatch: 如果元素的值不符合pattern屬性的要求，返回true。tooLong: 如果元素的值超過了maxLength屬性的限制，返回true。tooShort: 如果元素的值少于minLength屬性的限制，返回true。rangeUnderflow: 如果元素的值小于min屬性的值，返回true。rangeOverflow: 如果元素的值大于max屬性的值，返回true。stepMismatch: 如果元素的值不符合step屬性的要求，返回true。badInput: 如果瀏覽器無法將用戶的輸入轉(zhuǎn)換為有效的值（例如在number輸入框中輸入了非數(shù)字字符），返回true。customError: 如果元素設(shè)置了自定義的驗(yàn)證錯誤信息，返回true。
validationMessage 屬性
validationMessage 屬性返回當(dāng)前表單元素的驗(yàn)證錯誤信息。如果元素沒有錯誤，返回空字符串。
let email = document.getElementById('email');
email.addEventListener('input', function() {
if (!email.checkValidity()) {
console.log(email.validationMessage);
}
});使用第三方庫
有許多第三方庫可以簡化表單驗(yàn)證的過程，例如：
Validator.js: 一個簡單易用的字符串驗(yàn)證庫。
Joi: 一個強(qiáng)大的數(shù)據(jù)驗(yàn)證庫，適用于復(fù)雜的驗(yàn)證場景。
Yup: 一個用于對象模式驗(yàn)證的庫，常用于表單驗(yàn)證。
// 使用 Yup 進(jìn)行表單驗(yàn)證
const yup = require('yup');
const schema = yup.object().shape({
username: yup.string().min(3).max(20).required(),
email: yup.string().email().required(),
password: yup.string().min(8).required(),
});
schema.validate({
username: 'john',
email: 'john@example.com',
password: 'password123'
}).then(function(valid) {
console.log('Valid');
}).catch(function(err) {
console.log(err.errors);
});實(shí)時驗(yàn)證
你可以在用戶輸入時實(shí)時驗(yàn)證表單字段，提供即時反饋。
<form id="myForm">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username">
<span id="usernameError" style="color:red;"></span>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email">
<span id="emailError" style="color:red;"></span>
<label for="password">密碼:</label>
<input type="password" id="password" name="password">
<span id="passwordError" style="color:red;"></span>
<input type="submit" value="提交">
</form>
<script>
document.getElementById('username').addEventListener('input', function() {
let username = this.value;
let errorSpan = document.getElementById('usernameError');
if (username.length < 3 || username.length > 20) {
errorSpan.textContent = '用戶名必須在 3 到 20 個字符之間';
} else {
errorSpan.textContent = '';
}
});
document.getElementById('email').addEventListener('input', function() {
let email = this.value;
let errorSpan = document.getElementById('emailError');
if (!validateEmail(email)) {
errorSpan.textContent = '請輸入有效的郵箱地址';
} else {
errorSpan.textContent = '';
}
});
document.getElementById('password').addEventListener('input', function() {
let password = this.value;
let errorSpan = document.getElementById('passwordError');
if (password.length < 8) {
errorSpan.textContent = '密碼必須至少 8 個字符';
} else {
errorSpan.textContent = '';
}
});
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}
</script>總結(jié)
通過結(jié)合 HTML5 內(nèi)置驗(yàn)證、JavaScript 自定義驗(yàn)證、正則表達(dá)式和表單驗(yàn)證 API，你可以創(chuàng)建強(qiáng)大且用戶友好的表單驗(yàn)證機(jī)制。記住，客戶端驗(yàn)證不能替代服務(wù)器端驗(yàn)證，兩者應(yīng)該結(jié)合使用以確保數(shù)據(jù)的安全性和完整性。希望本文能幫助你更好地理解和實(shí)現(xiàn)表單驗(yàn)證。
以上就是使用JavaScript和HTML5實(shí)現(xiàn)表單驗(yàn)證功能的詳細(xì)內(nèi)容，更多關(guān)于JavaScript HTML5表單驗(yàn)證的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
今天小編就為大家分享一篇layui框架與SSM前后臺交互的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本文主要介紹了基于canvas的二維碼邀請函生成插件。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
javascript定義類和類的實(shí)現(xiàn)實(shí)例詳解
這篇文章主要介紹了javascript定義類和類的實(shí)現(xiàn),結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript類的定義方式與相關(guān)使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
本文給大家簡單介紹了JS瀏覽器的三種彈窗，簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
使用UrlConnection實(shí)現(xiàn)后臺模擬http請求的簡單實(shí)例
這篇文章主要介紹了使用UrlConnection實(shí)現(xiàn)后臺模擬http請求的簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01
JavaScript 異步調(diào)用框架 (Part 6 - 實(shí)例 & 模式)
我們用了5篇文章來討論如何編寫一個JavaScript異步調(diào)用框架（問題 & 場景、用例設(shè)計、代碼實(shí)現(xiàn)、鏈?zhǔn)秸{(diào)用、鏈?zhǔn)綄?shí)現(xiàn)），現(xiàn)在是時候讓我們看一下在各種常見開發(fā)情景中如何使用它了。2009-08-08
這篇文章主要為大家介紹了Rxjs tap 操作符的使用場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
本篇文章主要介紹了動畫插件wow.js的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了js身份證判斷方法支持15位和18位,需要的朋友可以參考下2014-03-03
javascript使用alert實(shí)現(xiàn)一個精美的彈窗
其實(shí)最初使用alert還是一個常態(tài)，包括現(xiàn)在很多B端平臺還在直接使用alert，本文主要介紹了javascript使用alert實(shí)現(xiàn)一個精美的彈窗，感興趣的可以了解一下2023-02-02