<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
效果图