请转载此文的朋友务必附带原文链接，谢谢。
原文链接：http://xuyran.blog.51cto.com/11641754/1861926
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<
form
class
=
"mui-input-group"
>
<
div
class
=
"mui-input-row"
>
<
input
type
=
"tel"
placeholder
=
"手机"
required
=
"required"
>
</
div
>
<
div
>请输入正确的手机号码</
div
>
<
div
class
=
"mui-input-row ss"
>
<
input
type
=
"text"
placeholder
=
"验证码"
id
=
"yzm"
required
=
"required"
>
<
button
type
=
"button"
class
=
"btn"
id
=
"getCode"
>发送</
button
>
</
div
>
<
div
>验证码必须为6位数字</
div
>
<
div
class
=
"mui-input-row"
>
<
input
type
=
"password"
placeholder
=
"限制6-20位字符，区分大小写"
name
=
"password"
required
=
"required"
>
</
div
>
<
div
>密码不得小于6或大于20个字符</
div
>
<
div
class
=
"mui-input-row"
>
<
input
type
=
"password"
placeholder
=
"确认密码"
name
=
"password-sure"
required
=
"required"
>
</
div
>
<
div
>两次密码输入不一致</
div
>
<
div
class
=
"mui-input-row"
id
=
"submit"
>
<
button
type
=
"button"
class
=
"btn"
>提交</
button
>
</
div
>
</
form
>
|
jquery代码如下：
|
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
|
$(
function
(){
//手机号检查
$(
"input[type='tel']"
).keyup(
function
(){
var
reg = /^\d*$/;
if
(
this
.value.length > 11){
this
.value =
this
.value.substr(0,11);
$(
this
).focus();
}
else
if
(!reg.test(
this
.value)){
$(
this
).parent().next().show().html(
"手机号码只能为数字"
);
$(
this
).focus();
}
else
{
$(
this
).parent().next().hide();
}
}).blur(
function
(){
if
(
this
.value ==
""
){
$(
this
).parent().next().show().html(
"手机号码不能为空"
);
$(
this
).focus();
}
else
if
(!/^1[3|4|5|8]\d{9}$/.test(
this
.value)){
$(
this
).parent().next().show().html(
"请输入正确的手机号码"
);
$(
this
).focus();
}
else
{
$(
this
).parent().next().hide();
}
})
//获取短信验证码
$(
"#getCode"
).click(
function
(){
$(
"input[type='tel']"
).trigger(
'blur'
);
var
time = 120;
var
error = $(
this
).parent().prev().css(
"display"
);
alert(error);
alert(error !=
"block"
);
var
phoneNum = $(
"input[type='tel']"
).val();
if
(phoneNum !=
""
&& error !=
"block"
){
$.ajax({
type:
"post"
,
url:
"/Ajax/VerificationCode.ashx"
,
dataType:
"json"
,
data:{
method:
"SendCode"
,
Phone:phoneNum
},
success:
function
(data){
if
(data.reslut.msg == 1){
var
t = setInterval(
function
(){
time--;
$(
this
).attr(
"disabled"
,
true
).addClass(
"grey"
)
.html(time+
"s<p style='font-size:10px'>已发送</p>"
)
if
(time == 0){
clearInterval(t);
$(
"#getCode"
).removeAttr(
"disabled"
).removeClass(
"grey"
).html(
"重新获取验证码"
);
}
},1000);
}
else
{
alert(data.result.msbox);
}
}
});
}
})
//验证码检查
$(
"#yzm"
).keyup(
function
(){
var
reg = /^\d*$/;
if
(
this
.value.length > 6){
this
.value =
this
.value.substr(0,6);
}
else
if
(!reg.test(
this
.value)){
$(
this
).parent().next().show();
$(
this
).focus();
}
else
{
$(
this
).parent().next().hide();
}
}).blur(
function
(){
if
(
this
.value ==
""
){
$(
this
).parent().next().show().html(
"验证码不能为空"
);
}
else
if
(
this
.value.length < 6){
$(
this
).parent().next().show().html(
"验证码必须为6位数字"
);
}
})
//密码检查
$(
"input[name = 'password']"
).blur(
function
(){
if
(
this
.value.length < 6||
this
.value.length > 20){
$(
this
).parent().next().show();
}
else
{
$(
this
).parent().next().hide();
}
})
//确认密码
$(
"input[name= 'password-sure']"
).keyup(
function
(){
var
password = $(
"input[name = 'password']"
).val();
if
(
this
.value != password){
$(
this
).parent().next().show();
}
else
{
$(
this
).parent().next().hide();
}
}).blur(
function
(){
if
(
this
.value ==
""
) {
$(
this
).parent().next().show().html(
"密码不能为空"
);
}
})
//整个表单验证
$(
"#submit"
).click(
function
(){
$(
".mui-input-row input"
).triggerHandler(
'blur'
);
var
numError = $(
'.mui-input-row + div'
).css(
"display"
);
if
(numError ==
"block"
){
return
false
;
}
$.ajax({
type:
"post"
,
url:
"/Ajax/User.ashx"
,
dataType:
"json"
,
data:{
method:
"Reg"
,
Phone: $(
"input[type = 'tel']"
).val(),
Pwd: $(
"input[name = 'password']"
).val(),
Code: $(
"#yzm"
).val()
},
success:
function
(data){
var
result = data.split(
"|"
);
if
(result[0] ==
"error"
) {
alert(result[1]);
//location.reload();
}
if
(result[0] ==
"success"
) {
alert(result[1]);
window.location.href=
"registerSuccess.html"
;
}
}
})
})
})
|
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1861926
