<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.php php验证码实现
效果图