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

最新推荐文章于 2023-03-29 11:07:35 发布

Mrzhoug

最新推荐文章于 2023-03-29 11:07:35 发布

阅读量657

点赞数

分类专栏： java基础文章标签： java

本文链接：https://blog.csdn.net/Mrzhoug/article/details/50460119

版权

java基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!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>