用户登陆界面(jquery)

最新推荐文章于 2023-10-25 15:53:28 发布

weixin_30388677

最新推荐文章于 2023-10-25 15:53:28 发布

阅读量233

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/a1045417817/p/7479599.html

版权

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <script src="js/jquery-1.8.0.min.js"></script>
 8     <script>
 9         var cnresu = false;
10         $(function(){
11             $("input[name='uname']").blur(function(){//blur从链接上移开焦点(鼠标离开框时)
12                 var unamestr = $(this).val();
13                 var regstr = /^[\u4e00-\u9fa5]{2,4}$/;
14                 if(!regstr.test(unamestr)){
15                     $(this).parent().next("dd").html("必须是2-4个汉字");
16                     cnresu = false;
17                     return;
18                 }
19                 cnresu = true;
20             });
21             $("input[name='uname']").focus(function(){//focus给予链接焦点(鼠标点中框时)
22                 $(this).css("border","solid 1px #dddddd");
23                 //$(this).val("");
24                 $(this).parent().next("dd").html("");
25             });
26         });
27     </script>
28     <style>
29         #home{
30             width: 600px;
31             height: 300px;
32             margin: auto;
33             background-color: #7FFFD4;
34         }
35         #head{
36             padding-top: 20px;
37             height: 100px;
38         }
39         .dl1{
40             clear: both;
41         }
42         .dl1 dt{
43             float: left;
44             text-align: right;
45             width: 150px;
46             height: 30px;
47             line-height: 30px;
48         }
49         .dl1 dd{
50             float: left;
51             height: 30px;
52             line-height: 30px;
53         }
54         #foot{
55             text-align: center;
56         }
57         h1{
58             padding-top: 20px;
59             text-align: center;
60             color: bisque;
61         }
62     </style>
63     <body>
64         <div id="home">
65             <h1>用户登陆</h1>
66             <div id="head">
67             <form action="biaodan.html" name="regform" method="post" >
68                 <dl class="dl1">
69                     <dt>用户名 : </dt>
70                     <dd><input type="text" name="uname"/></dd>
71                     <dd id="erroruname"></dd>
72                 </dl>
73                 <dl class="dl1">
74                     <dt>密码 : </dt>
75                     <dd><input type="password"/></dd>
76                     <dd id="errorpass"></dd>
77                 </dl>
78             </div>
79                 <div id="foot">
80                     <input type="submit" value="提交"/>
81                     <input type="reset" value="重置"/>
82                 </div>
83             </form>
84         </div>
85     </body>
86 </html>

运行截图

转载于:https://www.cnblogs.com/a1045417817/p/7479599.html

weixin_30388677

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用户登陆界面(jquery)

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script src="js/jquer...
复制链接

扫一扫