<span style=
"font-size:24px;"
>下面是一个例子:</span>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
xml:lang=
"en"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html;charset=UTF-8"
/>
<title></title>
<script type=
"text/javascript"
src=
"public.js"
></script>
</head>
<body onload=
"yanzheng(this)"
>
<form method=
"post"
action=
"info_2.php"
onsubmit=
"return check_all()"
>
<table>
<tr>
<td colspan=
"2"
>账户基本信息</td>
</tr>
<tr>
<td>登录账号:</td>
<td><input type=
"text"
name=
"zhanghao"
onblur=
"check_zhanghao(this)"
><span name=
"sp1"
></span></td>
</tr>
<tr>
<td>昵称:</td>
<td><input type=
"text"
name=
"nicheng"
onblur=
"check_nicheng(this)"
><span name=
"sp2"
></span></td>
</tr>
<tr>
<td>性别:</td>
<td><input type=
"radio"
name=
"sex"
value=
"男"
onclick=
"check_sex()"
>男
<input type=
"radio"
name=
"sex"
value=
"女"
onclick=
"check_sex()"
>女
<span id=
"sp3"
></span></td>
</tr>
<tr>
<td colspan=
"2"
>账户安全设置</td>
</tr>
<tr>
<td>登录密码:</td>
<td><input type=
"password"
name=
"pwd"
onblur=
"check_pwd(this)"
><span name=
"sp4"
></span></td>
</tr>
<tr>
<td>确认登录密码:</td>
<td><input type=
"password"
name=
"repwd"
onblur=
"check_repwd(this)"
><span name=
"sp5"
></span></td>
</tr>
<tr>
<td>真实姓名:</td>
<td><input type=
"text"
name=
"username"
onblur=
"check_username(this)"
><span name=
"sp6"
></span></td>
</tr>
<tr>
<td>身份证号:</td>
<td><input type=
"text"
name=
"idcard"
onblur=
"check_idcard(this)"
><span name=
"sp7"
></span></td>
</tr>
<tr>
<td>邮箱地址:</td>
<td><input type=
"text"
name=
"email"
onblur=
"check_email(this)"
><span name=
"sp8"
></span></td>
</tr>
<tr>
<td>验证码</td>
<td><input type=
"text"
id=
"number"
onblur=
"check_number()"
>
<input type=
"button"
onclick=
"yanzheng()"
value=
"获取验证码"
>
<span id=
"sp10"
></span>
<span id=
"sp9"
></span>
</td>
</tr>
<tr>
<td></td>
<td><input type=
"submit"
value=
"免费注册"
></td>
</tr>
</table>
</form>
<script type=
"text/javascript"
>
function
check_zhanghao(obj){
var
sp1=$('sp1');
if
(obj.value==''){
sp1.innerHTML='登录账号不能为空';
sp1.style.color='red';
return
false;
}
else
{
var
reg=/^\w{5,10}$/i;
if
(reg.test(obj.value)){
sp1.innerHTML='正确';
sp1.style.color='green';
return
true;
}
else
{
sp1.innerHTML='登录账号5-10字符';
sp1.style.color='red';
return
false;
}
}
return
true;
}
function
check_nicheng(obj){
var
sp2=$('sp2');
if
(obj.value==''){
sp2.innerHTML='登录账号不能为空';
sp2.style.color='red';
return
false;
}
else
{
var
reg=/^\w{5,10}$/i;
if
(reg.test(obj.value)){
sp2.innerHTML='正确';
sp2.style.color='green';
return
true;
}
else
{
sp2.innerHTML='昵称5-10字符';
sp2.style.color='red';
return
false;
}
}
return
true;
}
function
check_pwd(obj2){
var
sp4=$('sp4');
if
(obj2.value==''){
sp4.innerHTML='密码不能为空';
sp4.style.color='red';
return
false;
}
else
{
var
reg=/^\w{6,}$/;
if
(reg.test(obj2.value)){
sp4.innerHTML='正确';
sp4.style.color='green';
return
true;
}
else
{
sp4.innerHTML='格式不正确';
sp4.style.color='red';
return
false;
}
}
return
true;
}
function
check_repwd(obj3){
var
sp5=$('sp5');
var
pwd=$('pwd');
var
repwd=$('repwd');
if
(obj3.value==''){
sp5.innerHTML='密码不能为空';
sp5.style.color='red';
return
false;
}
else
{
if
(obj3.value==pwd.value){
sp5.innerHTML='正确';
sp5.style.color='green';
return
true;
}
else
{
sp5.innerHTML='确认密码和密码不一致';
sp5.style.color='red';
return
false;
}
}
return
true;
}
num2=0;
function
check_sex(){
var
sex=document.getElementsByName('sex');
for
(
var
i=0;i<sex.length;i++){
if
(sex[i].checked==true){
num2=num2+1;
}
}
if
(num2!=0){
sp3.innerHTML='√';
sp3.style.color='green';
return
true;
}
else
{
sp3.innerHTML='性别不能为空';
sp3.style.color='red';
return
false;
}
}
function
check_username(obj){
var
sp6=$('sp6');
if
(obj.value==
""
){
sp6.innerHTML='用户名不能为空';
sp6.style.color='red';
return
false;
}
else
{
var
reg=/^[\u4e00-\u9fa5]{2,3}$/;
if
(!reg.test(obj.value)){
sp6.innerHTML='用户名应该2-3个汉字';
sp6.style.color='red';
return
false;
}
else
{
sp6.innerHTML='√';
sp6.style.color='green';
return
true;
}
}
return
true;
}
function
check_email(obj5){
var
sp8=$('sp8');
if
(obj5.value==''){
sp8.innerHTML='邮箱不能为空';
sp8.style.color='red';
return
false;
}
else
{
var
reg=/^(\w+@\w+(\.)com|net|cn)$/;
if
(reg.test(obj5.value)){
sp8.innerHTML='正确';
sp8.style.color='green';
return
true;
}
else
{
sp8.innerHTML='格式不正确';
sp8.style.color='red';
return
false;
}
return
true;
}
}
function
check_idcard(obj9){
var
sp7=$('sp7');
if
(obj9.value==''){
sp7.innerHTML='身份证号不能为空';
sp7.style.color='red';
return
false;
}
else
{
var
reg=/^\d{18}|\d{17}x$/i;
if
(reg.test(obj9.value)){
sp7.innerHTML='正确';
sp7.style.color='green';
return
true;
}
else
{
sp7.innerHTML='格式不正确';
sp7.style.color='red';
return
false;
}
return
true;
}
}
function
yanzheng(){
var
sp9=document.getElementById('sp9');
var
str1=
""
;
for
(
var
i=1;i<=4;i++){
str1=str1+parseInt(Math.random()*10);
sp9.innerHTML=str1;
}
}
function
check_number(){
var
number=document.getElementById('number').value
var
sp10=document.getElementById('sp10')
var
sp9=document.getElementById('sp9');
if
(number==
""
){
sp10.innerHTML='验证码不能为空';
sp10.style.color='red';
return
false;
}
else
{
if
(number!=sp9.innerHTML){
sp10.innerHTML='验证码和你写的不一致';
sp10.style.color='red';
return
false;
}
else
{
sp10.innerHTML='√';
sp10.style.color='green';
return
true;}
return
true;
}
}
function
check_all(){
if
(check_zhanghao($('zhanghao')) & check_nicheng($('nicheng')) & check_pwd($('pwd')) & check_repwd($('repwd')) & check_sex()& check_username($('username')) & check_idcard($('idcard')) &check_email($('email')) & check_number() ){
return
true;}
else
{
return
false;}
}
</script>
</body>
</html>