JavaScript的主要作用:驗證表單
1最簡單的表單驗證-禁止空白的必填項目
1.1最簡單的HTML結構
網站最基礎的就是注冊,它是一個系統的交互基礎.
例子:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>簡單列表的html結構</title> </head> <body> <form method="post" action=""> 賬戶:<input type="text" name=""/><br/><br/> 密碼:<input type="password" name=""/><br/><br/> 確認:<input type="password" name=""/><br/><br/> <input type="submit" value="注冊" /> </form> </body></html>
1.2綁定驗證功能
因為用戶最后要去點擊"注冊"按鈕,所以我們就在"注冊"按鈕上添加一個onclick事件屬性,引用eg.regCheck()
例子:
注冊事件
<!DOCTYPE html><html> <!--綁定驗證功能，注冊事件--> <head> <meta charset="utf-8"> <title>簡單列表的html結構</title> </head> <body> <form method="post" action=""> 賬戶:<input type="text" name=""/><br/><br/> 密碼:<input type="password" name=""/><br/><br/> 確認:<input type="password" name=""/><br/><br/> <input type="submit" value="注冊" onclick="return eg.regCheck();"/> </form> <script > //聲明一個對象,當做命名空間來使用 var eg = {}; eg.regCheck = function(){ } </script> </body></html>eg.regCheck()函數需要添加的行為,獲取用戶輸入的賬戶信息,給input標簽加上一個id屬性,JavaScript再通過這個指定的id去取得相應的信息,然后返回驗證結果true或false
例子:
給表單添加驗證功能
<!DOCTYPE html><html> <!--給表單添加驗證功能--> <head> <meta charset="utf-8"> <title>簡單列表的html結構</title> </head> <body> <form method="post" action=""> 賬戶:<input type="text" name="" id="userid"/><br/><br/> 密碼:<input type="password" name="" id="userpwd"/><br/><br/> 確認:<input type="password" name="" id="userpwd2"/><br/><br/> <input type="submit" value="注冊" onclick="return eg.regCheck();"/> </form> <script > //聲明一個對象,當做命名空間來使用 //定義一個公共函數來獲取指定id元素,減少代碼量,提高代碼復用率 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就會阻止表單form提交 return false; } if(upwd.value == ''){ alert('密碼不能為空!'); //返回false就會阻止表單form提交 return false; } if(upwd.value != upwd2.value){ alert('兩次輸入密碼不相同!'); //返回false就會阻止表單form提交 return false; } return true; }; </script> </body></html>
新聞熱點
疑難解答
圖片精選
