//注冊功能script========================================= //input聚焦失焦,通過id獲取 $("#uname1").focus(function(){ if($(this).val().length!=0){ $(this).parent().next("div").text("支持中文，字母，數字，'-'，'_'的多種組合"); } }); $("#uname1").blur(function(){ if($(this).val().length==0){ flag1=false; $(this).parent().next("div").text(""); $(this).parent().next("div").css("color",'#ccc'); }else if($(this).val().length>0 && $(this).val().length<4){ flag1=false; $(this).parent().next("div").text("長度只能在4-20個字符之間"); $(this).parent().next("div").css("color",'red'); }else if($(this).val().length>=4&& !isNaN($(this).val())){ flag1=false; $(this).parent().next("div").text("用戶名不能為純數字"); $(this).parent().next("div").css("color",'red'); }else{ flag1=true; $(this).parent().next("div").text(""); } }); //密碼 $("#upass1").focus(function(){ if($(this).val().length==0){ $(this).parent().next("div").text("建議使用字母、數字和符號兩種以上的組合，6-20個字符"); } }); $("#upass1").blur(function(){ if($(this).val().length==0){ flag2=false; $(this).parent().next("div").text(""); $(this).parent().next("div").css("color",'#ccc'); }else if($(this).val().length>0 && $(this).val().length<4){ flag2=false; $(this).parent().next("div").text("長度只能在4-16個字符之間"); $(this).parent().next("div").css("color",'red'); }else{ flag2=true; $(this).parent().next("div").text(""); } });
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <link rel="icon" href="img/core-img/favicon.ico"> 8 <link rel="stylesheet" href="style.css"> 9 10 </head> 11 12 <body> 13 14 <div id="logincontent" > 15 <a href="#" class="login" >注冊 </a> / 16 <a href="#" class="register">登陸</a> 17 18 </div> 19 <!-- 默認隱藏 --> 20 <div id="welcome_user" style="display:none"> 21 <h1>登陸成功~~</h1> 22 </div> 23 <!--登錄--> 24 <div id="mymodal" class="modal fade" tabindex="-1"> 25 <div class="modal-dialog"> 26 <div class="modal-content"> 27 <div class="modal-header"> 28 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 29 <span aria-hidden="true">×</span> 30 </button> 31 <h4 class="modal-title text-center">用戶登錄</h4> 32 </div> 33 <div class="modal-body"> 34 <form role="form" id="loginForm"> 35 <div class="form-group"> 36 <label for="uname">用戶名</label> 37 <div class="input-group"> 38 <span class="input-group-addon"><span 39 class="glyphicon glyphicon-user"></span></span> <input type="text" class="form-control" id="uname" name="login" placeholder="請輸入用戶名或電話號碼" required /> 40 </div> 41 </div> 42 <div class="form-group"> 43 <label for="upass">密碼</label> 44 <div class="input-group"> 45 <span class="input-group-addon" id="basic-addon2"><span 46 class="glyphicon glyphicon-asterisk"></span></span> <input type="password" class="form-control" id="upass" name="password" placeholder="請輸入密碼" required /> 47 </div> 48 </div> 49 <div class="form-button-group"> 50 <button type="button" class="btn btn-primary btn-block" id="login">登錄</button> 51 </div> 52 </form> 53 </div> 54 </div> 55 56 </div> 57 58 </div> 59 <!-- /.modal --> 60 <!--注冊--> 61 <div id="mymodal1" class="modal fade" tabindex="-1"> 62 <div class="modal-dialog"> 63 <div class="modal-content"> 64 <div class="modal-header"> 65 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 66 <span aria-hidden="true">×</span> 67 </button> 68 <h4 class="modal-title text-center">用戶注冊</h4> 69 </div> 70 <div class="modal-body"> 71 <form id="registerForm" method="post" action=""> 72 <div class="form-group"> 73 <label for="uname1">用戶名</label> 74 <div class="input-group"> 75 <span class="input-group-addon"><span 76 class="glyphicon glyphicon-user"></span></span> <input type="text" class="form-control" id="uname1" name="username" placeholder="請輸入用戶名" autocomplete="off" /> 77 </div> 78 </div> 79 <div class="form-group"> 80 <label for="upass1">密碼</label> 81 <div class="input-group"> 82 <span class="input-group-addon"><span 83 class="glyphicon glyphicon-asterisk"></span></span> <input type="password" class="form-control" id="upass1" name="password" autocomplete="off" placeholder="請輸入密碼" /> 84 </div> 85 </div> 86 <!--has-success has-error--> 87 <div class="form-group"> 88 <label for="passConfirm">確認密碼</label> 89 <div class="input-group"> 90 <span class="input-group-addon"><span 91 class="glyphicon glyphicon-asterisk"></span></span> <input type="password" class="form-control" id="passConfirm" autocomplete="off" placeholder="請再次輸入密碼" /> 92 </div> 93 </div> 94 <div class="form-group"> 95 <label for="userphone">電話號碼</label> 96 <div class="input-group"> 97 <span class="input-group-addon"><span 98 class="glyphicon glyphicon-envelope"></span></span> <input type="userphone" class="form-control" id="phone" name="userphone" autocomplete="off" placeholder="清輸入電話號碼" /> 99 </div> 100 </div> 101 <div class="form-button-group"> 102 <button type="button" class="btn btn-primary btn-block" id="register">注冊</button> 103 </div> 104 </form> 105 </div> 106 </div> 107 108 </div> 109 110 </div> 111 112 113 <script src="js/jquery/jquery-2.2.4.min.js"></script> 114 <script src="js/bootstrap/popper.min.js"></script> 115 <script src="js/bootstrap/bootstrap.min.js"></script> 116 <script src="js/plugins/plugins.js"></script> 117 <script src="js/active.js"></script> 118 119 <!--####################jQuery腳本################################ --> 120 <script> 121 $(function() { 122 //點擊顯示登錄框和注冊框(bootstrap模態框) 123 $('.login').click(function() { 124 $('#mymodal1').modal('show'); //點擊注冊顯示登陸框 125 }); 126 $('.register').click(function() { 127 $('#mymodal').modal('show'); 128 }); 129 //以下部分是若不連接后台的測試部分 130 var username = ""; 131 var password1 = ""; 132 var userphone= ""; 133 //注冊功能 134 $("#register").click(function() { 135 var upass1 = $("#upass1").val();//獲取輸入的密碼值 136 var passConfirm = $("#passConfirm").val();//獲取確定密碼的值 137 var uname1 = $("#uname1").val();//獲取用戶名的值 138 var phone = $("#phone").val();//獲取用戶電話的值 139 if($.trim(uname1) == "" || $.trim(phone) == "") {//$.trim(uname1) 去空格操作 140 alert("用戶名與電話號碼均不能為空！");//彈出警告框---一下不注釋 141 } else { 142 if(passConfirm !== upass1) { 143 alert("兩次輸入密碼不相同"); 144 } else { 145 var aa = $('#mymodal'); //獲取注冊框id 146 var b = $("#mymodal1"); //獲取登陸框id 147 username=uname1;//給剛剛模擬的數據賦成你輸入的值 148 password1 =upass1; 149 userphone=phone; 150 alert("注冊成功了用你剛注冊的用戶名和密碼去登陸吧~") 151 b.modal('hide'); //隱藏 注冊框 152 aa.modal('show'); //顯示登陸框 153 154 //以下是向后端傳數據 155 /* 156 $.ajax({ 157 type: "post", 158 url: "doregister", 159 data: $("#registerForm").serialize(), 160 dataType: "json", 161 success: function(data) { //ajax返回的數據 162 var a = data; 163 if(a == "1") { 164 b.modal('hide'); 165 aa.modal('show'); 166 } 167 }, 168 error: function(data) { 169 // alert(data); 170 alert("注冊失敗"); 171 } 172 });*/ 173 174 } 175 } 176 177 }); 178 //登陸功能 179 $("#login").click(function() { 180 var aa = $('#mymodal'); //獲取注冊框的id 181 var b = $("#mymodal1"); //獲取登陸框的id 182 var uname = $('#uname').val();//獲取登陸框輸入的用戶名值 183 var pass = $('#upass').val();//獲取登陸框輸入的密碼值 184 var logincontent = $('#logincontent');//獲取登陸框的最先進去看見的 “登陸 / 注冊” 的id 185 var welcome_user = $('#welcome_user');//獲取隱藏的那一堆東西的id 186 187 if($.trim(uname) == "") { 188 alert("請輸入用戶名或電話號碼"); 189 } else { 190 if(uname == username || uname == userphone ){ 191 if(pass==password1){ 192 alert("登陸成功") 193 b.modal('hide');//隱藏注冊框 194 aa.modal('hide');//隱藏登陸框 195 logincontent.attr("style", "display:none;");//隱藏"登陸 / 注冊"這個東西 196 welcome_user.attr("style", "display:inlines;");//顯示成功登陸后的東西 197 }else{ 198 alert("別瞎搞，登陸失敗了，按照剛注冊的登陸，或者重新加載頁面重新注冊~~") 199 } 200 } 201 202 203 204 //往后台傳東西的 205 /*$.ajax({ 206 type: "post", 207 url: "doUser_login", 208 data: $("#loginForm").serialize(), 209 dataType: "json", 210 success: function(data) { //ajax返回的數據 211 var a = data; 212 if(a == "1") { 213 b.modal('hide'); 214 aa.modal('hide'); 215 logincontent.attr("style", "display:none;"); 216 welcome_user.attr("style", "display:inlines;"); 217 } 218 }, 219 error: function(data) { 220 // alert(data); 221 alert("登陸失敗"); 222 } 223 });*/ 224 } 225 }); 226 227 }); 228 </script> 229 </body> 230 231 </html>