Friday 20 April 2012

表单验证代码

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>确认表单必填项完整性</title>  
  5.       
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  7.     <meta http-equiv="description" content="this is my page">  
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  9.       
  10.     <script type="text/javascript">  
  11.           
  12.         function $(str){  
  13.             return (document.getElementById(str));  
  14.         }  
  15.           
  16.         function check_submit(){  
  17.             if($("username").value ==""){  
  18.                 alert("请填写用户名!");  
  19.                 return false;  
  20.             }  
  21.             if($("password").value == ""){  
  22.                 alert("请填写密码!");  
  23.                 return false;  
  24.             }  
  25.         }  
  26.     </script>  
  27.       
  28.   </head>  
  29.     
  30.   <body>  
  31.     <form action="" onsubmit="return check_submit();">  
  32.         用户名:<input id="username" type="text"><br/>  
  33.         密　码:<input id="password" type="password"><br/>  
  34.         <input type="submit" value="提交">  
  35.     </form>  
  36.   </body>  
  37. </html> 
  38. 改进：
  39. <!DOCTYPE html>  
  40. <html>  
  41.   <head>  
  42.     <title>更加人性化表单</title>  
  43.       
  44.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  45.     <meta http-equiv="description" content="this is my page">  
  46.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  47.       
  48.     <script type="text/javascript">  
  49.       
  50.         function $(str){  
  51.             return (document.getElementById(str));  
  52.         }  
  53.           
  54.         function check_submit(){  
  55.             if($("username").value =="" || $("username").value=="请输入用户名"){  
  56.                 alert("用户名不能为空!");  
  57.                 return false;  
  58.             }  
  59.             if($("password").value ==""){  
  60.                 alert("密码不能为空！");  
  61.                 return false;  
  62.             }  
  63.         }  
  64.           
  65.         function mover(){  
  66.             event.srcElement.focus();  
  67.             event.srcElement.select();  
  68.         }  
  69.           
  70.         function mclick(){  
  71.             if(event.srcElement.value=="请输入用户名")  
  72.                 event.srcElement.value="";  
  73.         }  
  74.           
  75.         function mblur(){  
  76.             if(event.srcElement.value=="")  
  77.                 event.srcElement.value="请输入用户名";  
  78.         }  
  79.     </script>   
  80.     
  81.   </head>  
  82.     
  83.   <body>  
  84.     <form action="" onsubmit="return check_submit();">  
  85.         用户名:<input id="username" type="text" onmouseover="mover();" onclick="mclick();"   
  86.         onblur="mblur();" value="请输入用户名"><br/>  
  87.         密　码:<input id="password" type="password" onmouseover="mover();"><br/>  
  88.         <input type="submit" value="提交" id="submit">  
  89.               
  90.     </form>  
  91.   </body>  
  92. </html>  
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)