1. 程式人生 > 其它 >2022/03/04

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>