表單驗(yàn)證是數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中輸入數(shù)據(jù)進(jìn)行驗(yàn)證。
表單驗(yàn)證是前端Javascript重要功能之一宝泵。是網(wǎng)頁(yè)中不可缺少的重要部分。輸入框的表單驗(yàn)證是表單驗(yàn)證中的最重要部分轩娶。文本框儿奶、密碼框、文本域這些控件的驗(yàn)證方式完全一致鳄抒，下面以一個(gè)文本框作為例子闯捎，演示輸入框的驗(yàn)證方式椰弊。
1. 基礎(chǔ)版
單擊提交按鈕時(shí)進(jìn)行驗(yàn)證，是最簡(jiǎn)單最直接的驗(yàn)證方式瓤鼻。下面是這種驗(yàn)證的實(shí)現(xiàn)方式秉版。
1.1 基本結(jié)構(gòu)
- HTML代碼
<form action="#">
<input id="txt_submit" type="text" name="test" placeholder="請(qǐng)輸入6~10個(gè)字符的中文"><span id="msg"></span>
<button id="btn_submit" type="submit">提交</button>
</form>
沒(méi)有真實(shí)提交的URL，暫時(shí)使用#代替茬祷。
表單三要素
- 表單
form(必須指定屬性action,必要時(shí)指定屬性method) - 輸入
input/select/textarea - 提交按鈕
submit
- JS基本框架
Javascript必備結(jié)構(gòu)
// HTML文檔加載完成后執(zhí)行JS代碼
window.onload = function() {
// JS代碼到此為止
};
1.2 驗(yàn)證處理
- 獲取相關(guān)的元素DOM對(duì)象
// 獲取輸入框
var txt_submit = document.getElementById("txt_submit");
// 獲取提交按鈕
var btn_submit = document.getElementById("btn_submit");
// 獲取信息span
var msg = document.getElementById("msg");
- 給提交按鈕添加單擊事件清焕，并且在事件中驗(yàn)證輸入框的值。
btn_submit.onclick = function() {
// 獲取文本內(nèi)容
var strText = txt_submit.value;
// 必填項(xiàng)驗(yàn)證
if ("" == strText) {
msg.innerHTML = "該輸入項(xiàng)不能為空";
return false;
}
// 最小長(zhǎng)度驗(yàn)證
if (strText.length < 6) {
msg.innerHTML = "輸入長(zhǎng)度不能小于6";
return false;
}
// 最大長(zhǎng)度驗(yàn)證
if (strText.length > 10) {
msg.innerHTML = "輸入長(zhǎng)度不能大于10";
return false;
}
// 漢字驗(yàn)證
if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
msg.innerHTML = "必須輸入漢字";
return false;
}
// 錯(cuò)誤信息清空
msg.innerHTML = "";
return true;
};
2. 升級(jí)版
現(xiàn)在很多驗(yàn)證不止在提交按鈕時(shí)進(jìn)行祭犯，在輸入框輸入時(shí)實(shí)時(shí)驗(yàn)證耐朴，我們把上面的版本升級(jí)一下。
- 把輸入框的驗(yàn)證單獨(dú)做成一個(gè)有名字的函數(shù)盹憎。
// 輸入框驗(yàn)證
function check() {
// 獲取文本內(nèi)容
var strText = txt_submit.value;
// 必填項(xiàng)驗(yàn)證
if ("" == strText) {
msg.innerHTML = "該輸入項(xiàng)不能為空";
return false;
}
// 最小長(zhǎng)度驗(yàn)證
if (strText.length < 6) {
msg.innerHTML = "輸入長(zhǎng)度不能小于6";
return false;
}
// 最大長(zhǎng)度驗(yàn)證
if (strText.length > 10) {
msg.innerHTML = "輸入長(zhǎng)度不能大于10";
return false;
}
// 漢字驗(yàn)證
if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
msg.innerHTML = "必須輸入漢字";
return false;
}
// 錯(cuò)誤信息清空
msg.innerHTML = "";
return true;
};
- 把函數(shù)的名字分別賦給提交按鈕的單擊事件和輸入框的鍵盤(pán)事件。
btn_submit.onclick = check;
txt_submit.onkeyup = check;
以上兩步升級(jí)大功告成铐刘。
友情提示
上面的兩份代碼代碼使用對(duì)比工具對(duì)比陪每，能夠清晰看出二者差異。
如有任何疑問(wèn)镰吵，歡迎下面留言
