客户端基于层的验证不用alert方式

我们知道，在jsp或者asp中，经常使用客户端的表单验证，比如用户名、密码不能为空，身份证号的验证等等，客户端验证的好处是，快捷、减少用户输入等待、在一程度上也减轻了服务器的压力，当然，比较重要的数据，除了客户端验证之外，在服务器也在做相关的验证。

客户端的验证，大多是基于javascript脚步的，至于vbscript由于只有IE支持，所以用的很少。但是alert这种的错误提示，往往和精美的页面，有些不拾配，所以，本文提出了基于javascript+div的验证方式，即能实现客户端的验证，又能保证界面的美观，就如asp.net的webform验证一样，将错误信息，以图片或文字的方式，显示在网页的某一部分，而不是弹出的alert脚本。

思路：
1、javascript脚本，验证表单，如果出错，则显示层，在层中显示相应错误信息。
2、如果验证成功，则不显示层，提交表单。在页面加载时，层是隐藏的。

以下是本人写的代码：

表单及表单验证：

 <table width="616" height="364" border="0" align="center" cellpadding="0" cellspacing="0">
             <form name="form1" method="post" action="">
    <script language="JavaScript">
                function checkform()
      {
      var a;
      var b;
      b="";
      a=0;
      if(form1.username.value=="")
      {
      b="电话号码";
      a=1;
    
        
      }
      if(form1.password.value=="")
      {
       b=b+"、密码";
    a=1; 
      }
      if(a==0)
      {
       toExit('hide','error');
       form1.submit();
      }
      else
      {
     
       errortext.value="请输入"+b;
    toExit('show','error');
      }
     
      }
     </script>
     <tr>
                <td background="images/search1_top1.gif">
<table width="569" height="145" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                      <td width="283" height="64">&nbsp;</td>
                        <td width="286" align="center" valign="bottom">
                          <input name="username" type="text" class="biginput" maxlength="12">
                        </td>
                    </tr>
                    <tr>
                      <td height="22">&nbsp;</td>
                      <td height="22">&nbsp;</td>
                    </tr>
                    <tr>
                        <td height="59">&nbsp;</td>
                        <td align="center" valign="bottom">
                          <input name="password" type="password" class="biginput" maxlength="10">
                        </td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                  <td height="164" ><img src="../../images/search1_top2.gif" width="616" height="164" border="0" usemap="#Map"></td>
              </tr>
      </form>
  </table>
   

用于显示错误信息的层：

<div id="error" style="position:absolute; width:618px; height:57px; z-index:1; left: 205px; top: 185px; visibility: hidden;">
              <table width="615" height="54" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td height="54" align="right" background="images/error.gif">
                    <table width="500" border="0" align="right" cellpadding="0" cellspacing="0">
                      <tr>
                        <td align="center" valign="middle"> 　
                          <input name="errortext" type="text" class="errortext">
                        </td>
                        <td width="71"><a href="javascript:"><img src="../../images/close.gif" width="54" height="28" border="0" onclick="javascript:toExit('hide','error')"></a>
                        </td>
                      </tr>
                    </table></td>
                </tr>
              </table>
 </div>

作者：昨夜风
写于：2006-09-09

 

 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1623357