angular-簡單的表單驗證註冊demo
阿新 • • 發佈：2019-01-08
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="angular-1.3.0.js"></script> <script src="jquery.1.12.4.js"></script> <title>表單驗證--註冊</title> <script type="text/javascript"> $(function(){ var A=false; var B=false; var C=false; var D=false; $("#email").blur(function(){ var email = $("#email").val(); var all=email.match("@"); if(all == null){ $("#span").text("郵箱格式不正確"); $("#span").css({"color":"red"}); return A=false; }else{ $("#span").text("√"); $("#span").css({"color":"green"}); return A=true; } }); $("#name").blur(function(){ var name=$("#name").val(); if(name!=null){ $("#span2").text("√"); $("#span2").css({"color":"green"}); return B=true }else { $("#span2").text("請輸入暱稱"); $("#span2").css({"color":"red"}); return B=false; } }); $("#pass1").blur(function(){ var pass1=$("#pass1").val(); if(pass1 == ""){ $("#span3").text("請輸入密碼"); $("#span3").css({"color":"red"}); return C=false; }else if(pass1.length<6){ $("#span3").text("密碼長度不夠6位數"); $("#span3").css({"color":"red"}); return C=false; }else{ $("#span3").text("√"); $("#span3").css({"color":"green"}); return C=true; } }); $("#pass2").blur(function(){ var pass2=$("#pass2").val(); var pass=$("#pass1").val(); if(pass2 == ""){ $("#span4").text("請輸入密碼"); $("#span4").css({"color":"red"}); return D=false; }else if(pass2.length<6){ $("#span4").text("密碼長度不夠6位數"); $("#span4").css({"color":"red"}); return D=false; }else if(pass2 != pass){ $("#span4").text("兩次密碼不一致"); $("#span4").css({"color":"red"}); return D=false; }else{ $("#span4").text("√"); $("#span4").css({"color":"green"}); return D=true; } }); $("#dianji").click(function(){ if(A && B && C && D == true){ alert("註冊成功"); }else{ alert("註冊失敗"); } }); }); </script> </head> <body> <h4 style="color: #ff0000; margin-left: 300px">以下均為必填</h4> <div style="margin-left: 300px"> <form method="post" action=""> <table border="1"> <tr> <td>請填寫您的Email地址</td> <td ><input type="text" id="email" ><span id="span" style="color: #ff0000">請填寫有效的Email地址</span></td> </tr> <tr> <td>設定您再噹噹網的暱稱</td> <td ><input type="text" id="name" ><span id="span2" style="color: #ff0000">您的暱稱可以由英文字母、中文、數字組成</span></td> </tr> <tr> <td>設定密碼</td> <td><input type="password" id="pass1" ><span id="span3" style="color: #ff0000">輸入6-10位的密碼</span></td> </tr> <tr> <td>再次輸入密碼</td> <td><input type="password" id="pass2" ><span id="span4" style="color: #ff0000">再次輸入密碼</span></td> </tr> </table> <input type="submit" value="註冊" id="dianji"> </form> </div> </body> </html>