1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>蓝源Eloan-P2P平台->用户注册</title> 6 <link rel="stylesheet" href="/js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" /> 7 <link rel="stylesheet" href="/css/core.css" type="text/css" /> 8 <script type="text/javascript" src="/js/jquery/jquery-2.1.3.js"></script> 9 <script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script> 10 <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script> 11 <script type="text/javascript" src="/js/plugins/jquery-validation/localization/messages_zh.js"></script> 12 <script type="text/javascript" src="/js/plugins/jquery.form.js"></script> 13 <script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script> 14 15 <style type="text/css"> 16 .el-register-form{ 17 width:600px; 18 margin-left:auto; 19 margin-right:auto; 20 margin-top: 20px; 21 } 22 .el-register-form .form-control{ 23 width: 220px; 24 display: inline; 25 } 26 </style> 27 <script type="text/javascript"> 28 $(function(){ 29 //第一种Ajax提交表单的方式 30 //$("#registerForm").ajaxForm(); 31 //执行流程:1,点击表单的提交按钮,2,触发jQuery-validate的验证; 32 //3,验证成功,jquery-validate会自动提交表单;(因为这个时候表单已经是Ajax表单了,所以表单的提交通过Ajax提交) 33 34 //自定义jquery-validate验证方法 35 $.validator.addMethod("checkUsername", function(value, element) { 36 //这个验证方法返回一个boolean值来代表验证是否通过 37 var ret=false; 38 $.ajax({ 39 dataType:"json", 40 type:"post", 41 async:false, 42 url:"/checkUsername.do", 43 data:{ 44 username:value 45 }, 46 success:function(data){ 47 ret = data.success; 48 } 49 }); 50 return ret; 51 }, "用户名已经存在!"); 52 53 $("#registerForm").validate({ 54 rules:{ 55 username:{ 56 required:true, 57 rangelength:[4,16], 58 checkUsername:true 59 }, 60 password:{ 61 required:true, 62 rangelength:[4,16] 63 }, 64 confirmPwd:{ 65 equalTo:"#password" 66 } 67 }, 68 messages:{ 69 username:{ 70 required:"请输入用户名", 71 rangelength:"用户名长度为{0}到{1}", 72 remote:"用户名已经存在" 73 }, 74 password:{ 75 required:"请输入密码", 76 rangelength:"密码长度为{0}到{1}" 77 }, 78 confirmPwd:{ 79 equalTo:"两次输入密码不一致" 80 } 81 }, 82 //修改错误提示文字的样式 83 errorClass:"text-danger", 84 //处理错误高亮 85 highlight:function(element,errorClass){ 86 //寻找离自己最近的div 87 $(element).closest(".form-group").addClass("has-error"); 88 }, 89 //取消错误高亮 90 unhighlight:function(element,errorClass){ 91 $(element).closest(".form-group").removeClass("has-error"); 92 }, 93 //在表单验证成功之后提交表单做的事情 94 //第二种Ajax提交表单方式: 95 //1,点击表单中的提交按钮,2,jquery-valiate执行验证通过;因为这个时候我们配置了submitHandler,所以,当验证成功之后; 96 //jquery-validate不会自动提交表单,来执行submitHandler,3,在submitHandler中直接使用ajaxSubmit来完成表单提交; 97 submitHandler:function(form){ 98 $(form).ajaxSubmit({ 99 dataType:"json", 100 success:function(data){ 101 if(data.success){ 102 $.messager.confirm("提示","注册成功,点击确认进入登录",function(){ 103 window.location.href="/login.html"; 104 }); 105 }else{ 106 $.messager.popup("注册失败,"+data.msg); 107 } 108 } 109 }); 110 } 111 }); 112 }) 113 </script> 114 </head> 115 <body> 116 <!-- 网页头信息 --> 117 <div class="el-header" > 118 <div class="container" style="position: relative;"> 119 <ul class="nav navbar-nav navbar-right"> 120 <li><a href="/">首页</a></li> 121 <li><a href="/login.html">登录</a></li> 122 <li><a href="#">帮助</a></li> 123 </ul> 124 </div> 125 </div> 126 127 <!-- 网页导航 --> 128 <div class="navbar navbar-default el-navbar"> 129 <div class="container"> 130 <div class="navbar-header"> 131 <a href=""><img alt="Brand" src="/images/logo.png"></a> 132 <span class="el-page-title">用户注册</span> 133 </div> 134 </div> 135 </div> 136 137 <!-- 网页内容 --> 138 <div class="container"> 139 <form id="registerForm" class="form-horizontal el-register-form" action="/register.do" method="post" > 140 <p class="h4" style="margin: 10px 10px 20px;color:#999;">请填写注册信息，点击“提交注册”即可完成注册！</p> 141 <div class="form-group"> 142 <label class="control-label col-sm-2">用户名</label> 143 <div class="col-sm-10"> 144 <input type="text" autocomplete="off" name="username" class="form-control" id="username"/> 145 <p class="help-block">用户名为4~16位字母，数字，符号或中文</p> 146 </div> 147 </div> 148 <div class="form-group"> 149 <label class="control-label col-sm-2">密 码</label> 150 <div class="col-sm-10"> 151 <input type="password" autocomplete="off" name="password" id="password" class="form-control" /> 152 <p class="help-block">密码为4~16位字符组成,采用数字、字母、符号安全性更高</p> 153 </div> 154 </div> 155 <div class="form-group"> 156 <label class="control-label col-sm-2">确认密码</label> 157 <div class="col-sm-10"> 158 <input type="password" autocomplete="off" name="confirmPwd" class="form-control" /> 159 <p class="help-block">请再次填写密码</p> 160 </div> 161 </div> 162 <div class="form-gorup"> 163 <div class="col-sm-offset-2"> 164 <button type="submit" class="btn btn-success"> 165 同意协议并注册 166 </button> 167    168 <a href="/login.html" class="text-primary">已有账号，马上登录</a> 169 170 <p style="padding-left: 50px;margin-top: 15px;"> 171 <a href="#">《使用协议说明书》</a> 172 </p> 173 </div> 174 </div> 175 </form> 176 </div> 177 <!-- 网页版权 --> 178 <div class="container-foot-2"> 179 <div class="context"> 180 <div class="left"> 181 <p>专注于高级Java开发工程师的培养</p> 182 <p>版权所有： 2015广州小码哥教育科技有限公司</p> 183 <p>地  址： 广州市天河区棠下荷光三横路盛达商务园D座5楼</p> 184 <p>电  话： 020-29007520   185 邮箱： [email protected]</p> 186 <p> 187 <a href="http://www.miitbeian.gov.cn" style="color: #ffffff">ICP备案 188 ：粤ICP备字1504547</a> 189 </p> 190 <p> 191 <a href="http://www.gzjd.gov.cn/wlaqjc/open/validateSite.do" style="color: #ffffff">穗公网安备：44010650010086</a> 192 </p> 193 </div> 194 <div class="right"> 195 <a target="_blank" href="http://weibo.com/ITxiaomage"><img 196 src="/images/sina.png"></a> 197 </div> 198 <div class="clearfix"></div> 199 </div> 200 </div> 201 </body> 202 </html>