使用JavaScript進行表單必填專案驗證和改進
阿新 • • 發佈：2019-01-12
在網頁提交表單的呃時候，往往需要進行表單的必填項進行驗證，下面我們以兩個例子來寫一下對錶單的必填項進行
認證的兩個例子，第二個例子是對第一個例子進行的改進。
首先是最基本的最簡單的表單必填項的例項程式碼
<!DOCTYPE html><html> <head> <title>確認表單必填項完整性</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function $(str){ return (document.getElementById(str)); } function check_submit(){ if($("username").value ==""){ alert("請填寫使用者名稱!"); return false; } if($("password").value == ""){ alert("請填寫密碼!"); return false; } } </script> </head> <body> <form action="" onsubmit="return check_submit();"> 使用者名稱:<input id="username" type="text"><br/> 密 碼:<input id="password" type="password"><br/> <input type="submit" value="提交"> </form> </body></html>
下面是對錶單的驗證進行了改進
<!DOCTYPE html><html> <head> <title>更加人性化表單</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function $(str){ return (document.getElementById(str)); } function check_submit(){ if($("username").value =="" || $("username").value=="請輸入使用者名稱"){ alert("使用者名稱不能為空!"); return false; } if($("password").value ==""){ alert("密碼不能為空！"); return false; } } function mover(){ event.srcElement.focus(); event.srcElement.select(); } function mclick(){ if(event.srcElement.value=="請輸入使用者名稱") event.srcElement.value=""; } function mblur(){ if(event.srcElement.value=="") event.srcElement.value="請輸入使用者名稱"; } </script> </head> <body> <form action="" onsubmit="return check_submit();"> 使用者名稱:<input id="username" type="text" onmouseover="mover();" onclick="mclick();" onblur="mblur();" value="請輸入使用者名稱"><br/> 密 碼:<input id="password" type="password" onmouseover="mover();"><br/> <input type="submit" value="提交" id="submit"> </form> </body></html>
當表單的使用者名稱輸入框滑鼠劃過的時候，觸發事件，然後自動選中事件，當失去焦點的時候，檢測裡面的值是否為
空，如果為空就返回原來的值。應該說是比較大的改進。
再分享一下我老師大神的人工智慧教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智慧的隊伍中來！https://blog.csdn.net/jiangjunshow