使用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>
在這個(gè)例子中，required 屬性確保字段不能為空，minlength 和 maxlength 屬性限制了用戶名的長度，type="email" 確保輸入的郵箱地址格式正確。
JavaScript 自定義驗(yàn)證
雖然 HTML5 提供了基本的驗(yàn)證功能，但在某些情況下，我們需要更復(fù)雜的驗(yàn)證邏輯。這時(shí)，可以使用 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 個(gè)字符之間');
return;
}
if (!validateEmail(email)) {
alert('請輸入有效的郵箱地址');
return;
}
if (password.length < 8) {
alert('密碼必須至少 8 個(gè)字符');
return;
}
// 如果所有驗(yàn)證都通過，可以提交表單
alert('表單驗(yàn)證通過，可以提交表單');
// this.submit(); // 如果需要提交表單，可以取消注釋這行
});
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}
</script>在這個(gè)例子中，我們使用 JavaScript 監(jiān)聽表單的 submit 事件，并在事件處理函數(shù)中進(jìn)行自定義驗(yàn)證。如果驗(yàn)證失敗，阻止表單提交并顯示錯(cuò)誤提示。
使用正則表達(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)證提示，顯示錯(cuò)誤信息。
let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
if (!form.reportValidity()) {
event.preventDefault();
}
});validity 對象
每個(gè)表單元素都有一個(gè) validity 對象，它包含多個(gè)布爾屬性，用于表示不同的驗(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)證錯(cuò)誤信息，返回true。
validationMessage 屬性
validationMessage 屬性返回當(dāng)前表單元素的驗(yàn)證錯(cuò)誤信息。如果元素沒有錯(cuò)誤，返回空字符串。
let email = document.getElementById('email');
email.addEventListener('input', function() {
if (!email.checkValidity()) {
console.log(email.validationMessage);
}
});使用第三方庫
有許多第三方庫可以簡化表單驗(yàn)證的過程，例如：
Validator.js: 一個(gè)簡單易用的字符串驗(yàn)證庫。
Joi: 一個(gè)強(qiáng)大的數(shù)據(jù)驗(yàn)證庫，適用于復(fù)雜的驗(yàn)證場景。
Yup: 一個(gè)用于對象模式驗(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í)時(shí)驗(yàn)證
你可以在用戶輸入時(shí)實(shí)時(shí)驗(yàn)證表單字段，提供即時(shí)反饋。
<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 個(gè)字符之間';
} 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 個(gè)字符';
} 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)文章
javascript 動態(tài)改變onclick事件觸發(fā)函數(shù)代碼
javascript 動態(tài)改變onclick事件觸發(fā)函數(shù)代碼，需要的朋友可以參考下。2011-08-08
layui問題之模擬select點(diǎn)擊事件的實(shí)例講解
今天小編就為大家分享一篇layui問題之模擬select點(diǎn)擊事件的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)密碼輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)全選和全不選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
JavaScript實(shí)現(xiàn)垂直向上無縫滾動特效代碼
下面小編就為大家?guī)硪黄狫avaScript實(shí)現(xiàn)垂直向上無縫滾動特效代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JavaScript計(jì)算字符串中特定字符出現(xiàn)次數(shù)的實(shí)例詳解
在JavaScript編程中,經(jīng)常會遇到需要計(jì)算字符串中特定字符出現(xiàn)次數(shù)的情況,在本文中,我將分享兩個(gè)簡單的JavaScript函數(shù),用于計(jì)算字符串中特定字符出現(xiàn)的次數(shù),需要的朋友可以參考下2023-11-11
Bootstrap 模態(tài)框（Modal）帶參數(shù)傳值實(shí)例
模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。下面通過本文給大家介紹Bootstrap 模態(tài)框（Modal）帶參數(shù)傳值實(shí)例代碼，需要的朋友參考下吧2017-08-08
這篇文章主要介紹了如何捕獲和分析 JavaScript Error，感興趣的朋友可以參考下2014-03-03
JavaScript設(shè)計(jì)模式之命令模式實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之命令模式,結(jié)合實(shí)例形式分析了javascript命令模式的概念、原理、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-01-01
JavaScript中Array對象用法實(shí)例總結(jié)
這篇文章主要介紹了JavaScript中Array對象用法,結(jié)合實(shí)例形式總結(jié)分析了Array數(shù)組對象的常用屬性與方法的功能與相關(guān)使用技巧,需要的朋友可以參考下2016-11-11