2022/03/04
阿新 • • 發佈:2022-03-05
今天用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> varpassword1=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>