利用jquery制作用戶登陸界面

來源：懂視網責編：小采時間：2020-11-27 20:13:38

利用jquery制作用戶登陸界面

利用jquery制作用戶登陸界面: 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 cnre

推薦度：

點擊下載本文 文檔為doc格式

導讀利用jquery制作用戶登陸界面: 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 cnre

 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 <p id="home">
 65 <h1>用戶登陸</h1>
 66 <p 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 </p>
 79 <p id="foot">
 80 <input type="submit" value="提交"/>
 81 <input type="reset" value="重置"/>
 82 </p
 >83 </form>
 84 </p>
 85 </body>
 86 </html>

運行截圖

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

利用jquery制作用戶登陸界面

利用jquery制作用戶登陸界面: 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 cnre

推薦度：

點擊下載本文 文檔為doc格式

標簽：登錄制作用戶

熱門焦點

利用jquery制作用戶登陸界面

利用jquery制作用戶登陸界面

利用jquery制作用戶登陸界面

最新推薦

猜你喜歡

熱門推薦