用户注册：结构层：html;表现层：css;行为层：javascript;
html利用ul,li来构造：
注意事项：1、每个Input都要有相应的id,这是在js中去调用的。
2、<a href="javascript:void(0)"></a>，添加javascript:void(0)是为了阻止链接的跳转。
1. <body>
2. <div id="reg">
3. <form>
4. <div class="reg_title"><h1>用户注册</h1></div>
5. <ul class="reg_con">
6. <li>
7. <ul class="def">
8. <li><span>用户帐号：</span><input type="text" id="uname"/></li>
9. <li><p><i></i>给自己起个名字吧，它将成为您登录本站的用户名</p></li>
10. </ul>
11. </li>
12. <li>
13. <ul class="def">
14. <li><span>电子邮箱：</span><input type="text" id="email"/></li>
15. <li><p><i></i>请输入您的常用邮箱地址，此邮箱地址将作为修改密码</p></li>
16. </ul>
17. </li>
18. <li>
19. <ul class="def">
20. <li><span>手机号码：</span><input type="text" id="mobile"/></li>
21. <li><p><i></i>请输入您的手机号码，方便我们之间的联系</p></li>
22. </ul>
23. </li>
24. <li>
25. <ul class="def">
26. <li><span>安全密码：</span><input id="pwd" type="password"/></li>
27. <li><p><i></i>请输入安全密码，它将作为您的登录密码</p></li>
28. </ul>
29. </li>
30. <li>
31. <ul class="def ">
32. <li><span>确认密码：</span><input type="password" id="qrpwd"/></li>
33. <li><p><i></i>请将上面的密码再输入一次</p></li>
34. </ul>
35. </li>
36. <li>
37. <ul>
38. <li><span></span></li>
39. <li id="reg_sub"><a href="javascript:void(0)" id="enter">立即注册</a></li>
40. </ul>
41. </li>
42. </ul>
43. </form>
44. </div>
45. </body>复制代码
表现层：css
注意事项：1、页面开始一般都写上重置代码。
2、针对用户名、输入框、提示图标要写一组本身的样式、一组def默认的样式、一组point获得焦点的样式、一组error错误样式、一组ok输入正确的样式。
- /*reset重置代码开始*/
行为层：js
js编写的主体思路：1、中心点：每一个input框，也就是获取的inp=document.getElementsByTagName("input");
2、针对input输入框会有点击即获得焦点的状态，和失去焦点的状态。
3、当获得焦点的时候，会给用户名、输入框、提示图标（改变背景图片的位置）变成蓝色，即添加point样式。
4、当input输入框失去焦点时，会给用户名、输入框、提示图标变成红色，即添加error样式。
5、当input输入框内容正确后，会给用户名、输入框变成。
1.
2. /*闭包*/
3. (
4. function(){
5. var $=function(_id){
6. return document.getElementById(_id);
7. }
8. var inpStyle=function(){
9. var inp=document.getElementsByTagName("input");//获得id为inpList 中的所有的input
10. for(i=0;i<inp.length;i++){
11. inp[i].onfocus=function(){
12. var par=this.parentNode.parentNode;
13. var msg=par.getElementsByTagName("p")[0];
14. par.className="point";
15. check.focus[this.id](par,this,msg);
16. }
17. inp[i].onblur=function(){
18. var par=this.parentNode.parentNode;
19. var msg=par.getElementsByTagName("p")[0];
20. par.className="def";
21. check.blurs[this.id](par,this,msg);
22. }
23. }
24. $("enter").onclick=function(){
25. subback(inp);
26. }
27. }
28. var check={
29. focus:{
30. uname:function(_ul,_this,_p){
31. _ul.className="point";
32. _p.innerHTML="<i></i>给自己起个名字吧，它将成为您登录本站的用户名";
33. },
34. email:function(_ul,_this,_p){
35. _ul.className="point";
36. _p.innerHTML="<i></i>请输入您的常用邮箱地址，此邮箱地址将作为修改密码";
37. },
38. mobile:function(_ul,_this,_p){
39. _ul.className="point";
40. _p.innerHTML="<i></i>请输入您的手机号码，方便我们之间的联系";
41. },
42. pwd:function(_ul,_this,_p){
43. _ul.className="point";
44. _p.innerHTML="<i></i>请输入安全密码，它将作为您的登录密码";
45. },
46. qrpwd:function(_ul,_this,_p){
47. _ul.className="point";
48. _p.innerHTML="<i></i>请将上面的密码再输入一次";
49. }
50. },
51. blurs:{
52. uname:function(_ul,_this,_p){//ul标签、当前输入框、错误的信息
53. _ul.className="error";
54. var flag=false;
55. if(_this.value==""){
56.
57. _p.innerHTML="<i></i>用户名不能为空！";
58. }else if(_this.value.length<3 || _this.value.length>16){
59. _p.innerHTML="<i></i>用户名长度应控制在3-16位字符之间！";
60. }else if(!/^[\w_-\u4e00-\u9fa5]+$/.test(_this.value)){
61. _p.innerHTML = "<i></i>用户名只能由大小写字母，数字，下划线，中横线和中文组成！";
62. }else{
63. _ul.className="ok";
64. _p.innerHTML="<i></i>";
65. flag=true;
66.
67. }
68.
69. return flag;
70. },
71. email:function(_ul,_this,_p){
72. _ul.className="error";
73. var flag=false;
74. if(_this.value==""){
75.
76. _p.innerHTML="<i></i>邮箱不能为空！";
77. }else if(!/\w+((-w+)|(\.\w+))*\@[\w]+((\.|-)[\w]+)*\.[\w]+/.test(_this.value)){
78. _p.innerHTML="<i></i>请输入正确的邮箱地址！";
79. }
80. else{
81. _ul.className="ok";
82. _p.innerHTML="<i></i>";
83. flag=true;
84. }
85. return flag=false;
86. }
87. ,
88. mobile:function(_ul,_this,_p){
89. _ul.className="error";
90. var flag=false;
91. if(_this.value==""){
92.
93. _p.innerHTML="<i></i>电话号码不能为空！";
94. }else if(!/0?(13|14|15|18)[0-9]{9}/.test(_this.value)){
95. _p.innerHTML="<i></i>请输入正确的电话号码！";
96. }
97. else{
98. _ul.className="ok";
99. _p.innerHTML="<i></i>";
100. flag=true;
101. }
102. return flag;
103. }
104. ,
105. pwd:function(_ul,_this,_p){
106. _ul.className="error";
107. var flag=false;
108. if(_this.value==""){
109.
110. _p.innerHTML="<i></i>密码不能为空！";
111. }else if(_this.value.length<6 || _this.value.length>16){
112.
113. _p.innerHTML="<i></i>密码应该在6-16位之间！";
114. }else if(!/^[\w_-]+$/.test(_this.value)){
115. _p.innerHTML="<i></i>密码只能由大小字母、数字、下划线组成！";
116. }
117. else{
118. _ul.className="ok";
119. _p.innerHTML="<i></i>";
120. flag=true;
121. }
122. return flag;
123. }
124. ,
125. qrpwd:function(_ul,_this,_p){
126. _ul.className="error";
127. var flag=false;
128. if(_this.value==""){
129. _p.innerHTML="<i></i>为了保证您输入的密码准确无误，请再次输入密码！！";
130.
131. }else if(_this.value!=$("pwd").value){
132.
133. _p.innerHTML="<i></i>密码两次输入不一致，请重新输入！";
134. }
135. else{
136. _ul.className="ok";
137. _p.innerHTML="<i></i>";
138. flag=true;
139. }
140. return flag;
141. }
142. }
143. }
144. var subback=function(inps){
145. for(var i=0;i<inps.length;i++){
146. //inps[i].focus();
147.
148. var flag=true;
149. var par=inps[i].parentNode.parentNode;
150. var msg=par.getElementsByTagName("p")[0];
151.
152.
153. if(!check.blurs[inps[i].id](par,inps[i],msg)){
154. flag=false;
155. break;
156. }
157. }
158. if(flag){
159. alert("可提交");
160. ｝<span style="background-color: rgb(255, 255, 255); line-height: 1.5;"> else{</span>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
