JQuery的簡(jiǎn)潔易用使它在很多場(chǎng)合完全取代了Javascript萄传，下面演示一下JQuery實(shí)現(xiàn)表單驗(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>
- JQuery基本框架
引入JQuery庫之后，需要加上如下JQuery代碼結(jié)構(gòu)答朋。
// HTML DOM加載完成后執(zhí)行JS代碼
$(function() {
// JS代碼到此為止
});
1.2 驗(yàn)證處理
與Javascript的處理有所不同贷揽，JQuery獲取元素的方式非常簡(jiǎn)潔。所以梦碗，在獲取后通常直接添加事件禽绪。
(注意：JQuery獲取的是JQuery對(duì)象，DOM獲取是DOM對(duì)象洪规，二者是有區(qū)別的印屁，所以，屬性和方法不能混用)
$("#btn_submit").click(function() {
var strText = $("#txt_submit").val();
// 必填項(xiàng)驗(yàn)證
if ("" == strText) {
$("#msg").html("該輸入項(xiàng)不能為空");
return false;
}
// 最小長(zhǎng)度驗(yàn)證
if (strText.length < 6) {
$("#msg").html("輸入長(zhǎng)度不能小于6");
return false;
}
// 最大長(zhǎng)度驗(yàn)證
if (strText.length > 10) {
$("#msg").html("輸入長(zhǎng)度不能大于10");
return false;
}
// 漢字驗(yàn)證
if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
$("#msg").html("必須輸入漢字");
return false;
}
// 錯(cuò)誤信息清空
$("#msg").html("");
return true;
});
注意一下Javascript與JQuery添加事件的區(qū)別
2. 升級(jí)版
現(xiàn)在很多驗(yàn)證不止在提交按鈕時(shí)進(jìn)行斩例，在輸入框輸入時(shí)實(shí)時(shí)驗(yàn)證雄人，我們把上面的版本升級(jí)一下。
- 把輸入框的驗(yàn)證單獨(dú)做成一個(gè)有名字的函數(shù)念赶。
// 輸入框驗(yàn)證
function check() {
var strText = $("#txt_submit").val();
// 必填項(xiàng)驗(yàn)證
if ("" == strText) {
$("#msg").html("該輸入項(xiàng)不能為空");
return false;
}
// 最小長(zhǎng)度驗(yàn)證
if (strText.length < 6) {
$("#msg").html("輸入長(zhǎng)度不能小于6");
return false;
}
// 最大長(zhǎng)度驗(yàn)證
if (strText.length > 10) {
$("#msg").html("輸入長(zhǎng)度不能大于10");
return false;
}
// 漢字驗(yàn)證
if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
$("#msg").html("必須輸入漢字");
return false;
}
// 錯(cuò)誤信息清空
$("#msg").html("");
return true;
}
- 把函數(shù)的名字分別賦給提交按鈕的單擊事件函數(shù)和輸入框的鍵盤事件函數(shù)础钠。
// 提交時(shí)驗(yàn)證
$("#btn_submit").click(check);
// 輸入時(shí)驗(yàn)證
$("#txt_submit").keyup(check);
以上兩步升級(jí)大功告成。
友情提示
上面的兩份代碼代碼使用對(duì)比工具對(duì)比叉谜，能夠清晰看出二者差異旗吁。
可以與之前的Javascript代碼對(duì)比，會(huì)發(fā)現(xiàn)與Javascript處理流程完全一樣停局，只是對(duì)象屬性方法不一樣很钓。
如有任何疑問香府，歡迎下面留言
