用JavaScript来实现一些简单的控件验证

页面一:

<html>
 <head>
  <title> 验证与提交一 </title>

   <script>
    function focusSelect(ID)   //当验证不能通过时获得验证控件的焦点和内容
 {
        document.getElementById(ID).focus();
  document.getElementById(ID).select();
 }


    function txtNameOnBlur()  //对用户名的所有验证
 {
       var txt=document.getElementById("txtName").value;
    if(txt=="")
    {
          document.getElementById("fName").innerHTML="*";
    //focusSelect('txtName');
    return false;
    }else
    {
      if(isNaN(txt))
      {
            document.getElementById("fName").innerHTML="用户名必须是数字!";
       //focusSelect('txtName');
      return false;
      }else
      if(txt.length!=10)
      {
            document.getElementById("fName").innerHTML="用户名必须是10位";
      //focusSelect('txtName');
      return false;
      }else
      if(txt.substr(txt.length-3,txt.length+1) != "321")
      {
            document.getElementById("fName").innerHTML="用户名后3位必须是321!";
      //focusSelect('txtName');
      return false;
      }
    }
    return true;
 }

 function txtNameOnFocus()  //当获得焦点时对此文本框所做的动作
 {
        var txt=document.getElementById("txtName").value;
  if(txt=="*******321")
  {
           document.getElementById("txtName").value="";
  }
 }
  
    function pwdOnBlur()  //对密码进行判断的方法
 {
    var pwd1=document.getElementById("txtPwd1").value;
    var pwd2=document.getElementById("txtPwd2").value;
    if(pwd1.length != 0 && pwd2.length != 0)
    {
         if(pwd1 != pwd2)
      {
           document.getElementById("fPwd").innerHTML="您两次输入的密码不一样";
     //focusSelect('txtPwd2');
     return false;
      }
    }else
    {
            document.getElementById("fPwd").innerHTML="*";
   document.getElementById("fPwd2").innerHTML="*";
   return false;
    }
    return true;
 }

 function emailOnBlur()  //对邮箱格式进行验证的方法
 {
   var str = document.formOne.txtEmail.value;
   if(str.length != 0)
   {
         if(str.indexOf("@") != -1 && str.indexOf(".") != -1)
    {
   return true;
    }
    else
    {
            document.getElementById("fEmail").innerHTML="邮箱正确格式应为:";   
   //focusSelect('txtEmail');
   return false;
    }
   }
   else
   {
         document.getElementById("fEmail").innerHTML="*";
   //focusSelect('txtEmail');
   return false;
   }
   return true;
 }

 function funIsTrue()   //对所有验证的方法的返回值作判断,完全通过验证就可以提交成功,否则失
 {
       var str1=txtNameOnBlur();
    var str2=pwdOnBlur();
    var str3=emailOnBlur();
    if((!str1 && !str2 && !str3) || (!str1 && str2 && str3) || (!str1 && str2 && !str3))   //判断是否应该将光标焦点放在用户名上
    {
   focusSelect('txtName');
         return false;
    }else
    if((str1 && !str2 && !str3) || (str1 && !str2 && str3))   //判断是否应该将光标焦点放在密码框上
    {
         focusSelect('txtPwd1');
   return false;
    }else
    if(str1 && str2 && !str3)   //判断是否应该将光标焦点放在邮箱框上
    {
         focusSelect('txtEmail');
   return false;
    }else
    if(str1 && str2 && str3)   //判断是否可以跳转页面
    {
         return true;
    }
    return false;
 }

   </script>
 </head>
 <body>
 <form name="formOne" action="2.html" οnsubmit="return funIsTrue()">
 <center><br/><br/><br/><br/>
 <table>
    <tr><td>账号:</td><td><input type="textBox" id="txtName" value="*******321" onBlur="txtNameOnBlur()" onFocus="txtNameOnFocus()"> </td><td> <font color="red" id="fName"></font></td></tr>
 <tr><td> 密码:</td><td><input type="password" id="txtPwd1"> </td><td> <font color="red" id="fPwd"></font></td></tr>
 <tr><td> 确认密码:</td><td><input type="password" id="txtPwd2" onBlur="pwdOnBlur()"> </td><td> <font color="red" id="fPwd2"></font></td></tr>
 <tr><td> 电子邮箱:</td><td> <input type="textBox" id="txtEmail" onBlur="emailOnBlur()"></td><td> <font color="red" id="fEmail"></font></td></tr>
 </table>
  <input type="submit" value="提交" >
  </center>
  </form>
 </body>
</html>
页面二:

<html>
 <head>
  <title> 验证与提交二 </title>
  <script>
    function fun()
 {
    document.getElementById("time").innerHTML -= 1;
    var t=setTimeout("fun()",1000);
    if(document.getElementById("time").innerHTML==0)
    {
          clearTimeout(t);
    location.href="1.html";  //自动页面跳转
    }
 }
  </script>
 </head>

 <body οnlοad="fun()">
  <h1 id="hId">您的内容通过验证,欢迎您来到这里。</h1><br/><br/><br/>
  您将在<font id="time" color="red" size="5">5</font>秒钟后回到注册页面,如果不能自动跳转请点击此按钮:<input type="button" value="回到注册页面" οnclick="location.href='1.html'">
 </body>
</html>
您可以新建一个文本框将上面两个页面的内容复制上去并将后缀名改为".html"就可以正常运行。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值