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>[学杂笔记] 登录验证（学杂笔记）
猜你喜欢
转载自blog.csdn.net/u011927449/article/details/107728139
今日推荐
周排行