您的位置：首页 > Web前端 > CSS

【html+css】简单注册界面（含可运行源码）

2017-09-04 12:33 399 查看

使用html与css实现简单注册界面，另JavaScript实现简单的逻辑检查。

如截图所示： 

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>注册页面</title>
6 </head>
7 <body>
8     <script>
9         function checkForm() {
10             var tag = 1;
11             var str;
12
13             /**校验用户名*/
14             //1.获取用户输入的数据
15             var uValue = document.getElementById("user").value;
16             //alert(uValue);
17             if (uValue == "") {
18                 //2.给出错误提示信息
19                 str = "1.用户名不能为空";
20                 tag = -1;
21             }
22
23             /**校验密码*/
24             var pValue = document.getElementById("password").value;
25             if (pValue == "") { //注意空的表示方法
26                 tag = -1;
27                 str += "2.密码不能为空";
28             }
29
30             /** 校验确认密码*/
31             var rpValue = document.getElementById("repassword").value;
32             if (rpValue != pValue) {
33                 tag = -1;
34                 str += "3.两次密码不一致";
35             }
36
37             /**校验邮箱*/
38             var eValue = document.getElementById("email").value;
39             if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
40                     .test(eValue)) {
41                 tag = -1;
42                 str += "4.邮箱格式不对！";
43             }
44             alert(str);
45             if (tag == -1)
46                 return false;
47         }
48     </script>
49
50     <table border="1px" align="center" width="1300px" cellpadding="0px"
51         cellspacing="0px">
52
53         <!--1.logo部分-->
54         <tr>
55             <td>
56                 <!--嵌套一个一行三列的表格-->
57                 <table border="1px" width="100%">
58                     <tr height="50px">
59
60                         <td colspan="3" align="right"><a href="#">登录</a> <a href="#">注册</a>
61                             <a href="#">购物车</a></td>
62                     </tr>
63                 </table>
64             </td>
65         </tr>
66
67         <!--2.导航栏部分-->
68         <tr height="50px">
69             <td><a href="#">首页</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">手机数码</a>
70                 &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">电脑办公</a>&nbsp; &nbsp; &nbsp;
71                 &nbsp; <a href="#">鞋靴箱包</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">家用电器</a>
72             </td>
73         </tr>
74
75         <!--3.注册表单-->
76         <tr>
77             <td height="600px">
78                 <!--嵌套一个十行二列的表格-->
79                 <form name="form1" method="post" action=""
80                     onSubmit="return checkForm();">
81                     <table border="1px" width="750px" height="400px" align="center"
82                         cellpadding="0px" cellspacing="0px" bgcolor="white">
83                         <tr height="40px">
84                             <td colspan="2"><font size="4">会员注册</font>&nbsp;&nbsp;&nbsp;USER
85                                 REGISTER</td>
86                         </tr>
87                         <tr>
88                             <td>用户名</td>
89                             <td><input type="text" name="user" size="35px" id="user"
90                                 onchange="change(this.value)" />
91                                 <p id="p"></p></td>
92                         </tr>
93                         <tr>
94                             <td>密码</td>
95                             <td><input type="password" name="password" size="35px"
96                                 id="password" /></td>
97                         </tr>
98                         <tr>
99                             <td>确认密码</td>
100                             <td><input type="password" name="repassword" size="35px"
101                                 id="repassword" /></td>
102                         </tr>
103                         <tr>
104                             <td>E-mail</td>
105                             <td><input type="text" name="e-mail" size="35px" id="email" />
106                             </td>
107                         </tr>
108                         <tr>
109                             <td>姓名</td>
110                             <td><input type="text" name="username" size="35px" /></td>
111                         </tr>
112                         <tr>
113                             <td>性别</td>
114                             <td><input type="radio" name="sex" value="男" />男 <input
115                                 type="radio" name="sex" value="女" />女</td>
116                         </tr>
117                         <tr>
118                             <td>出生日期</td>
119                             <td><input type="text" name="birthday" size="35px" /></td>
120                         </tr>
121                         <tr>
122                             <td>验证码</td>
123                             <td><input type="text" name="yzm" /></td>
124                         </tr>
125                         <tr align="center">
126                             <td colspan="2"><input type="submit" value="注册" /></td>
127                         </tr>
128                     </table>
129                 </form>
130             </td>
131         </tr>
132
133         <!--4.广告图片-->
134         <tr>
135             <td></td>
136         </tr>
137
138         <!--5.友情链接和版权信息-->
139         <tr>
140             <td align="center"><a href="#"><font>关于我们</font></a> <a href="#"><font>联系我们</font></a>
141                 <a href="#"><font>招贤纳士</font></a> <a href="#"><font>法律声明</font></a>
142                 <a href="#"><font>友情链接</font></a> <a href="#"><font>支付方式</font></a>
143                 <a href="#"><font>配送方式</font></a> <a href="#"><font>服务声明</font></a>
144                 <a href="#"><font>广告声明</font></a>
145                 <p>Copyright © 2005-2016 hh商城 版权所有</p></td>
146         </tr>
147     </table>
148 </body>
149 </html>

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航