1、css代码
1 CSS代码
2
3 @charset "gb2312";
4 /* CSS Document */
5
6 body,dl,dt,dd,div,form {padding:0;margin:0;}
7
8 #header,#main{
9 width:650px;
10 margin:0 auto;
11 }
12 .bg{
13 background-image:url(../images/register_bg.gif);
14 background-repeat:no-repeat;
15 width:6px;
16 height:6px;
17 }
18 .bg_top_left{
19 background-position:0px 0px;
20 }
21 .bg_top_right{
22 background-position:0px -6px;
23 }
24 .bg_end_left{
25 background-position:0px -12px;
26 }
27 .bg_end_right{
28 background-position:0px -18px;
29 }
30 .bg_top{
31 border-top:solid 1px #666666;
32 }
33 .bg_end{
34 border-bottom:solid 1px #666666;
35 }
36 .bg_left{
37 border-left:solid 1px #666666;
38 }
39 .bg_right{
40 border-right:solid 1px #666666;
41 }
42
43
44 .content{
45 padding:10px;
46 }
47 .inputs{
48 border:solid 1px #a4c8e0;
49 width:150px;
50 height:15px;
51 }
52
53 .userWidth{
54 width:110px;
55 }
56 .content div{
57 float:left;
58 font-size:12px;
59 color:#000;
60 }
61 dl{
62 clear:both;
63 }
64 dt,dd{
65 float:left;
66 }
67 dt{
68 width:130px;
69 text-align:right;
70 font-size:14px;
71 height:30px;
72 line-height:25px;
73 }
74 dd{
75 font-size:12px;
76 color:#666666;
77 width:180px;
78 }
79 /*当鼠标放到文本框时，提示文本的样式*/
80 .import_prompt{
81 border:solid 1px #ffcd00;
82 background-color:#ffffda;
83 padding-left:5px;
84 padding-right:5px;
85 line-height:20px;
86 }
87 /*当文本框内容不符合要求时，提示文本的样式*/
88 .error_prompt{
89 border:solid 1px #ff3300;
90 background-color:#fff2e5;
91 background-image:url(../images/li_err.gif);
92 background-repeat:no-repeat;
93 background-position:5px 2px;
94 padding:2px 5px 0px 25px;
95 line-height:20px;
96 }
97 /*当文本框内容输入正确时，提示文本的样式*/
98 .ok_prompt{
99 border:solid 1px #01be00;
100 background-color:#e6fee4;
101 background-image:url(../images/li_ok.gif);
102 background-repeat:no-repeat;
103 background-position:5px 2px;
104 padding:2px 5px 0px 25px;
105 line-height:20px;
106 }
2、javascript
1 // JavaScript Document
2
3 /*通过ID获取HTML对象的通用方法，使用$代替函数名称*/
4 function $(elementId){
5 return document.getElementById(elementId);
6 }
7
8 /*当鼠标放在通行证用户名文本框时，提示文本及样式*/
9 function userNameFocus(){
10 var userNameId=$("userNameId");
11 userNameId.className="import_prompt";
12 userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18";
13 }
14
15 /*当鼠标离开通行证用户名文本框时，提示文本及样式*/
16 function userNameBlur(){
17 var userName=$("userName");
18 var userNameId=$("userNameId");
19 var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
20 if(userName.value==""){
21 userNameId.className="error_prompt";
22 userNameId.innerHTML="通行证用户名不能为空，请输入通行证用户名";
23 return false;
24 }
25 if(reg.test(userName.value)==false){
26 userNameId.className="error_prompt";
27 userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18";
28 return false;
29 }
30 userNameId.className="ok_prompt";
31 userNameId.innerHTML="通行证用户名输入正确";
32 return true;
33 }
34
35 /*当鼠标放在密码文本框时，提示文本及样式*/
36 function pwdFocus(){
37 var pwdId=$("pwdId");
38 pwdId.className="import_prompt";
39 pwdId.innerHTML="密码长度为6-16";
40 }
41
42 /*当鼠标离开密码文本框时，提示文本及样式*/
43 function pwdBlur(){
44 var pwd=$("pwd");
45 var pwdId=$("pwdId");
46 if(pwd.value==""){
47 pwdId.className="error_prompt";
48 pwdId.innerHTML="密码不能为空，请输入密码";
49 return false;
50 }
51 if(pwd.value.length<6 || pwd.value.length>16){
52 pwdId.className="error_prompt";
53 pwdId.innerHTML="密码长度为6-16";
54 return false;
55 }
56 pwdId.className="ok_prompt";
57 pwdId.innerHTML="密码输入正确";
58 return true;
59 }
60
61
62 /*当鼠标离开重复密码文本框时，提示文本及样式*/
63 function repwdBlur(){
64 var repwd=$("repwd");
65 var pwd=$("pwd");
66 var repwdId=$("repwdId");
67 if(repwd.value==""){
68 repwdId.className="error_prompt";
69 repwdId.innerHTML="重复密码不能为空，请重复输入密码";
70 return false;
71 }
72 if(repwd.value!=pwd.value){
73 repwdId.className="error_prompt";
74 repwdId.innerHTML="两次输入的密码不一致，请重新输入";
75 return false;
76 }
77 repwdId.className="ok_prompt";
78 repwdId.innerHTML="两次密码输入正确";
79 return true;
80 }
81
82 /*当鼠标放在昵称文本框时，提示文本及样式*/
83 function nickNameFocus(){
84 var nickNameId=$("nickNameId");
85 nickNameId.className="import_prompt";
86 nickNameId.innerHTML="1、包含汉字、字母、数字、下划线以及@!#$%&*特殊字符<br/>2、长度为4－20个字符<br/>3、一个汉字占两个字符";
87 }
88
89 /*当鼠标离开昵称文本框时，提示文本及样式*/
90 function nickNameBlur(){
91 var nickName=$("nickName");
92 var nickNameId=$("nickNameId");
93 var k=0;
94 var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; // 匹配昵称
95 var chinaReg=/[\u4e00-\u9fa5]/g; //匹配中文字符
96 if(nickName.value==""){
97 nickNameId.className="error_prompt";
98 nickNameId.innerHTML="昵称不能为空，请输入昵称";
99 return false;
100 }
101 if(reg.test(nickName.value)==false){
102 nickNameId.className="error_prompt";
103 nickNameId.innerHTML="只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成";
104 return false;
105 }
106
107 var len=nickName.value.replace(chinaReg,"ab").length; //把中文字符转换为两个字母，以计算字符长度
108 if(len<4||len>20){
109 nickNameId.className="error_prompt";
110 nickNameId.innerHTML="1、长度为4－20个字符<br/>2、一个汉字占两个字符";
111 return false;
112 }
113
114 nickNameId.className="ok_prompt";
115 nickNameId.innerHTML="昵称输入正确";
116 return true;
117 }
118
119 /*当鼠标放在关联手机号文本框时，提示文本及样式*/
120 function telFocus(){
121 var telId=$("telId");
122 telId.className="import_prompt";
123 telId.innerHTML="1、手机号码以13，15，18开头<br/>2、手机号码由11位数字组成";
124 }
125
126 /*当鼠标离开关联手机号文本框时，提示文本及样式*/
127 function telBlur(){
128 var tel=$("tel");
129 var telId=$("telId");
130 var reg=/^(13|15|18)\d{9}$/;
131 if(tel.value==""){
132 telId.className="error_prompt";
133 telId.innerHTML="关联手机号码不能为空，请输入关联手机号码";
134 return false;
135 }
136 if(reg.test(tel.value)==false){
137 telId.className="error_prompt";
138 telId.innerHTML="关联手机号码输入不正确，请重新输入";
139 return false;
140 }
141 telId.className="ok_prompt";
142 telId.innerHTML="关联手机号码输入正确";
143 return true;
144 }
145
146
147 /*当鼠标放在保密邮箱文本框时，提示文本及样式*/
148 function emailFocus(){
149 var emailId=$("emailId");
150 emailId.className="import_prompt";
151 emailId.innerHTML="请输入您常用的电子邮箱";
152 }
153
154 /*当鼠标离开保密邮箱文本框时，提示文本及样式*/
155 function emailBlur(){
156 var email=$("email");
157 var emailId=$("emailId");
158 var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
159 if(email.value==""){
160 emailId.className="error_prompt";
161 emailId.innerHTML="保密邮箱不能为空，请输入保密邮箱";
162 return false;
163 }
164 if(reg.test(email.value)==false){
165 emailId.className="error_prompt";
166 emailId.innerHTML="保密邮箱格式不正确，请重新输入";
167 return false;
168 }
169 emailId.className="ok_prompt";
170 emailId.innerHTML="保密邮箱输入正确";
171 return true;
172 }
173
174 /*表单提交时验证表单内容输入的有效性*/
175 function checkForm(){
176 var flagUserName=userNameBlur();
177 var flagPwd=pwdBlur();
178 var flagRepwd=repwdBlur();
179 var flagNickName=nickNameBlur();
180 var flagTel=telBlur();
181 var flagEmail=emailBlur();
182
183 userNameBlur();
184 pwdBlur();
185 repwdBlur();
186 nickNameBlur();
187 telBlur();
188 emailBlur();
189
190 if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){
191 return true;
192 }
193 else{
194 return false;
195 }
196
197 }
3、html
1 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>新用户注册页面</title>
6 <link type="text/css" rel="stylesheet" href="css/register.css" />
7 <script type="text/javascript" src="js/register.js"></script>
8 </head>
9
10 <body>
11 <div id="header"><img src="images/register_logo.gif" alt="logo"/></div>
12 <div id="main">
13 <table width="100%" border="0" cellspacing="0" cellpadding="0">
14 <tr>
15 <td class="bg bg_top_left"></td>
16 <td class="bg_top"></td>
17 <td class="bg bg_top_right"></td>
18 </tr>
19 <tr>
20 <td class="bg_left"></td>
21 <td class="content">
22 <form action="" method="post" name="myform" onsubmit="return checkForm()">
23 <dl>
24 <dt>通行证用户名：</dt>
25 <dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()" /> @163.com</dd>
26 <div id="userNameId"></div>
27 </dl>
28 <dl>
29 <dt>登录密码：</dt>
30 <dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
31 <div id="pwdId"></div>
32 </dl>
33 <dl>
34 <dt>重复登录密码：</dt>
35 <dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd>
36 <div id="repwdId"></div>
37 </dl>
38 <dl>
39 <dt>性别：</dt>
40 <dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd>
41 </dl>
42 <dl>
43 <dt>真实姓名：</dt>
44 <dd><input type="text" id="realName" class="inputs" onblur="aa()" /></dd>
45 </dl>
46 <dl>
47 <dt>昵称：</dt>
48 <dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd>
49 <div id="nickNameId"></div>
50 </dl>
51 <dl>
52 <dt>关联手机号：</dt>
53 <dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()" /></dd>
54 <div id="telId"></div>
55 </dl>
56 <dl>
57 <dt>保密邮箱：</dt>
58 <dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()" /></dd>
59 <div id="emailId"></div>
60 </dl>
61 <dl>
62 <dt></dt>
63 <dd><input name=" " type="image" src="images/button.gif"/></dd>
64 </dl>
65 </form>
66 </td>
67 <td class="bg_right"></td>
68 </tr>
69 <tr>
70 <td class="bg bg_end_left"></td>
71 <td class="bg_end"></td>
72 <td class="bg bg_end_right"></td>
73 </tr>
74 </table>
75
76 </div>
77 </body>
78 <script type="text/javascript">
79 function aa(){
80
81 var reg = /^[\u4e00-\u9fa5]$/;
82 var name = document.getElementById("realName").value;
83
84 if(reg.test(name)==false){
85 alert("只能为汉字");
86 }else{
87 alert("正确");
88 }
89
90 }
91 </script>
92
93 </html>
