<html>
<head>
<meta charset="utf-8"/>
<title>新用戶註冊</title>
<link rel="stylesheet" href="Common/css/reg.css"/>
<link rel="stylesheet" href="Common/css/style.css" />
<script src="Common/js/jquery.js"></script>
<script language="javascript" src="Common/js/check.js"></script>
</head>
<body onLoad="javascript:register.name.focus()">
<table width="450" border="0" align="center" cellpadding="0" cellspacing="0">
<form id="register" name="register" action="reg_chk.php" method="post" onSubmit="return chkinput(this)">
<tr>
<td colspan="5" align="center" valign="middle"><h2>新用戶註冊</h2></td>
</tr>
<tr>
<td width="81" height="25"><div align="right">用戶名：</div></td>
<td height="25" colspan="3">
<input id="name" name="name" type="text" onBlur="javascript:chkname(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'" /><input id="c_name" name="c_anme" type="hidden" value="not" > <font color="red">*</font></td>
<td height="25"><div id="name1"><font color="#999999">請輸入用戶名</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">註冊密碼：</div></td>
<td height="25" colspan="3">
<input id="pwd1" name="pwd1" type="password" onBlur="javascript:chkpwd1(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/> <font color="red">*</font></td>
<td width="152"><div id="pwd11"><font color="#999999">請輸入密碼</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">確認密碼：</div></td>
<td height="25" colspan="3">
<input id="pwd2" name="pwd2" type="password" onBlur=" javascript:chkpwd2(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/> <font color="red">*</font></td>
<td height="25"><div id="pwd21"><font color="#999999">確認密碼</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">密保問題：</div></td>
<td height="25" colspan="3">
<input id="question" name="question" type="text" onBlur="javascript:chkquestion(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/> <font color="red">*</font></td>
<td height="25"><div id="question1"><font color="#999999">請填寫密碼保護問題</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">密保答案：</div></td>
<td height="25" colspan="3">
<input id="answer" name="answer" type="text" onBlur="javascript:chkanswer(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/> <font color="red">*</font></td>
<td height="25"><div id="answer1"><font color="#999999">請填寫密碼保護答案</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">真實姓名：</div></td>
<td height="25" colspan="3">
<input id="realname" name="realname" type="text" onBlur="javascript:chkrealname(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/> <font color="red">*</font></td>
<td height="25"><div id="realname1"><font color="#999999">請填寫真實姓名</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">身份證號：</div></td>
<td height="25" colspan="3">
<input id="card" name="card" type="text" maxlength="18" onBlur="javascript:chkcard(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/> <font color="red">*</font></td>
<td height="25"><div id="card1"><font color="#999999">請輸入準確的身份帳號</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">移動電話：</div></td>
<td height="25" colspan="3">
<input id="tel" type="text" name="tel" onBlur="javascript:chktel(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/> <font color="red">*</font></td>
<td height="25"><div id="tel1"><font color="#999999">請輸入移動電話</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">固定電話：</div></td>
<td height="25" colspan="3">
<input id="phone" type="text" name="phone" onBlur="javascript:chkphone(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/> <font color="red">*</font></td>
<td height="25"><div id="phone1"><font color="#999999">請輸入固定電話</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">QQ號碼：</div></td>
<td height="25" colspan="3">
<input id="qq" type="text" name="qq" onBlur="javascript:chkqq(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/></td>
<td height="25"><div id="qq1"><font color="#999999">請輸入QQ號</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">E-mail：</div></td>
<td height="25" colspan="3">
<input id="email" type="text" name="email" onBlur="javascript:chkemail(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/></td>
<td height="25"><div id="email1"><font color="#999999">請輸入Email</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">郵 編：</div></td>
<td height="25" colspan="3">
<input id="code" type="text" name="code" onBlur="javascript:chkcode(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut= "this.style.backgroundColor='#e8f4ff'"/></td>
<td height="25"><div id="code1"><font color="#999999">請輸入郵編</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">聯繫地址：</div></td>
<td height="25" colspan="3">
<input id="address" type="text" name="address" onBlur="javascript:chkaddress(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/> <font color="red">*</font></td>
<td height="25"><div id="address1"><font color="#999999">請輸入聯繫地址</font></div></td>
</tr>
<tr>
<td height="25"><div align="right">驗證碼：</div></td>
<td width="65" height="25">
<input id="yzm" type="text" name="yzm" size="8" onBlur="javascript:chkyzm(register)" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'"/>
<input name="yzm2" type="hidden" value="" /></td>
<td width="65" align="center" valign="middle"><script>yzm(register)</script></td>
<td width="51"><a href="javascript:code(register)">看不清</a></td>
<td height="25"><div id="yzm1"><font color="#999999">輸入驗證碼</font></div></td>
</tr>
<tr>
<td height="25" colspan="2">
<input type="submit" value="提交"/>
<input type="reset" value="重寫" /></td>
<td height="25" colspan="3"><div style="color:#FF0000">帶"*"號的爲必填項</div></td>
</tr>
</form>
</table>
</body>
</html>check.js
// JavaScript Document
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function chkname(form)
{
if(form.name.value=="")
{
name1.innerHTML="<font color=#FF0000>請輸入用戶名！</font>";
}
else
{
var user = form.name.value;
var url="http://192.168.2.43/think_cms/index.php/register/chkname";
url=url+"?user_name="+user;
var xmlhttp = GetXmlHttpObject();
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status==200)
{
var msg = xmlhttp.responseText;
msg = parseInt(msg);
if(msg == 0)
{
name1.innerHTML="<font color=#FF0000>用戶名被佔用！</font>";
return false;
}
else if(msg == 1)
{
name1.innerHTML="<font color=green>恭喜您，可以註冊!</font>";
form.c_name.value = "yes";
}
else
{
name1.innerHTML="<font color=green>"+msg+"</font>";
}
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
}
function chkinput(form){
if(form.name.value=="")
{
form.name.focus();
return false;
}
if(form.c_name.value == "not")
{
form.name.select();
return false;
}
if(form.pwd1.value=="")
{
form.pwd1.focus();
return false;
}
if(form.pwd2.value=="")
{
form.pwd2.focus();
return false;
}
if(form.pwd2.value!=form.pwd1.value)
{
form.pwd1.select();
return false;
}
if(form.pwd1.value.length<6)
{
form.pwd1.select();
return false;
}
if(form.question.value == "")
{
form.question.focus();
return false;
}
if(form.answer.value == "")
{
form.answer.focus();
return false;
}
if(form.realname.value=="")
{
form.realname.focus();
return false;
}
if(form.card.value=="")
{
form.card.focus();
return false;
}
if(form.card.value.length != 15 && form.card.value.length !=18)
{
form.card.select();
return false;
}
if(form.tel.value=="")
{
form.tel.focus();
return false;
}
if(isNaN(form.tel.value))
{
form.tel.select();
return false;
}
if(form.phone.value=="")
{
form.phone.focus();
return false;
}
if(isNaN(form.qq.value))
{
alert("QQ號碼只能由數字組成！");
form.qq.select();
return false;
}
var i=form.email.value.indexOf("@");
var j=form.email.value.indexOf(".");
if((form.email.value != "") && ((i<0)||(i-j>0)||(j<0)))
{
form.email.select();
return false;
}
if(isNaN(form.code.value))
{
form.code.focus();
return false;
}
if(form.code.value.legnth < 6)
{
form.code.select();
return false;
}
if(form.address.value=="")
{
alert('1');
form.address.focus();
return false;
}
if(form.yzm.value=="")
{
form.yzm.focus();
return false;
}
if(form.yzm.value!=form.yzm2.value)
{
alert("效驗碼輸入錯誤！");
form.yzm.focus();
return false;
}
}
function chkpwd1(form)
{
if(form.pwd1.value=="")
{
pwd11.innerHTML="<font color=#FF0000>密碼格式錯誤！</font>";
}
else if(form.pwd1.value.length<6)
{
pwd11.innerHTML="<font color=#FF0000>註冊密碼長度應大於6位！</font>";
}
else
{
pwd11.innerHTML="<font color=green>輸入正確</font>";
}
}
function chkpwd2(form)
{
if(form.pwd2.value=="")
{
pwd21.innerHTML="<font color=#FF0000>請輸入確認密碼！</font>";
}
else if(form.pwd2.value.length<6)
{
pwd21.innerHTML="<font color=#FF0000>確認密碼長度應大於6位！</font>";
}
else if(form.pwd1.value!=form.pwd2.value)
{
pwd21.innerHTML="<font color=#FF0000>註冊密碼與確認密碼不同！</font>";
}
else
{
pwd21.innerHTML="<font color=green>輸入正確</font>";
}
}
function chkquestion(form)
{
if(form.question.value=="")
{
question1.innerHTML="<font color=#FF0000>請填寫密保問題！</font>";
}
else
{
question1.innerHTML="<font color=green>輸入正確</font>";
}
}
function chkanswer(form)
{
if(form.answer.value==""
){
answer1.innerHTML="<font color=#FF0000>請填寫密保答案！</font>";
}
else
{
answer1.innerHTML="<font color=green>輸入正確</font>";
}
}
function chkrealname(form)
{
if(form.realname.value=="")
{
realname1.innerHTML="<font color=#FF0000>請輸入真實姓名！</font>";
}
else
{
realname1.innerHTML="<font color=green>輸入正確</font>";
}
}
function chkcard(form)
{
if(form.card.value=="")
{
card1.innerHTML="<font color=#FF0000>請選擇您的身份證號！</font>";
}
else if(form.card.value.length != 15 && form.card.value.length != 18)
{
card1.innerHTML="<font color=#FF000000>請輸入正確的身份證號</font>";
}
else
{
card1.innerHTML="<font color=green>輸入正確</font>";
}
}
function chktel(form)
{
if(form.tel.value=="")
{
tel1.innerHTML="<font color=#FF0000>請輸入聯繫電話！</font>";
}else if(isNaN(form.tel.value)){
tel1.innerHTML="<font color=#FF0000>聯繫電話只能由數字組成！</font>";
}else if(form.tel.value.length<8 || form.tel.value.length>11){
tel1.innerHTML="<font color=#FF0000>聯繫電話位數不正確！</font>";
}else{
tel1.innerHTML="<font color=green>輸入正確</font>";
}
}
function chkphone(form)
{
if(form.phone.value=="")
{
phone1.innerHTML="<font color=#FF0000>請輸入固定電話！</font>";
}
else
{
phone1.innerHTML="<font color=green>輸入正確</font>";
}
}
function chkqq(form)
{
if (form.qq.value == "")
{
qq1.innerHTML="<font color=#FF0000>請輸入QQ號碼！</font>";
return;
}
if(form.qq.value != "" && isNaN(form.qq.value))
{
qq1.innerHTML="<font color=#FF0000>聯繫QQ只能由數字組成！</font>";
}
else
{
qq1.innerHTML="<font color=green>輸入正確</font>";
}
}
function chkemail(form)
{
if (form.email.value=="")
{
email1.innerHTML="<font color=#FF0000>請輸入E-mail地址！</font>";
return;
}
var i=form.email.value.indexOf("@");
var j=form.email.value.indexOf(".");
if((form.email.value != "") && ((i<0)||(i-j>0)||(j<0))){
email1.innerHTML="<font color=#FF0000>請輸入正確的E-mail地址！</font>";
}
else
{
email1.innerHTML="<font color=green>輸入正確</font>";
}
}
function chkcode(form)
{
if(isNaN(form.code.value))
{
code1.innerHTML="<font color=#FF0000>郵編只能由數字組成！</font>";
}
else if(form.code.value.length!=6)
{
code1.innerHTML="<font color=#FF0000>郵編長度爲6位！</font>";
}
else
{
code1.innerHTML="<font color=green>輸入正確</font>";
}
}
function chkaddress(form)
{
if(form.address.value=="")
{
address1.innerHTML="<font color=#FF0000>請輸入聯繫地址！</font>";
}
else
{
address1.innerHTML="<font color=green>輸入正確</font>";
}
}
function chkyzm(form)
{
if(form.yzm.value=="")
{
yzm1.innerHTML="<font color=#FF0000>請輸入效驗碼！</font>";
}
else if(form.yzm.value!=form.yzm2.value)
{
yzm1.innerHTML="<font color=#FF0000>效驗碼輸入錯誤!</font>";
}
else
{
yzm1.innerHTML="<font color=green>輸入正確</font>";
}
}
function yzm(form)
{
var num1=Math.round(Math.random()*10000000);
var num=num1.toString().substr(0,4);
document.write("<img name=codeimg src='yzm.php?num="+num+"'>");
form.yzm2.value=num;
}
function code(form)
{
var num1=Math.round(Math.random()*10000000);
var num=num1.toString().substr(0,4);
document.codeimg.src="yzm.php?num="+num;
form.yzm2.value=num;
}reg.css
#name,#pwd1,#pwd2,#question,#answer,#realname,#card,#tel,#phone,#qq,#email,#code,#address {
height: 20px;
width: 150px;
border: 1px solid #003399;
background-color:#e8f4ff;
}
#yzm {
height: 20px;
width: 50px;
border: 1px solid #003399;
background-color:#e8f4ff;
}
#name1,#pwd11,#pwd21,#question1,#answer1,#realname1,#card1,#tel1,#phone1,#qq1,#email1,#code1,#address1,#yzm1 {
background-color: #f0f0f0;
height: 13px;
width: 150px;
border: 1px dotted #CCCCCC;
}
style.css
<!--
body,td,th {
font-size: 12px;
}
body {
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}yzm.phpphp驗證碼實現
效果圖
