标签:type display password 号码 点击 mat 表格 css ace
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录验证</title> 6 <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css"/> 7 <style type="text/css"> 8 .c1{ 9 position: fixed; 10 top: 45%; 11 left: 50%; 12 } 13 .c1 input:hover{ 14 background-color:#2AC845 ; 15 color: white; 16 } 17 .fbox{ 18 border: 1px solid gainsboro; 19 box-shadow: 1px 1px 15px gainsboro; 20 background: url(../../angular_mibear/Bootstrap/img/diwen1.png) repeat ; 21 position: fixed; 22 left: 22%; 23 top: 25%; 24 display: block; 25 } 26 .xx{ 27 position: absolute; 28 right: 0px; 29 top: 0px; 30 width: 20px; 31 height: 20px; 32 border: 1px solid gainsboro; 33 text-align: center; 34 line-height: 20px; 35 cursor: pointer; 36 } 37 blockquote{ 38 color: red; 39 display: block; 40 font-size: 1em; 41 42 } 43 </style> 44 </head> 45 <body> 46 <div class="container c1"> 47 <input type="button" name="" id="" value="Login" class="btn btn-default "/> 48 </div> 49 <!--表格--> 50 <table class="table"> 51 <caption>记录表格</caption> 52 <thead> 53 <tr> 54 <th>姓名</th> 55 <th>密码</th> 56 <th>删除</th> 57 </tr> 58 </thead> 59 <tbody> 60 <tr> 61 <td>产品1</td> 62 <td>23/11/2013</td> 63 <td><input type="button" value="删除" class="btn btn-default"/></td> 64 </tr> 65 </tbody> 66 </table> 67 <div class="container fbox"> 68 <!--取消--> 69 <div class="xx">×</div> 70 <form class="col-md-12"> 71 <div class="form-group col-md-12"> 72 <br /> 73 <!--邮箱--> 74 <label for="exampleInputEmail1">Email address</label> 75 <input type="email" class="form-control emailtext inputtext" id="exampleInputEmail1" placeholder="Email" value="13765667472"> 76 <br /> 77 <!--提示--> 78 <blockquote class="tstext1"> 79 <p>请输入正确的邮箱</p> 80 <footer>登录提示- <cite title="Source Title">登录名不能为空或少于5个字符,邮箱或者手机</cite></footer> 81 </blockquote> 82 </div> 83 <div class="form-group col-md-12"> 84 <!--密码--> 85 <label for="exampleInputPassword1">Password</label> 86 <input type="password" class="form-control passtext inputtext" id="exampleInputPassword1" placeholder="Password" value="q931623824"> 87 <br /> 88 <!--提示--> 89 <blockquote class="tstext2"> 90 <p>请输入正确的密码</p> 91 <footer>密码提示- <cite title="Source Title">以字母开头,长度在6~18之间,只能包含字母、数字和下划线</cite></footer> 92 </blockquote> 93 <br/> 94 <button type="button" class="btn btn-default btn_submit">Submit</button> 95 </div> 96 </form> 97 98 </div> 99 </body> 100 <script src="../../framework/official/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> 101 <script src="../../framework/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> 102 <script type="text/javascript"> 103 $(function(){ 104 tstext1.css("color","#2AC845"); 105 tstext2.css("color","#2AC845"); 106 }) 107 //判断内容 108 $(".c1 input").on("click",function(){ 109 $(".fbox").css("display","block"); 110 }); 111 $(".xx").on("click",function(){ 112 $(".fbox").css("display","none"); 113 //删除元素 114 //$(".fbox").remove(); 115 }); 116 var emailadd=$(".emailtext"); 117 var passtext=$(".passtext"); 118 var tstext1=$(".tstext1 p"); 119 var tstext2=$(".tstext2 p"); 120 var text1=false; 121 var text2=false; 122 //失去焦点判断用户名 123 $(".inputtext").on("blur",function(){ 124 jiance(); 125 }) 126 127 function jiance(){ 128 if(emailadd.val()==""){ 129 tstext1.text("登录名不能为空或少于5个字符"); 130 tstext1.css("color","red"); 131 text1=false; 132 } 133 else if(!emailadd.val().match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)){ 134 if(emailadd.val().match(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/)){ 135 tstext1.text("手机号码输入正确"); 136 tstext1.css("color","#2AC845"); 137 text1=true; 138 } 139 else{ 140 tstext1.text("手机号码或邮箱不正确"); 141 tstext1.css("color","red"); 142 text1=false; 143 } 144 } 145 else{ 146 tstext1.text("邮箱输入正确"); 147 tstext1.css("color","#2AC845"); 148 text1=true; 149 } 150 //失去焦点判断密码 151 if(!passtext.val().match(/^[a-zA-Z]\w{5,17}$/)){ 152 tstext2.text("以字母开头,长度在6~18之间,只能包含字母、数字和下划线"); 153 tstext2.css("color","red"); 154 text2=false; 155 }else{ 156 tstext2.text("密码格式正确"); 157 tstext2.css("color","#2AC845"); 158 text2=true; 159 } 160 } 161 162 $(".btn_submit").on("click",function(){ 163 jiance(); 164 if(text1==true&&text2==true){ 165 $(".fbox").css("display","none"); 166 xieTable(); 167 shanchu(); 168 } 169 else 170 { 171 jiance(); 172 } 173 }) 174 175 function xieTable(){ 176 $(".table tbody").append("<tr><td>"+emailadd.val()+"</td><td>"+passtext.val()+"</td><td><input type=‘button‘ value=‘删除‘ class=‘btn btn-default‘/></td></tr>"); 177 } 178 //点击删除事件 179 function shanchu(){ 180 $(".table tbody tr td input").on(‘click‘,function(){ 181 //向上遍历父元素然后删除 182 $(this).parent("td").parent("tr").remove(); 183 }) 184 } 185 shanchu(); 186 </script> 187 </html>
标签:type display password 号码 点击 mat 表格 css ace
原文地址:http://www.cnblogs.com/mibear/p/SignIn.html