//注册功能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>