js实现登录表单验证

下面是一段简单的js实现表单登陆的完整代码,供初学者使用。文件名index.html,代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript">
  7.         function focus_username() {
  8.             //获取id=result_username的对象
  9.             var resultObj=document.getElementById("result_username");
  10.             //写入提示信息
  11.             resultObj.innerHTML = "请输入您的用户名";
  12.             resultObj.style.color = "#ccc";
  13.             //给文本框加个边框
  14.             //document.form1.username.style="border:1px solid #49bde0";
  15.         }
  16.         function blur_username() {
  17.             //获取id=result_username的对象
  18.             var resultObj = document.getElementById("result_username");
  19.             //用户名验证
  20.             if(document.form1.username.value=="") {
  21.                 resultObj.innerHTML="用户名不能为空";
  22.                 resultObj.style.color="red";
  23.                 return false;
  24.             } else if(document.form1.username.value.length<5||document.form1.username.value.length>20) {
  25.                 resultObj.innerHTML="用户名长度必须介于5-20字符之间";
  26.                 resultObj.style.color="red";
  27.                 return false;
  28.             } else {
  29.                 resultObj.innerHTML="<img src='img/ok.png'/>";
  30.                 return true;
  31.             }
  32.         }
  33.         function focus_userpwd() {
  34.             //获取id=result_username的对象
  35.             var resultObj=document.getElementById("result_userpwd");
  36.             //写入提示信息
  37.             resultObj.innerHTML = "请输入您的密码";
  38.             resultObj.style.color = "#ccc";
  39.             //给文本框加个边框
  40.             document.form1.userpwd.style="border:1px solid #49bde0";
  41.         }
  42.          function blur_userpwd() {
  43.             //获取id=result_username的对象
  44.             var resultObj = document.getElementById("result_userpwd");
  45.             document.form1.userpwd.style="border:1px solid #ccc;background:none;";
  46.             //用户名验证
  47.             if(document.form1.userpwd.value=="") {
  48.                 resultObj.innerHTML="密码不能为空";
  49.                 resultObj.style.color="red";
  50.                 return false;
  51.             } else if(document.form1.userpwd.value.length<5||document.form1.userpwd.value.length>20) {
  52.                 resultObj.innerHTML="密码长度必须介于5-20字符之间";
  53.                 resultObj.style.color="red";
  54.                 return false;
  55.             } else {
  56.                 resultObj.innerHTML="<img src='img/ok.png'/>";
  57.                 return true;
  58.             }
  59.         }
  60.         function checkForm() {
  61.             var flag_username = blur_username();
  62.             var flag_userpwd = blur_userpwd();
  63.             if (flag_username==true&&flag_userpwd==true) {
  64.                 return true;
  65.             } else {
  66.                 return false;
  67.             }
  68.         }
  69.     </script>
  70. </head>
  71. <body>
  72.     <form action="login.php" method="get" name="form1" onsubmit="return checkForm()">
  73.         <table width="600" border="1"  align="center" rules="all" cellpadding="5" background="#ccc">
  74.             <tr>
  75.                 <td width="100" align="right">用户名:</td>
  76.                 <td><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()"></td>
  77.                 <td width="300"><div id="result_username"></div></td>
  78.             </tr>
  79.             <tr>
  80.                 <td  align="right">密码:</td>
  81.                 <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"></td>
  82.                 <td ><div id="result_userpwd"></div></td>
  83.             </tr>
  84.             <tr>
  85.                 <td>&nbsp;</td>
  86.                 <td colspan="2">
  87.                     <input type="submit" value="提交表单">
  88.                     <input type="reset" value="重置">
  89.                 </td>
  90.             </tr>
  91.         </table>
  92.     </form>
  93. </body>
  94. </html>

发表评论

目前评论:1