通常情況下，表單驗(yàn)證是校驗(yàn)?zāi)_本的主要應(yīng)用場景之一。我們可以借助 JavaScript 實(shí)現(xiàn)各種校驗(yàn)規(guī)則，例如：郵箱格式、手機(jī)號碼格式、密碼強(qiáng)度等等。下面是一個(gè)簡單的例子：
<form>
<input type="text" id="email" placeholder="請輸入郵箱">
<button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('form');
const email = document.querySelector('#email');
form.onsubmit = function() {
if (!email.value.match(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)) {
alert('郵箱格式不正確！');
return false;
}
return true;
}
</script>上面的代碼實(shí)現(xiàn)了一個(gè)表單驗(yàn)證的功能，如果用戶輸入的郵箱不符合正則表達(dá)式中的規(guī)則，就會(huì)彈出警告框并阻止表單的提交。這種方式雖然簡單，但已經(jīng)足夠滿足日常業(yè)務(wù)需求了。
除了表單驗(yàn)證之外，JavaScript 校驗(yàn)?zāi)_本還可以用來檢查頁面元素的狀態(tài)，例如文本框是否為空、復(fù)選框是否選中等等。下面是一個(gè)實(shí)例：
<input type="text" id="username" placeholder="請輸入用戶名">
<button onclick="checkUsername()">檢查用戶名</button>
<script>
function checkUsername() {
const username = document.querySelector('#username');
if (username.value.trim() === '') {
alert('用戶名不能為空！');
} else {
alert('用戶名合法！');
}
}
</script>不難發(fā)現(xiàn)，這段代碼利用了 trim 方法剔除用戶輸入的空格，然后再判斷是否為空。如果為空則提示 “用戶名不能為空！”錯(cuò)誤信息，反之則提示 “用戶名合法！”信息。
最后，我們要注意到一個(gè)問題，就是對于一些用戶輸入較多的頁面，使用純 JavaScript 實(shí)現(xiàn)表單驗(yàn)證可能會(huì)相對麻煩。為了解決這個(gè)問題，我們可以使用一些現(xiàn)成的框架來幫助我們管理表單校驗(yàn)邏輯。例如 jQuery Validation、VeeValidate 等等，這些框架都可以異步校驗(yàn)并顯示驗(yàn)證結(jié)果等等更節(jié)省時(shí)間的功能。
綜上所述，JavaScript 校驗(yàn)?zāi)_本是實(shí)現(xiàn)表單驗(yàn)證、狀態(tài)檢測等操作的重要工具，可以幫助我們確保用戶輸入的數(shù)據(jù)符合要求。無論是使用原生 JavaScript，還是使用現(xiàn)成的框架，都需要結(jié)合業(yè)務(wù)需求合理使用。