JavaScript的主要作用:驗(yàn)證表單
1最簡(jiǎn)單的表單驗(yàn)證-禁止空白的必填項(xiàng)目
1.1最簡(jiǎn)單的HTML結(jié)構(gòu)
網(wǎng)站最基礎(chǔ)的就是注冊(cè),它是一個(gè)系統(tǒng)的交互基礎(chǔ).
例子:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>簡(jiǎn)單列表的html結(jié)構(gòu)</title> </head> <body> <form method="post" action=""> 賬戶:<input type="text" name=""/><br/><br/> 密碼:<input type="password" name=""/><br/><br/> 確認(rèn):<input type="password" name=""/><br/><br/> <input type="submit" value="注冊(cè)" /> </form> </body></html>
1.2綁定驗(yàn)證功能
因?yàn)橛脩糇詈笠c(diǎn)擊"注冊(cè)"按鈕,所以我們就在"注冊(cè)"按鈕上添加一個(gè)onclick事件屬性,引用eg.regCheck()
例子:
? 注冊(cè)事件
<!DOCTYPE html><html> <!--綁定驗(yàn)證功能，注冊(cè)事件--> <head> <meta charset="utf-8"> <title>簡(jiǎn)單列表的html結(jié)構(gòu)</title> </head> <body> <form method="post" action=""> 賬戶:<input type="text" name=""/><br/><br/> 密碼:<input type="password" name=""/><br/><br/> 確認(rèn):<input type="password" name=""/><br/><br/> <input type="submit" value="注冊(cè)" onclick="return eg.regCheck();"/> </form> <script > //聲明一個(gè)對(duì)象,當(dāng)做命名空間來(lái)使用 var eg = {}; eg.regCheck = function(){ } </script> </body></html>eg.regCheck()函數(shù)需要添加的行為,獲取用戶輸入的賬戶信息,給input標(biāo)簽加上一個(gè)id屬性,JavaScript再通過(guò)這個(gè)指定的id去取得相應(yīng)的信息,然后返回驗(yàn)證結(jié)果true或false
例子:
? 給表單添加驗(yàn)證功能
<!DOCTYPE html><html> <!--給表單添加驗(yàn)證功能--> <head> <meta charset="utf-8"> <title>簡(jiǎn)單列表的html結(jié)構(gòu)</title> </head> <body> <form method="post" action=""> 賬戶:<input type="text" name="" id="userid"/><br/><br/> 密碼:<input type="password" name="" id="userpwd"/><br/><br/> 確認(rèn):<input type="password" name="" id="userpwd2"/><br/><br/> <input type="submit" value="注冊(cè)" onclick="return eg.regCheck();"/> </form> <script > //聲明一個(gè)對(duì)象,當(dāng)做命名空間來(lái)使用 //定義一個(gè)公共函數(shù)來(lái)獲取指定id元素,減少代碼量,提高代碼復(fù)用率 var eg = {}; eg.$ = function(id){ return document.getElementById(id); }; eg.regCheck = function(){ var uid = eg.$("userid"); var upwd = eg.$("userpwd"); var upwd2 = eg.$("userpwd2"); if(uid.value == ''){ alert('賬戶不能為空!'); //返回false就會(huì)阻止表單form提交 return false; } if(upwd.value == ''){ alert('密碼不能為空!'); //返回false就會(huì)阻止表單form提交 return false; } if(upwd.value != upwd2.value){ alert('兩次輸入密碼不相同!'); //返回false就會(huì)阻止表單form提交 return false; } return true; }; </script> </body></html>1.3綁定驗(yàn)證的另一種方式
把驗(yàn)證放在"注冊(cè)"按鈕的onclick事件屬性里使用,還有另一種調(diào)用方式,即form標(biāo)簽的onsubmit事件屬性
例子:
? form表單綁定驗(yàn)證完整范例
<!DOCTYPE html><html><!--綁定驗(yàn)證的另一種方式,form表單綁定驗(yàn)證完整示例--> <head> <meta charset="utf-8"> <title>簡(jiǎn)單列表的html結(jié)構(gòu)</title> </head> <body> <form method="post" action="" onsubmit="return eg.regCheck();"> 賬戶:<input type="text" name="" id="userid"/><br/><br/> 密碼:<input type="password" name="" id="userpwd"/><br/><br/> 確認(rèn):<input type="password" name="" id="userpwd2"/><br/><br/> <input type="submit" value="注冊(cè)" /> </form> <script> //聲明一個(gè)對(duì)象,當(dāng)做命名空間來(lái)使用 //定義一個(gè)公共函數(shù)來(lái)獲取指定id元素,減少代碼量,提高代碼復(fù)用率 var eg = {}; eg.$ = function(id){ return document.getElementById(id); }; eg.regCheck = function () { var uid = eg.$("userid"); var upwd = eg.$("userpwd"); var upwd2 = eg.$("userpwd2"); if(uid.value == ''){ alert('賬戶不能為空!'); //返回false就會(huì)阻止表單form提交 return false; } if(upwd.value == ''){ alert('密碼不能為空!'); //返回false就會(huì)阻止表單form提交 return false; } if(upwd.value != upwd2.value){ alert('兩次輸入密碼不相同!'); //返回false就會(huì)阻止表單form提交 return false; } return true; }; </script> </body></html>2,處理各種類型的表單元素
2.1，input,textarea,hidden和button
要求:在注冊(cè)表單的基礎(chǔ)上加"簡(jiǎn)介"字段，可以為空，但是最長(zhǎng)不超過(guò)60個(gè)字符，同時(shí)要統(tǒng)計(jì)一下，用戶輸入錯(cuò)誤的次數(shù)，輸入超過(guò)3次，就鎖定"注冊(cè)"按鈕,然后要"解鎖"才能重新使用
例子:
? 處理各種類型表單一
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>處理各種類型表單一</title> </head> <body> <form method="post" action="" onsubmit="return eg.regCheck();"> 賬戶:<input type="text" name="" id="userid"/><br/><br/> 密碼:<input type="password" name="" id="userpwd"/><br/><br/> 確認(rèn):<input type="password" name="" id="userpwd2"/><br/><br/> 簡(jiǎn)介: <textarea name="" rows="4" cols="18" id="about"> </textarea><br/><br/> <input type="submit" value="注冊(cè)" id="regBtn" /> <input type="button" value="解鎖" onclick="eg.unlock" style="display: none;" id="regUnlock"> </form> <script> //聲明一個(gè)對(duì)象,當(dāng)做命名空間來(lái)使用 //定義一個(gè)公共函數(shù)來(lái)獲取指定id元素,減少代碼量,提高代碼復(fù)用率 var eg = {}; eg.$ = function(id){ return document.getElementById(id); }; //主要的驗(yàn)證方法 eg.regCheck = function () { var uid = eg.$("userid"); var upwd = eg.$("userpwd"); var upwd2 = eg.$("userpwd2"); //value是元素自帶屬性 if(uid.value == ''){ alert('賬戶不能為空!'); eg.err(); return false; } if(upwd.value == ''){ alert('密碼不能為空!'); eg.err(); return false; } if(upwd.value != upwd2.value){ alert('兩次輸入密碼不相同!'); eg.err(); return false; } //新增部分 var about = eg.$("about"); //value是字符串類型的屬性 if (about.value.length>60){ alert("簡(jiǎn)介太長(zhǎng)!"); eg.err(); return false; } //返回true就會(huì)提交表單 return true; }; //出錯(cuò)時(shí)記錄錯(cuò)誤次數(shù) eg.err = function () { var el = eg.$("errnum"); var old = el.value; //把字符串轉(zhuǎn)換為整數(shù)+1,并保存起來(lái) el.value = parseInt(old)+1; //用來(lái)檢查是否應(yīng)該鎖定 eg.lock(); }; //通過(guò)次數(shù)判斷是否要鎖定 eg.lock = function(){ var err = eg.$("errnum"); if (parseInt(err.value)>2){ eg.$("regBtn").disabled = true; //根據(jù)業(yè)務(wù)需求,輸錯(cuò)3次就鎖定 eg.$("regUnlock").style.display="block"; //同時(shí)顯示解鎖按鈕 } }; eg.unlock = function(){ eg.$("regBtn").disabled = false; //根據(jù)業(yè)務(wù)需求，解鎖就是讓用戶可以重新注冊(cè) eg.$("regUnlock").style.display="none"; //元素所有樣式都掛載到style屬性下 } </script> </body></html>現(xiàn)在制作一個(gè)錯(cuò)誤統(tǒng)計(jì),可以為后臺(tái)系統(tǒng)保存起來(lái)用于分析用戶的錯(cuò)誤率，甚至可以分析出用戶一般會(huì)在哪些字段上出錯(cuò)。記錄錯(cuò)誤信息不需要給用戶看到，可以選擇input的type屬性是hidden的元素來(lái)存儲(chǔ)
2.2checkbox,radio和select
知道用戶性別,年齡,興趣愛(ài)好
例子:
? 處理各種類型表單二
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>處理各種類型表單二</title> </head> <body> <form method="post" action="" onsubmit="return eg.regCheck();"> 賬戶:<input type="text" name="" id="userid"/><br/><br/> 密碼:<input type="password" name="" id="userpwd"/><br/><br/> 確認(rèn):<input type="password" name="" id="userpwd2"/><br/><br/> 簡(jiǎn)介: <textarea name="" rows="4" cols="18" id="about"> </textarea><br/><br/> <input type="submit" value="注冊(cè)" id="regBtn" /> <input type="button" value="解鎖" onclick="eg.unlock" style="display: none;" id="regUnlock"> </form> <script> //聲明一個(gè)對(duì)象,當(dāng)做命名空間來(lái)使用 //定義一個(gè)公共函數(shù)來(lái)獲取指定id元素,減少代碼量,提高代碼復(fù)用率 var eg = {}; eg.$ = function(id){ return document.getElementById(id); }; //主要的驗(yàn)證方法 eg.regCheck = function () { var uid = eg.$("userid"); var upwd = eg.$("userpwd"); var upwd2 = eg.$("userpwd2"); //value是元素自帶屬性 if(uid.value == ''){ alert('賬戶不能為空!'); eg.err(); return false; } if(upwd.value == ''){ alert('密碼不能為空!'); eg.err(); return false; } if(upwd.value != upwd2.value){ alert('兩次輸入密碼不相同!'); eg.err(); return false; } //新增部分 var about = eg.$("about"); //value是字符串類型的屬性 if (about.value.length>60){ alert("簡(jiǎn)介太長(zhǎng)!"); eg.err(); return false; } //返回true就會(huì)提交表單 return true; }; //出錯(cuò)時(shí)記錄錯(cuò)誤次數(shù) eg.err = function () { var el = eg.$("errnum"); var old = el.value; //把字符串轉(zhuǎn)換為整數(shù)+1,并保存起來(lái) el.value = parseInt(old)+1; //用來(lái)檢查是否應(yīng)該鎖定 eg.lock(); }; //通過(guò)次數(shù)判斷是否要鎖定 eg.lock = function(){ var err = eg.$("errnum"); if (parseInt(err.value)>2){ eg.$("regBtn").disabled = true; //根據(jù)業(yè)務(wù)需求,輸錯(cuò)3次就鎖定 eg.$("regUnlock").style.display="block"; //同時(shí)顯示解鎖按鈕 } }; eg.unlock = function(){ eg.$("regBtn").disabled = false; //根據(jù)業(yè)務(wù)需求，解鎖就是讓用戶可以重新注冊(cè) eg.$("regUnlock").style.display="none"; //元素所有樣式都掛載到style屬性下 } </script> </body></html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
