JavaScript實現登錄檔單校驗功能
阿新 • • 發佈：2020-12-30
技術標籤：JavaScript小作業
如圖，要求輸入使用者名稱失去焦點後用戶名不得為空或者小於6個字元，否則就顯示提示，密碼同理，第二個確認密碼只需判斷與上一個密碼框輸入是否一致即可，否則顯示兩次密碼輸入不一致，在沒有完成校驗點選提交按鈕跳轉不要，都滿足校驗方可跳轉提交，程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單校驗</title> </head> <body> <form action="xxxx" onsubmit="return sub()"> 使用者名稱：<input name="name" type="text" onblur="usr()"/><span id="1" style="color: red" ></span> <br> 密碼：<input name="pwd" type="password" onblur="pw()"><span id="2" style="color: red"></span><br> 確認密碼：<input name="pwd1" type="password" onblur="pw1()"/><span id="3" style="color: red"></span><br> <input type="submit" value="確認註冊"> </form> </body> <script> function usr() { var na=document.querySelector("[name=name]").value; if(na==''||na.length<6){ document.querySelector("[name=name]+span").innerHTML="*使用者名稱不得少於6個字元"; return false; }else { document.querySelector("[name=name]+span").innerHTML=""; return true; } } function pw() { var p=document.querySelector("[name=pwd]").value; if(p==''||p.length<6){ document.querySelector("[name=pwd]+span").innerHTML="*密碼不得少於6個字元"; return false; }else { document.querySelector("[name=pwd]+span").innerHTML=""; return true; } } function pw1() { var p=document.querySelector("[name=pwd]").value; var p1=document.querySelector("[name=pwd1]").value; if(p!=p1){ document.querySelector("[name=pwd1]+span").innerHTML="*兩次輸入密碼不一致"; return false; }else { document.querySelector("[name=pwd1]+span").innerHTML=""; return true; } } function sub() { var result=usr()&&pw()&&pw1(); return result; } </script> </html>