注册页面JS前台校验

运行效果图：

HTML代码：

<script>
    function checkForm(){
        //校验用户名
        //获得用户名文本框的值
        var username=document.getElementById("username").value;
        if(username==null || username==''){
            alert("用户名不能为空");
            return false;
        }
        
        //校验密码
        //获得密码的值
        var password=document.getElementById("password").value;
        if(password==null || password==''){
            alert("密码不能为空");
            return false;
        }
        
        //校验确认密码
        var repassword=document.getElementById("repassword").value;
        if(repassword != password){
            alert("密码输入不一致");
            return false;
        }
    }
    
</script>

JSP代码：

<form id="registerForm"  method="post" novalidate="novalidate" onsubmit="return checkForm();">
　　<table>
　　　　<tbody><tr>
       　　<th>
          　　<span class="requiredField">*</span>用户名:
          </th>
          <td>
          　　<input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername();"/>
              <span id="span1"></span>
          </td>
          </tr>
          <tr>
          　　<th>
             　　<span class="requiredField">*</span>密&nbsp;&nbsp;码:
             </th>
             <td>
             　　<input type="password" id="password" name="password" class="text" maxlength="20" autocomplete="off">
             </td>
          </tr>
          <tr>
          　　<th>
             　　<span class="requiredField">*</span>确认密码:
              </th>
              <td>
              　　<input id="repassword" type="password" name="repassword" class="text" maxlength="20" autocomplete="off">
              </td>
          </tr>
　　　　</tbody>
　　</table>
</form>