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>
时间： 2024-10-10 05:08:29