zoukankan      html  css  js  c++  java

  • HTML+CSS+JS综合练习（动态验证版）

      1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <script>
  7 
  8 
  9         window.onclick = function () {
 10             document.getElementById("form").onsubmit = function () {
 11                 return checkUsername() && checkPassword() && checkEmail();
 12             }
 13             document.getElementById("username").onblur = checkUsername;
 14 
 15             document.getElementById("password").onblur = checkPassword;
 16 
 17             document.getElementById("email").onblur = checkEmail;
 18 
 19 
 20             document.getElementById("name").onblur=checkName;
 21             document.getElementById("tel").onblur=checkTel;
 22 
 23         }
 24 
 25         function checkUsername() {
 26             var username = document.getElementById("username").value;
 27             var reg = /^w{6,12}$/;
 28             var flag = reg.test(username);
 29             var s_username = document.getElementById("s_username");
 30             if (flag) {
 31                 s_username.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>";
 32             } else {
 33                 s_username.innerHTML = "用户名格式有误！";
 34             }
 35         }
 36 
 37         function checkPassword() {
 38             var password = document.getElementById("password").value;
 39             var s_password = document.getElementById("s_password");
 40             var reg = /^w{6,12}$/;
 41             var flag = reg.test(password);
 42             if (flag) {
 43                 s_password.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>";
 44 
 45             } else {
 46                 s_password.innerHTML = "密码格式有误！";
 47             }
 48 
 49         }
 50 
 51 
 52         function checkEmail() {
 53             var email = document.getElementById("email").value;
 54             var s_email = document.getElementById("s_email");
 55             var reg = /^w{6,12}/;
 56             var flag = reg.test(email);
 57             if (flag) {
 58                 s_email.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>";
 59 
 60             } else {
 61                 s_email.innerHTML = "邮箱输入错误!";
 62             }
 63         }
 64 
 65         function checkName() {
 66             var name = document.getElementById("name").value;
 67             var s_name = document.getElementById("s_name");
 68             var reg = /^w{1,12}$/;
 69             var flag = reg.test(name);
 70             if (flag) {
 71                 s_name.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>";
 72 
 73             } else {
 74                 s_name.innerHTML = "名字输入有误！";
 75             }
 76 
 77 
 78         }
 79 
 80         function checkTel() {
 81             var tel = document.getElementById("tel").value;
 82             var s_tel = document.getElementById("s_tel");
 83             var reg = /^w{6,12}$/;
 84             var flag = reg.test(tel);
 85             if(flag){
 86                 s_tel.innerHTML="<img src='img/gou.png' width='35px' height='25px'>";
 87 
 88             }else{
 89                 s_tel.innerHTML= "邮箱输入有误！";
 90             }
 91         }
 92 
 93     </script>
 94 
 95 
 96     <style>
 97         .error {
 98             color: red;
 99         }
