<!DOCTYPE html>
<html>
<head lang=
"en"
>
<meta charset=
"UTF-8"
>
<title></title>
<script type=
"text/javascript"
src=
"jquery.1.12.4.js"
></script>
<!--jquery样式-->
<script type=
"text/javascript"
>
$(
function
(){
$(
":input[name='email']"
).blur(
function
(){
var
email = $(this).val();
var
reg = /\w+[@]{1}\w+[.]\w+/;
if
(reg.test(email)){
$(
":input[name='check-email']"
).val(
"用户名可用"
);
image1 =
""
;
$(
"#img1"
).attr(
"src"
, image1);
}
else
{
$(
":input[name='check-email']"
).val(
"请填写有效的Email地址"
);
image1 =
""
;
$(
"#img1"
).attr(
"src"
, image1);
}
});
});
$(
function
(){
$(
":input[name='name']"
).blur(
function
(){
var
name = $(this).val();
if
(name.length > 4){
$(
":input[name='check-name']"
).val(
"输入正确"
);
image2 =
""
;
$(
"#img2"
).attr(
"src"
, image2);
}
else
{
$(
":input[name='check-name']"
).val(
"输入信息错误"
);
image2 =
""
;
$(
"#img2"
).attr(
"src"
, image2);
}
});
});
$(
function
(){
$(
":input[name='password-one']"
).blur(
function
(){
var
name = $(this).val();
if
(name.length > 6){
$(
":input[name='check-password-one']"
).val(
"密码可用"
);
image3 =
""
;
$(
"#img3"
).attr(
"src"
, image3);
}
else
{
$(
":input[name='check-password-one']"
).val(
"密码不可用"
);
image3 =
""
;
$(
"#img3"
).attr(
"src"
, image3);
}
});
});
$(
function
(){
$(
":input[name='password-two']"
).blur(
function
(){
var
name1 = $(
":input[name='password-one']"
).val();
var
name2 = $(this).val();
if
(name2.length > 6){
if
(name2 == name1){
$(
":input[name='check-password-two']"
).val(
"密码可用"
);
image4 =
""
;
$(
"#img4"
).attr(
"src"
, image4);
}
else
{
$(
":input[name='check-password-two']"
).val(
"密码不可用"
);
image4 =
""
;
$(
"#img4"
).attr(
"src"
, image4);
}
}
else
{
$(
":input[name='check-password-two']"
).val(
"密码不可用"
);
image4 =
""
;
$(
"#img4"
).attr(
"src"
, image4);
}
});
});
</script>
<!--css样式-->
<style type=
"text/css"
>
img{width: 15px; height: 15px}
.left{width: 200px; text-align: right}
.right{width: 400px}
.bjs{background-color: limegreen}
.btn{margin: 20px 0 0 300px}
</style>
</head>
<body>
<h4 style=
"color: red"
>以下均为必填项</h4>
<form>
<table border=
"1"
cellpadding=
"10"
cellspacing=
"0"
>
<tr>
<td
class
=
"left"
>请输入您的Email地址:</td>
<td
class
=
"right"
>
<input
class
=
"bjs"
name=
"email"
>
<img id=
"img1"
src=
""
/>
<input type=
"text"
name=
"check-email"
style=
"border: 0px"
/>
</td>
</tr>
<tr>
<td
class
=
"left"
>设置您在当当网的昵称:</td>
<td
class
=
"right"
>
<input
class
=
"bjs"
name=
"name"
>
<img id=
"img2"
src=
""
/>
<input type=
"text"
name=
"check-name"
style=
"border: 0px"
/>
</td>
</tr>
<tr>
<td
class
=
"left"
>设置密码:</td>
<td
class
=
"right"
>
<input
class
=
"bjs"
name=
"password-one"
>
<img id=
"img3"
src=
""
/>
<input type=
"text"
name=
"check-password-one"
style=
"border: 0px"
/>
</td>
</tr>
<tr>
<td
class
=
"left"
>再次输入您设置的密码:</td>
<td
class
=
"right"
>
<input
class
=
"bjs"
name=
"password-two"
>
<img id=
"img4"
src=
""
/>
<input type=
"text"
name=
"check-password-two"
style=
"border: 0px"
/>
</td>
</tr>
</table>
<input
class
=
"btn"
type=
"button"
value=
"注册"
/>
</form>
</body>
</html>