-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhome-setting-address-phone.html
318 lines (283 loc) · 14.4 KB
/
home-setting-address-phone.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>设置-个人信息</title>
<link rel="icon" href="/assets/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/webbase.css" />
<link rel="stylesheet" type="text/css" href="css/pages-seckillOrder.css" />
</head>
<body>
<!--页面顶部白条条，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div class="nav-bottom"></div>
<script type="text/javascript">$(".nav-bottom").load("top.html");</script>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#service").hover(function(){
$(".service").show();
},function(){
$(".service").hide();
});
$("#shopcar").hover(function(){
$("#shopcarlist").show();
},function(){
$("#shopcarlist").hide();
});
})
</script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript" src="plugins/jquery.validate/jquery.validate.js"></script>
<script>
$(function(){
//jquery.validate
$("#phone-form").validate({
submitHandler: function() {
//验证通过后 的js代码写在这里
}
})
})
//下面是一些常用的验证规则扩展
/*-------------验证插件配置 懒人建站http://www.51xuediannao.com/-------------*/
//配置错误提示的节点，默认为label，这里配置成 span （errorElement:'span'）
$.validator.setDefaults({
errorElement:'span'
});
//配置通用的默认提示语
$.extend($.validator.messages, {
required: '必填',
equalTo: "请再次输入相同的值"
});
/*-------------扩展验证规则使用-------------*/
//邮箱
jQuery.validator.addMethod("mail", function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, "邮箱格式不对");
//电话验证规则
jQuery.validator.addMethod("phone", function (value, element) {
var phone = /^0\d{2,3}-\d{7,8}$/;
return this.optional(element) || (phone.test(value));
}, "电话格式如：0371-68787027");
//区号验证规则
jQuery.validator.addMethod("ac", function (value, element) {
var ac = /^0\d{2,3}$/;
return this.optional(element) || (ac.test(value));
}, "区号如：010或0371");
//无区号电话验证规则
jQuery.validator.addMethod("noactel", function (value, element) {
var noactel = /^\d{7,8}$/;
return this.optional(element) || (noactel.test(value));
}, "电话格式如：68787027");
//手机验证规则
jQuery.validator.addMethod("mobile", function (value, element) {
var mobile = /^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mobile.test(value));
}, "手机格式不对");
//邮箱或手机验证规则
jQuery.validator.addMethod("mm", function (value, element) {
var mm = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mm.test(value));
}, "格式不对");
//电话或手机验证规则
jQuery.validator.addMethod("tm", function (value, element) {
var tm=/(^1[3|4|5|7|8]\d{9}$)|(^\d{3,4}-\d{7,8}$)|(^\d{7,8}$)|(^\d{3,4}-\d{7,8}-\d{1,4}$)|(^\d{7,8}-\d{1,4}$)/;
return this.optional(element) || (tm.test(value));
}, "格式不对");
//年龄
jQuery.validator.addMethod("age", function(value, element) {
var age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
return this.optional(element) || (age.test(value));
}, "不能超过120岁");
///// 20-60 /^([2-5]\d)|60$/
//传真
jQuery.validator.addMethod("fax",function(value,element){
var fax = /^(\d{3,4})?[-]?\d{7,8}$/;
return this.optional(element) || (fax.test(value));
},"传真格式如：0371-68787027");
//验证当前值和目标val的值相等 相等返回为 false
jQuery.validator.addMethod("equalTo2",function(value, element){
var returnVal = true;
var id = $(element).attr("data-rule-equalto2");
var targetVal = $(id).val();
if(value === targetVal){
returnVal = false;
}
return returnVal;
},"不能和原始密码相同");
//大于指定数
jQuery.validator.addMethod("gt",function(value, element){
var returnVal = false;
var gt = $(element).data("gt");
if(value > gt && value != ""){
returnVal = true;
}
return returnVal;
},"不能小于0 或空");
//汉字
jQuery.validator.addMethod("chinese", function (value, element) {
var chinese = /^[\u4E00-\u9FFF]+$/;
return this.optional(element) || (chinese.test(value));
}, "格式不对");
//指定数字的整数倍
jQuery.validator.addMethod("times", function (value, element) {
var returnVal = true;
var base=$(element).attr('data-rule-times');
if(value%base!=0){
returnVal=false;
}
return returnVal;
}, "必须是发布赏金的整数倍");
//身份证
jQuery.validator.addMethod("idCard", function (value, element) {
var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//(15位)
var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;//(18位)
return this.optional(element) || (isIDCard1.test(value)) || (isIDCard2.test(value));
}, "格式不对");
</script>
</body>
<!--header-->
<div id="account">
<div class="py-container">
<div class="yui3-g home">
<!--左侧列表-->
<div class="yui3-u-1-6 list">
<div class="person-info">
<div class="person-photo"><img src="img/_/photo.png" alt=""></div>
<div class="person-account">
<span class="name">Michelle</span>
<span class="safe">账户安全</span>
</div>
<div class="clearfix"></div>
</div>
<div class="list-items">
<dl>
<dt><i>·</i> 订单中心</dt>
<dd ><a href="home-index.html" >我的订单</a></dd>
<dd><a href="home-order-pay.html" >待付款</a></dd>
<dd><a href="home-order-send.html" >待发货</a></dd>
<dd><a href="home-order-receive.html" >待收货</a></dd>
<dd><a href="home-order-evaluate.html" >待评价</a></dd>
</dl>
<dl>
<dt><i>·</i> 我的中心</dt>
<dd><a href="home-person-collect.html" >我的收藏</a></dd>
<dd><a href="home-person-footmark.html" >我的足迹</a></dd>
</dl>
<dl>
<dt><i>·</i> 物流消息</dt>
</dl>
<dl>
<dt><i>·</i> 设置</dt>
<dd><a href="home-setting-info.html" >个人信息</a></dd>
<dd><a href="home-setting-address.html" >地址管理</a></dd>
<dd><a href="home-setting-safe.html" class="list-active" >安全管理</a></dd>
</dl>
</div>
</div>
<!--右侧主内容-->
<div class="yui3-u-5-6">
<div class="body userSafe">
<ul class="sui-nav nav-tabs nav-large nav-primary ">
<li><a href="#one" data-toggle="tab">密码设置</a></li>
<li class="active"><a href="#two" data-toggle="tab">绑定手机</a></li>
</ul>
<div class="tab-content ">
<div id="one" class="tab-pane">
<form class="sui-form form-horizontal sui-validate" id="jsForm">
<div class="control-group">
<label for="inputusername" class="control-label">用户名：</label>
<div class="controls">
<input id="pwdid" class="fn-tinput" data-rule-remote="http://www.baidu.com" type="password" name="OldPassword" placeholder="输入昵称"
required data-msg-required="请输入昵称" minlength="6" data-msg-minlength="至少输入6个字符"
/>
</div>
</div>
<div class="control-group">
<label for="inputPassword" class="control-label">密码：</label>
<div class="controls">
<input class="fn-tinput" type="password" name="password" value="" placeholder="新密码" required id="password" data-rule-remote="php.php">
</div>
</div>
<div class="control-group">
<label for="inputRepassword" class="control-label">重复密码：</label>
<div class="controls">
<input class="fn-tinput" type="password" name="confirm_password" value="" placeholder="确认新密码" required equalTo="#password">
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button type="submit" class="sui-btn btn-primary">提交按钮</button>
</div>
</div>
</form>
</div>
<div id="two" class="tab-pane active">
<!--步骤条-->
<div class="sui-steps steps-auto">
<div class="wrap">
<div class="finished">
<label><span class="round"><i class="sui-icon icon-pc-right"></i></span><span>第一步 验证身份</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
</div>
</div>
<div class="wrap">
<div class="current">
<label><span class="round">2</span><span>第二步 绑定新手机号</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
</div>
</div>
<div class="wrap">
<div class="todo">
<label><span class="round">3</span><span>第三步 完成</span></label>
</div>
</div>
</div>
<!--表单-->
<form class="sui-form form-horizontal sui-validate" data-toggle='validate' id="phone-form">
<div class="control-group">
<label for="inputPassword" class="control-label">手机号：</label>
<div class="controls">
<input name="inputphone" type="text" id="inputphone" placeholder="请输入新手机号">
</div>
</div>
<div class="control-group">
<label for="inputcode" class="control-label">验证码：</label>
<div class="controls">
<input name="inputcode" type="text" id="inputcode">
</div>
<div class="controls">
验证码
</div>
</div>
<div class="control-group">
<label for="inputRepassword" class="control-label">短信验证码：</label>
<div class="controls">
<input name="msgcode" type="text" id="msgcode">
</div>
<div class="controls">
<button class="sui-btn btn-info">发送</button>
</div>
</div>
<div class="control-group next-btn">
<a class="sui-btn btn-primary" href="home-setting-safe.html">上一步</a>
<a class="sui-btn btn-primary" type="submit" href="home-setting-address-complete.html">下一步</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
</html>