100 
101 
102         * {
103             margin: 0px;
104             padding: 0px;
105             box-sizing: border-box;
106         }
107 
108         body {
109             background: url("img/register_bg.png");
110             padding: 30px;
111         }
112 
113         .BigBox {
114             width: 900px;
115             height: 500px;
116             border: 8px solid #EEEEEE;
117             background-color: white;
118             /*让div水平居中*/
119             margin: auto;
120         }
121 
122         /*<!--left_layout-->*/
123         .left_layout {
124             margin: 15px;
125             float: left;
126         }
127 
128         #txt_reg1 {
129             color: #FFD026;
130             font-size: 20px;
131 
132         }
133 
134         #txt_reg2 {
135             color: #A6A6A6;
136             font-size: 22px;
137         }
138 
139         /*<!--center_layout-->*/
140         .center_layout {
141             float: left;
142             margin: 15px;
143         }
144 
145         .center_layout table {
146             /*合并边框模型*/
147             border-collapse: separate;
148             /*相邻单元的边框之间的距离*/
149             border-spacing: 2px;
150             border-color: gray;
151         }
152 
153         .td_left {
154             width: 100px;
155             text-align: right;
156             height: 45px;
157         }
158 
159         .td_right {
160             padding-left: 50px;
161         }
162 
163         #username, #password, #email, #name, #tel, #birthday, #verify_code {
164             width: 250px;
165             height: 32px;
166             border: 1px solid #A6A6A6;
167             border-radius: 5px;
168             padding-left: 10px;
169         }
170 
171         #verify_code {
172             width: 110px;
173         }
174 
175         #img_verify_code {
176             height: 32px;
177             /*垂直居中*/
178             vertical-align: middle;
179         }
180 
181         #btn_submit {
182             width: 130px;
183             height: 40px;
184             background-color: #FFD026;
185             border: 1px solid #FFD026;
186         }
187 
188         /*<!--right_layout-->*/
189         .right_layout {
190             float: right;
191             margin: 15px;
192         }
193 
194         a:link {
195             color: pink;
196         }
197 
198         a:hover {
199             color: green;
200         }
201 
202         a:active {
203             color: yellow;
204         }
205 
206         a:visited {
207             color: red;
208         }
209 
210         .right_layout div {
211             float: left;
212         }
213     </style>
214 </head>
215 <body>
216 <div class="BigBox">
217     <!--left_layout-->
218     <div class="left_layout">
219         <div id="txt_reg1">新用户注册</div>
220         <div id="txt_reg2">USER REGISTER</div>
221     </div>
222     <!--center_layout-->
223     <div class="center_layout">
224         <!--定义表单 form-->
225         <form action="#" method="post" id="form">
226             <table>
227                 <tbody>
228                 <tr>
229                     <td class="td_left">
230                         <label for="username">用户名</label>
231 
232                     </td>
233                     <td class="td_right">
234                         <input type="text" name="username" id="username" placeholder="请输入用户名">
235                         <span id="s_username" class="error"></span>
236                     </td>
237 
238                 </tr>
239 
240                 <tr>
241                     <td class="td_left">
242                         <label for="password">密码</label>
243                     </td>
244                     <td class="td_right">
245                         <input type="password" name="password" id="password" placeholder="请输入密码">
246                         <span id="s_password" class="error"></span>
247                     </td>
248                 </tr>
249 
250                 <tr>
251                     <td class="td_left">
252                         <label for="email">Email</label>
253 
254                     </td>
255                     <td class="td_right">
256                         <input type="email" name="email" id="email" placeholder="请输入邮箱">
257                         <span id="s_email" class="error"></span>
258                     </td>
259                 </tr>
260 
261                 <tr>
262                     <td class="td_left">
263                         <label for="name">姓名</label>
264                     </td>
265                     <td class="td_right">
266                         <input type="text" name="name" id="name" placeholder="请输入姓名">
267                         <span id="s_name" class="error"></span>
268                     </td>
269                 </tr>
270 
271                 <tr>
272                     <td class="td_left">
273                         <label for="tel">手机号</label>
274                     </td>
275                     <td class="td_right">
276                         <input type="text" name="tel" id="tel" placeholder="请输入手机号">
277                         <span id="s_tel" class="error"></span>
278                     </td>
279                 </tr>
280 
281                 <tr>
282                     <td class="td_left">
283                         <label>性别</label>
284                     </td>
285                     <td class="td_right">
286                         <input type="radio" name="gender" value="male" checked> 男
287                         <input type="radio" name="gender" value="female"> 女
288                     </td>
289                 </tr>
290 
291                 <tr>
292                     <td class="td_left">
293                         <label for="birthday">出生日期</label>
294                     </td>
295                     <td class="td_right">
296                         <input type="date" name="birthday" id="birthday">
297                     </td>
298                 </tr>
299 
300                 <tr>
301                     <td class="td_left">
302                         <label for="verify_code">验证码</label>
303                     <td class="td_right">
304                         <input type="text" name="verify_code" id="verify_code">
305                         <img src="img/verify_code.jpg" id="img_verify_code">
306                     </td>
307                 </tr>
308                 <tr>
309                     <td colspan="2" align="center">
310                         <input type="submit" value="注册" id="btn_submit">
311                 </tr>
312 
313                 </tbody>
314             </table>
315         </form>
316     </div>
317     <!--right_layout-->
318     <div class="right_layout">
319         <div>已有账号?</div>
320         <div><a href="#">立即登录</a></div>
321 
322     </div>
323 </div>
324 </body>
325 </html>
  • 相关阅读:
    今天学到的新知识自己的电脑可以像Github Pages、码云 Pages一样发布静态资源
    移动端安卓开发学习记录Android Studio打断点调试操作步骤记录
    图文并茂学习记录从零开始进行微信小程序开发+引入Vant Weapp组件
    代码小DEMO随笔JS原生手机版本alert弹框
    移动端安卓开发学习记录Android Studio使用adb链接夜神模拟器常用指令
    图文并茂的学习笔记微信小程序自定义tabbar
    解决微信小程序 自定义tabBar 切换时候闪烁问题
    App扫码登录
    TypeScript 参数简化实战（进阶知识点conditional types） 广东靓仔
    前端进阶指南（优秀文章） 广东靓仔
  • 原文地址：https://www.cnblogs.com/edcoder/p/11961659.html
Copyright © 2011-2022 走看看