java(10)--DOM之用户登录验证(正则)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> table { border: #0066FF 1px solid; width: 550px; border-collapse: collapse; } table th, table td { border: #0066FF 1px solid; padding: 10px; } table th { background-color: #66FF66; } table td { background-color: #FFCC66; } .errinfo { display: none;/**/ color: #FF0000; } .okinfo { color: #006600; display: none; } .error { border: #FF0000 2px solid; } .norm { border: #666666 2px solid; } .focus { border: #0033FF 2px solid; } </style>
<script type="text/javascript"> function check(node,reg,okdiv,errdiv){ var flag=false; var value=node.value; var ok=document.getElementById(okdiv); var error=document.getElementById(errdiv); if(reg.test(value)){ ok.style.display="block"; error.style.display="none"; node.className="norm"; flag=true; } else{ ok.style.display="none"; error.style.display="block"; node.className="error"; flag=false; } return flag; } var isuser ,ispsw,isrepsw,ismail; function checkUser(node){ var reg=/^[a-zA-Z]+[a-zA-Z0-9_]*$/gi; isuser = check(node,reg,'userok','usererr'); } function checkPsw(node){ var reg=/^\d{4}$/; ispsw=check(node,reg,'pswok','pswerr'); var reword = document.getElementsByName("repsw")[0].value; if(reword.length!=0) checkRepsw(repswNode); } function checkRepsw(node){ var repwd=document.getElementsByName("repsw")[0].value; var word=document.getElementsByName("psw")[0].value; var okdiv=document.getElementById("repswok"); var errdiv=document.getElementById("repswerr"); if(repwd==word){ okdiv.style.display = "block"; errdiv.style.display = "none"; node.className = "norm"; isrepsw = true; } else{ okdiv.style.display = "none"; errdiv.style.display = "block"; node.className = "error"; isrepsw = false; } } function checkMail(node){ var reg = /^\w+@\w+(\.[a-z]+)+$/; ismail = check(node,reg,'mailok',"mailerr"); } function checkForm(){ if(isuser&&ispsw&&isrepsw&&ismail){ alert("chenggong"); event.returnValue=true; } else{ alert("shibai"); event.returnValue=false; } } </script>

</head>

<body>
<form name="regform" onsubmit="checkForm()">
  <table>
    <tr>
      <th colspan="2">注册表单</th>
    </tr>
    <tr>
      <td>用户名称:</td>
      <td><input type="text" name="user" onblur="checkUser(this)" />
        <div class="errinfo" id="usererr">用户名格式错误</div>
        <div class="okinfo" id="userok">用户名正确</div>
        <div>用户名必须由字母(a-z) 数字(0-9) 下划线(_)组成 </div></td>
    </tr>
    <tr>
      <td>输入密码:</td>
      <td><input type="text" name="psw" onblur="checkPsw(this)" />
        <div class="errinfo" id="pswerr">密码格式错误</div>
        <div class="okinfo" id="pswok">密码正确</div>
        <div>密码由四位数字组成</div></td>
    </tr>
    <tr>
      <td>确认密码:</td>
      <td><input type="text" name="repsw" onblur="checkRepsw(this)" />
        <div class="errinfo" id="repswerr">两次密码不一致。重新输入</div>
        <div class="okinfo" id="repswok">密码一致</div>
        <div>再输入一次密码</div></td>
    </tr>
    <tr>
      <td>电子邮件:</td>
      <td><input type="text" name="mail" onblur="checkMail(this)" />
        <div class="errinfo" id="mailerr">邮箱地址格式错误</div>
        <div class="okinfo" id="mailok">邮件正确</div>
        <div>输入有效的邮箱地址</div></td>
    </tr>
    <tr>
      <th colspan="2"> <input type="submit" value="提交数据" />
        <input type="reset" value="清除数据" onclick="loadInput()" />
      </th>
    </tr>
  </table>
</form>
</body>
</html>

你可能感兴趣的:(java)