注册登录---前台代码（3）
注册html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 7 <script src="js/jquery-easyui-1.5/jquery.min.js"></script> 8 <script type="text/javascript" src="js/jquery-easyui-1.5/jquery.min.js"></script> 9 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 10 <script type="text/javascript" src="js/bootstrap.min.js"></script> 11 <script src="js/fun_js/isexitUser.js"></script> 12 <link rel="stylesheet" href="css/注册.css"> 13 </head> 14 <body> 15 <div class="header-border"></div> 16 <div class="header-bg"> 17 <div class="header-left"> 18 <span>土地四至管理系统</span> 19 </div> 20 <div class="head-right"> 21 <a class="link_login" target="_blank" href="loginnew.html"> 22 <span class="active">去登陆></span> 23 </a> 24 </div> 25 </div> 26 <div id="contain"> 27 <div class="middle"> 28 <div class="container"> 29 <div class="row clearfix"> 30 <div class="col-md-12 column"> 31 <div class="carousel slide" id="carousel-581790"> 32 <ol class="carousel-indicators"> 33 <li class="active" data-slide-to="0" data-target="#carousel-581790"> 34 </li> 35 <li data-slide-to="1" data-target="#carousel-581790"> 36 </li> 37 <li data-slide-to="2" data-target="#carousel-581790"> 38 </li> 39 </ol> 40 <div class="carousel-inner"> 41 <div class="item active"> 42 <img alt="" src="pic/ct1.png" /> 43 <div class="carousel-caption"> 44 <h4> 45 First Thumbnail label 46 </h4> 47 48 </div> 49 </div> 50 <div class="item"> 51 <img alt="" src="pic/ct2.png" /> 52 <div class="carousel-caption"> 53 <h4> 54 Second Thumbnail label 55 </h4> 56 57 </div> 58 </div> 59 <div class="item"> 60 <img alt="" src="pic/ct3.png" /> 61 <div class="carousel-caption"> 62 <h4> 63 Third Thumbnail label 64 </h4> 65 66 </div> 67 </div> 68 <div class="item"> 69 <img alt="" src="pic/ct4.png" /> 70 <div class="carousel-caption"> 71 <h4> 72 Third Thumbnail label 73 </h4> 74 75 </div> 76 </div> 77 </div> <a class="left carousel-control" href="#carousel-581790" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-581790" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 78 </div> 79 </div> 80 </div> 81 </div> 82 <div id="div1"> 83 <div class="tab"><i></i><span>注册</span></div> 84 <form class="form-horizontal" role="form"> 85 <div class="form-group"> 86 <!-- <label for="username" class="col-sm-2 control-label">昵称</label>--> 87 <div class="col-sm-10"> 88 <input type="text" class="form-control" name="usert.username" id="username" 89 placeholder="请输入用户名" autocomplete="off" onblur="checkuser()"><label id="message"></label> 90 </div> 91 </div> 92 <div class="form-group"> 93 <!-- <label for="password" class="col-sm-2 control-label">密 码</label>--> 94 <div class="col-sm-10"> 95 <input type="text" class="form-control" name="usert.password" id="password" 96 placeholder="6-12位密码" autocomplete="off"> 97 </div> 98 </div> 99 <div class="form-group"> 100 <!--<label for="email" class="col-sm-2 control-label">邮 箱</label>--> 101 <div class="col-sm-10"> 102 <input type="text" class="form-control" name="usert.email" id="email" 103 placeholder="请输入邮箱" onblur="check()" autocomplete="off"> 104 </div> 105 </div> 106 <div class="form-group"> 107 <!-- <label for="address" class="col-sm-2 control-label">地 址</label>--> 108 <div class="col-sm-10"> 109 <input type="text" class="form-control" name="usert.address" id="address" 110 placeholder="请选择所在地" list="listaddress" autocomplete="off"> 111 </div> 112 </div> 113 <div class="form-group"> 114 <!-- <label for="checknumber" class="col-sm-2 control-label">验证</label>--> 115 <div class="col-sm-10"> 116 <input type="text" class="form-control" id="checknumber" 117 placeholder="请输入验证码" onblur="checknumber1()"> 118 <img id="checkPic" src="http://localhost:8080/GD/checkAction_execute.action" onclick="this.src='http://localhost:8080/GD/checkAction_execute.action?'+ Math.random()" title="点击图片刷新验证码"/><br> 119 </div> 120 </div> 121 <div class="form-group"> 122 <div class="col-sm-offset-2 col-sm-10"> 123 <button type="submit" class="btn btn-default" id="tijiao" onclick="regist()">立即注册</button> 124 </div> 125 </div> 126 </form> 127 <div class="login_btn"> 128 <a href="loginnew.html">已有账号，直接登录</a> 129 </div> 130 </div> 131 </div> 132 133 </div> 134 <datalist id="listaddress"> 135 <option>黑龙江省</option> 136 <option>吉林省</option> 137 <option>辽宁省</option> 138 <option>河北省</option> 139 </datalist> 140 141 142 143 144 <!-- 145 用户名：<input type="text" name="usert.username" id="username"> 146 密码：<input type="text" name="usert.password" id="password"><br> 147 邮箱：<input type="text" name="usert.email" id="email"><br> 148 149 <input type="submit" value="注册" id="tijiao"> 150 <input type="button" value="登录" onclick="jumpLogin()"> 151 --> 152 <!-- 153 154 <script> 155 var user = { 156 initEvent:function () { 157 $("input[name='usert.username']").unbind("blur"); 158 $("input[name='usert.username']").bind("blur",function () { 159 user.checkUser(encodeURI(encodeURI($(this).val()))); 160 }); 161 }, 162 checkUser:function (username) { 163 /* var txt1 = document.getElementById('username').value; 164 var k = encodeURI(encodeURI(txt1));*/ 165 var parameter = { 166 username:username/*入参,为什么用这样表示,形参:实参？*/ 167 }; 168 $.ajax({ 169 type: "post", 170 async: false, 171 url: "http://localhost:8080/GD/registAction_isexit.action", 172 data:{ 173 "username":username 174 }, 175 dataType: "json", 176 success: function (data) { 177 // alert("查询后的数据"); 178 if(username == null || username == undefined || username == ''){ 179 $("#message").text("用户名不能为空"); 180 $("#message").css("color","red"); 181 } else if(data.length == 0){ 182 $("#message").text("该用户名可用"); 183 $("#message").css("color","blue"); 184 }else{ 185 $("#message").text("该用户名重复，请重新填写"); 186 $("#message").css("color","red"); 187 } 188 } 189 }); 190 } 191 } 192 $(document).ready(function(){ 193 194 user.initEvent(); /*绑定到用户名输入框*/ 195 // alert("1111"); 196 }); 197 function jumpLogin() { 198 document.location.href="login.html"; 199 } 200 $('#tijiao').click(function () { 201 var username = $("#username").val(); 202 var password = $("#password").val(); 203 var email = $("#email").val(); 204 var address = $("#address").val(); 205 $.ajax({ 206 type:"post", 207 async:false, 208 url:"http://localhost:8080/GD/registAction_add.action", 209 dataType:"json", 210 data:{ 211 "usert.username":username, 212 "usert.password":password, 213 "usert.email":email, 214 "usert.address":address, 215 }, 216 success:function (data) { 217 alert("注册成功"); 218 219 } 220 }) 221 }) 222 </script> 223 --> 224 </body> 225 </html>
js脚本
1 /** 2 * Created by wei on 2017/9/21. 3 */ 4 //验证用户名是否重复 5 function checkuser() { 6 var user_name = $("#username").val(); 7 // alert(user_name); 8 $.ajax({ 9 type: "post", 10 async: false, 11 url: "http://localhost:8080/GD/registAction_isexit.action", 12 dataType: "json", 13 data: 14 "username=" + user_name, 15 success: function (data) { 16 if (data == 1){ 17 alert("用户名已存在，请重新输入"); 18 }if(data == 0){ 19 console.log("输入正确"); 20 } 21 } 22 }); 23 } 24 //验证邮箱格式的正确性 25 function check() { 26 /* 正则表达式*/ 27 var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); 28 /*要验证的对象*/ 29 var obj = document.getElementById("email"); 30 31 if(!reg.test(obj.value) && obj.value === ""){ 32 alert("输入格式有误"); 33 return false; 34 } else{ 35 console.log("输入正确"); 36 return true; 37 } 38 } 39 40 //用户名，密码，邮箱都正确，进行注册 41 function regist() { 42 var username = $("#username").val(); 43 var password = $("#password").val(); 44 var email = $("#email").val(); 45 var address = $("#address").val(); 46 $.ajax({ 47 type: "post", 48 async: false, 49 url: "http://localhost:8080/GD/registAction_add.action", 50 dataType: "json", 51 data: { 52 "usert.username": username, 53 "usert.password": password, 54 "usert.email": email, 55 "usert.address": address, 56 }, 57 success: function (data) { 58 alert("注册成功"); 59 } 60 }) 61 }
css样式
1 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,menu,nav,section 2 {margin: 0;padding: 0} 3 ol,ul{list-style: none} 4 h1,h2,h3,h4,h5{font-weight: 400} 5 #div1{margin-top: 90px; width: 350px;height: 400px;border: 1px solid lightgoldenrodyellow;border-radius:4px;box-shadow: 0 0 10px gray;float: right;background-color: #f9f2f4;padding-left: 50px;margin-right:200px;} 6 p{text-align: center;font-family: AmdtSymbols;font-size: large} 7 #checknumber{ 8 width: 120px; 9 float: left; 10 11 } 12 #checkPic{ 13 float: right; 14 margin-right: 10px; 15 } 16 #username{width:250px} 17 #password{width:250px} 18 #email{width: 250px} 19 #address{width: 250px} 20 .container{height: 400px;width: 800px;float: left;margin-top: 100px;margin-left: 200px} 21 body{/*background: url("pic/注册.jpg") no-repeat fixed left;*//*background-color:mediumseagreen*/} 22 .header-border{background: #00b38a;height: 3px;} 23 .header-bg{height: 50px;background-color: #fafafa} 24 .middle{background:url(https://static.lagou.com/lp/static/images/bg_294f1b9.png) no-repeat;background-size:cover;padding-bottom:20px;min-height:600px} 25 26 .link_login{float: right;margin-top: 15px;margin-right: 100px} 27 .header-left{float: left;margin-left: 200px;margin-top: 15px;font-family:Aparajita;font-size: 20px;} 28 29 form input[type=text]{display: block;border: 0;border-bottom: 1px solid #00b389} 30 31 .tab{margin-bottom: 10px; margin-top: 20px;} 32 .tab i{display: inline-block;width: 4px;height: 18px;vertical-align:middle;margin-right:10px;background-color:#00b38a;} 33 .tab span{font-weight: 300;font-family: "Arial Black"} 34 .btn{background-color: #00b389;width: 150px;text-align: center;color: #fff;border-radius: 4px;} 35 36 .login_btn a{font-size: 14px;color: #00b38a;text-decoration: underline} 37 .login_btn{text-align: center;margin-top: 5px;margin-right:45px;}
