2022/03/04

今天用JavaScrip重新写了一下表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更改密码</title>
    <style>
        .err_msg{
            color: red;
            padding-right: 170px;
        }
    </style>
</head>
<body>
<form id="reg-form" action="updateServlet" method="post">
旧密码：<input name="password1" type="password" id="password1"><br>
<span id="password1_err" class="err_msg" style="display:none">请输入旧密码</span><br>
新密码：<input name="password2" type="password" id="password2"><br>
<span id="password2_err" class="err_msg" style="display: none">请输入6-20位字母和数字</span><br>
确认新密码：<input name="password_2" type="password" id="password_2"><br>
<span id="password_2_err" class="err_msg" style="display: none">两次输入的密码不一致</span>
<br>
<input type="submit" value="提交" id="teg_btn">
</form>
</body>
<script>
    var password1=document.getElementById("password1");
    password1.onblur=checkPassword1;
    function checkPassword1(){
        var ps1=password1.value.trim();
        var reg=/^\w+$/;
        var flag=reg.test(ps1);
        if(flag){
            document.getElementById("password1_err").style.display='none';
        }else {
            document.getElementById("password1_err").style.display='';
        }
        return flag;
    }
    var password2=document.getElementById("password2");
    password2.onblur=checkPassword2;
    function checkPassword2(){
        var ps2=password2.value.trim();
        var reg=/^\w{6,20}$/;
        var flag=reg.test(ps2);
        if(flag){
            document.getElementById("password2_err").style.display='none';
        }else {
            document.getElementById("password2_err").style.display='';
        }
        return flag;
    }
    var password_2=document.getElementById("password_2");
    password_2.onblur=checkPassword_2;
    function checkPassword_2(){
        var ps_2=password_2.value.trim();
        var flag=ps_2==password2.value.trim();
        if(flag){
            document.getElementById("password_2_err").style.display='none';
        }else {
            document.getElementById("password_2_err").style.display='';
        }
        return flag;
    }
    var regForm=document.getElementById("reg-form");
    regForm.onsubmit=function () {
        var flag=checkPassword1()&&checkPassword_2()&&checkPassword_2();
        return flag;
    }
</script>
</html>

 

posted @ 2022-03-05 20:01  年年ℓ  阅读(38)  评论(0)    收藏  举报