新用户注册页面
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>新用户注册页面</title><style type="text/css">body,dl,dt,dd,div,form {padding:0;margin:0;}#header,#main{width:670px;margin:0 auto;}.bg{background-image:url(images/register_bg.gif);background-repeat:no-repeat;width:6px;height:6px;}.bg_top_left{background-position:0px 0px;}.bg_top_right{background-position:0px -6px;}.bg_end_left{background-position:0px -12px;}.bg_end_right{background-position:0px -18px;}.bg_top{border-top:solid 1px #666666;}.bg_end{border-bottom:solid 1px #666666;}.bg_left{border-left:solid 1px #666666;}.bg_right{border-right:solid 1px #666666;}.content{padding:10px;}.inputs{border:solid 1px #a4c8e0;width:150px;height:15px;}.userWidth{width:110px;}.content div{float:left;font-size:12px;color:#000;}dl{clear:both;}dt,dd{float:left;}dt{width:130px;text-align:right;font-size:14px;height:30px;line-height:25px;}dd{font-size:12px;color:#666666;width:180px;}/*当鼠标放到文本框时，提示文本的样式*/.import_prompt{border:solid 1px #ffcd00;background-color:#ffffda;padding-left:5px;padding-right:5px;line-height:20px;}/*当文本框内容不符合要求时，提示文本的样式*/.error_prompt{border:solid 1px #ff3300;background-color:#fff2e5;background-image:url(images/li_err.gif);background-repeat:no-repeat;background-position:5px 2px;padding:2px 5px 0px 25px;line-height:20px;}/*当文本框内容输入正确时，提示文本的样式*/.ok_prompt{border:solid 1px #01be00;background-color:#e6fee4;background-image:url(images/li_ok.gif);background-repeat:no-repeat;background-position:5px 2px;padding:2px 5px 0px 25px;line-height:20px;}</style></head><body><div id="header"><img src="images/register_logo.gif" alt="新用户登记页面"/></div><div id="main"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td method="post" name="myform"> <dl> <dt>通行证用户名：</dt> <dd><input type="text" id="userName" /> @163.com</dd> <div id="userNameId"></div> </dl> <dl> <dt>登录密码：</dt> <dd><input type="password" id="pwd" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd> <div id="pwdId"></div> </dl> <dl> <dt>重复登录密码：</dt> <dd><input type="password" id="repwd" onblur="repwdBlur()"/></dd> <div id="repwdId"></div> </dl> <dl> <dt>性别：</dt> <dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd> </dl> <dl> <dt>真实姓名：</dt> <dd><input type="text" id="realName" /></dd> </dl> <dl> <dt>昵称：</dt> <dd><input type="text" id="nickName" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd> <div id="nickNameId"></div> </dl> <dl> <dt>关联手机号：</dt> <dd><input type="text" id="tel" onfocus="telFocus()" onblur="telBlur()" /></dd> <div id="telId"></div> </dl> <dl> <dt>保密邮箱：</dt> <dd><input type="text" id="email" onfocus="emailFocus()" onblur="emailBlur()" /></dd> <div id="emailId"></div> </dl> <dl> <dt></dt> <dd><input name=" " type="image" src="images/button.gif"/></dd> </dl> </form> </td> <td == obj.value){userNameId.className = "error_prompt";userNameId.innerHTML ="通行证用户名不能为空，请输入通行证用户名";return false;}var regUser = /^[a-zA-Z0-9][a-zA-Z0-9._-]{2,16}[a-zA-Z0-9]$/;if(regUser.test(obj.value)==false){userNameId.className = "error_prompt";userNameId.innerHTML ="1、通行证用户名由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开关或结尾，且长度为4-18";return false;}userNameId.className ="ok_prompt";userNameId.innerHTML = "通行证用户名输入正确";return true;}//登录密码获取焦点验证function pwdFocus(){var pwdId = $("pwdId");pwdId.className ="import_prompt";pwdId.innerHTML ="密码由英文字母和数字组成的6-16位字符";}//登录密码失去焦点验证function pwdBlur(obj){var pwdId = $("pwdId");if("" == obj.value){pwdId.className = "error_prompt";pwdId.innerHTML ="密码不能为空，请输入密码";return false;}var regPwd = /^[a-zA-Z0-9]{6,16}$/;if(regPwd.test(obj.value)==false){pwdId.className = "error_prompt";pwdId.innerHTML ="密码由英文字母和数字组成的6-16位字符";return false;}pwdId.className ="ok_prompt";pwdId.innerHTML = "密码输入正确";return true;}//重复密码失去焦点验证function repwdBlur(obj){var repwdId = $("repwdId");if("" == obj.value){repwdId.className = "error_prompt";repwdId.innerHTML ="重复密码不能为空，请输入重复密码";return false;}if(obj.value != $("pwd").value){repwdId.className = "error_prompt";repwdId.innerHTML ="两次输入的密码不一致，请重新输入";return false;}repwdId.className ="ok_prompt";repwdId.innerHTML = "两次密码输入正确";return true;}//昵称获取焦点验证function nickNameFocus(){var nickNameId = $("nickNameId");nickNameId.className ="import_prompt";nickNameId.innerHTML ="1、包含汉字、字母、数字、下划线以及!@#$%&*特殊符号<br/>2、长度为4-20个字符<br/>3、一个汉字占两个字符";}//昵称失去焦点验证function nickNameBlur(obj){var nickNameId = $("nickNameId");if("" == obj.value){nickNameId.className = "error_prompt";nickNameId.innerHTML ="昵称不能为空，请输入昵称";return false;}var regNickName = /^([\u4e00-\u9fa5]|\w|[!@#$%&*]+)$/;if(regNickName.test(obj.value)==false){nickNameId.className = "error_prompt";nickNameId.innerHTML ="只能由汉字、字母、数字、下划线以及!@#$%&*特殊字符组成";return false;}//把中文字符转换为两个字母，以计算字符长度var len = obj.value.replace(/[\u4e00-\u9fa5]/g,"ab").length;if(len<4 || len>20){nickNameId.className = "error_prompt";nickNameId.innerHTML ="1、长度为4-20个字符<br/>2、一个汉字占两个字符";return false;}nickNameId.className ="ok_prompt";$("userNameId").innerHTML = "昵称输入正确";return true;}//手机号获取焦点验证function telFocus(){var telId = $("telId");telId.className ="import_prompt";telId.innerHTML ="手机号由11位数字组成，以13、15、18开头";}//手机号失去焦点验证function telBlur(obj){var telId = $("telId");if("" == obj.value){telId.className = "error_prompt";telId.innerHTML ="手机号码不能为空，请输入手机号码";return false;}var regTel = /^1(3|5|8)\d{9}$/;if(regTel.test(obj.value)==false){telId.className = "error_prompt";telId.innerHTML ="手机号由11位数字组成，以13、15、18开头";return false;}telId.className ="ok_prompt";telId.innerHTML = "手机号码输入正确";return true;}//邮箱获取焦点验证function emailFocus(){var emailId = $("emailId");emailId.className ="import_prompt";emailId.innerHTML ="请输入您常用的电子邮箱";}//邮箱失去焦点验证function emailBlur(obj){var emailId = $("emailId");if("" == obj.value){emailId.className = "error_prompt";emailId.innerHTML ="电子邮箱不能为空，请输入电子邮箱";return false;}var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;if(regEmail.test(obj.value)==false){emailId.className = "error_prompt";emailId.innerHTML ="电子邮箱格式不正确，请重新输入";return false;}emailId.className ="ok_prompt";emailId.innerHTML = "保密邮箱输入正确";return true;}//表单提交验证function checkForm(){var userName = userNameBlur($("userName"));var pwd = pwdBlur($("pwd"));var repwd = repwdBlur($("repwd"));var nickName = nickNameBlur($("nickName"));var tel = telBlur($("tel"));var email = emailBlur($("email"));if(userName && pwd && repwd && nickName && tel && email){return true;}else{return false;}}</script></div></body></html>?
效果图：
?
个人E-mail：chaoyi77@163.com
?