<html>
<head>
<meta http-equiv=
"content-type"
content=
"text/html; charset=utf-8"
>
<title>Reg</title>
<style>
.state1{
color:#aaa;
}
.state2{
color:#000;
}
.state3{
color:red;
}
.state4{
color:green;
}
</style>
<script src=
"jquery.js"
></script>
<script>
$(
function
(){
var
ok1=false;
var
ok2=false;
var
ok3=false;
var
ok4=false;
// 驗證用戶名
$(
'input[name="username"]'
).focus(
function
(){
$(this).next().text(
'用戶名應該為3-20位之間'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=
''
){
$(this).next().text(
'輸入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok1=true;
}
else
{
$(this).next().text(
'用戶名應該為3-20位之間'
).removeClass(
'state1'
).addClass(
'state3'
);
}
});
//驗證密碼
$(
'input[name="password"]'
).focus(
function
(){
$(this).next().text(
'密碼應該為6-20位之間'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=
''
){
$(this).next().text(
'輸入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok2=true;
}
else
{
$(this).next().text(
'密碼應該為6-20位之間'
).removeClass(
'state1'
).addClass(
'state3'
);
}
});
//驗證確認密碼
$(
'input[name="repass"]'
).focus(
function
(){
$(this).next().text(
'輸入的確認密碼要和上面的密碼一致,規則也要相同'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=
''
&& $(this).val() == $(
'input[name="password"]'
).val()){
$(this).next().text(
'輸入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok3=true;
}
else
{
$(this).next().text(
'輸入的確認密碼要和上面的密碼一致,規則也要相同'
).removeClass(
'state1'
).addClass(
'state3'
);
}
});
//驗證郵箱
$(
'input[name="email"]'
).focus(
function
(){
$(this).next().text(
'請輸入正確的EMAIL格式'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
$(this).next().text(
'請輸入正確的EMAIL格式'
).removeClass(
'state1'
).addClass(
'state3'
);
}
else
{
$(this).next().text(
'輸入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok4=true;
}
});
//提交按鈕,所有驗證通過方可提交
$(
'.submit'
).click(
function
(){
if
(ok1 && ok2 && ok3 && ok4){
$(
'form'
).submit();
}
else
{
return
false;
}
});
});
</script>
</head>
<body>
<form action=
'do.php'
method=
'post'
>
用 戶 名:<input type=
"text"
name=
"username"
>
<span
class
=
'state1'
>請輸入用戶名</span><br/><br/>
密 碼:<input type=
"password"
name=
"password"
>
<span
class
=
'state1'
>請輸入密碼</span><br/><br/>
確認密碼:<input type=
"password"
name=
"repass"
>
<span
class
=
'state1'
>請輸入確認密碼</span><br/><br/>
郵 箱:<input type=
"text"
name=
"email"
>
<span
class
=
'state1'
>請輸入郵箱</span><br/><br/>
<a href=
"javascript:;"
><img
class
=
'submit'
type=
'image'
src=
'./images/reg.gif'
/></a>
</form>
</body>
<html>
<head>
<meta http-equiv=
"content-type"
content=
"text/html; charset=utf-8"
>
<title>Reg</title>
<style>
.state1{
color:#aaa;
}
.state2{
color:#000;
}
.state3{
color:red;
}
.state4{
color:green;
}
</style>
<script src=
"jquery.js"
></script>
<script>
$(
function
(){
var
ok1=false;
var
ok2=false;
var
ok3=false;
var
ok4=false;
// 驗證用戶名
$(
'input[name="username"]'
).focus(
function
(){
$(this).next().text(
'用戶名應該為3-20位之間'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=
''
){
$(this).next().text(
'輸入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok1=true;
}
else
{
$(this).next().text(
'用戶名應該為3-20位之間'
).removeClass(
'state1'
).addClass(
'state3'
);
}
});
//驗證密碼
$(
'input[name="password"]'
).focus(
function
(){
$(this).next().text(
'密碼應該為6-20位之間'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=
''
){
$(this).next().text(
'輸入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok2=true;
}
else
{
$(this).next().text(
'密碼應該為6-20位之間'
).removeClass(
'state1'
).addClass(
'state3'
);
}
});
//驗證確認密碼
$(
'input[name="repass"]'
).focus(
function
(){
$(this).next().text(
'輸入的確認密碼要和上面的密碼一致,規則也要相同'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=
''
&& $(this).val() == $(
'input[name="password"]'
).val()){
$(this).next().text(
'輸入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok3=true;
}
else
{
$(this).next().text(
'輸入的確認密碼要和上面的密碼一致,規則也要相同'
).removeClass(
'state1'
).addClass(
'state3'
);
}
});
//驗證郵箱
$(
'input[name="email"]'
).focus(
function
(){
$(this).next().text(
'請輸入正確的EMAIL格式'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
$(this).next().text(
'請輸入正確的EMAIL格式'
).removeClass(
'state1'
).addClass(
'state3'
);
}
else
{
$(this).next().text(
'輸入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok4=true;
}
});
//提交按鈕,所有驗證通過方可提交
$(
'.submit'
).click(
function
(){
if
(ok1 && ok2 && ok3 && ok4){
$(
'form'
).submit();
}
else
{
return
false;
}
});
});
</script>
</head>
<body>
<form action=
'do.php'
method=
'post'
>
用 戶 名:<input type=
"text"
name=
"username"
>
<span
class
=
'state1'
>請輸入用戶名</span><br/><br/>
密 碼:<input type=
"password"
name=
"password"
>
<span
class
=
'state1'
>請輸入密碼</span><br/><br/>
確認密碼:<input type=
"password"
name=
"repass"
>
<span
class
=
'state1'
>請輸入確認密碼</span><br/><br/>
郵 箱:<input type=
"text"
name=
"email"
>
<span
class
=
'state1'
>請輸入郵箱</span><br/><br/>
<a href=
"javascript:;"
><img
class
=
'submit'
type=
'image'
src=
'./images/reg.gif'
/></a>
</form>
</body>