web实验二
程序员文章站
2022-06-17 21:58:02
通过jQuery实现用户注册身份验证，当每个文本框失去焦点时进行该文本框内容校验，并将校验信息在文本框右侧显示出结果。 ......
通过jquery实现用户注册身份验证，当每个文本框失去焦点时进行该文本框内容校验，并将校验信息在文本框右侧显示出结果。
具体校验要求：
1、用户名由6-18位字符组成
2、密码由6-18位字符组成，且必须包含字母、数字和标点符号
3、确认密码必须和密码相同，否则提示密码不一致
4、电子邮件必须符合电子邮件格式
5、自我介绍不能为空
6、用户点击重置时清空所有文本框内容
7、用户点击提交是将用户信息存入对象user中，同时检查性别、出生日期是否选择，如果没有就弹出提示对话框，爱好至少选择一个，否支弹出提示。
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>用户登录示例</title>
7 <script src="jquery-3.4.1.js " type="text/javascript"> </script>
8 </head>
9 <body>
10 <form id="userfrom" name="user" action="#" method="post">
11 <table align="center" border="0" cellpadding="2" width="1000" >
12 <tr>
13 <td> 用户名</td>
14
15 <td>
16 <input name="username" type="text" id="txtuser">
17 </td>
18 <td id="info_username">*用户名由6-18位字符组成
19 </td>
20 </tr>
21
22 <tr>
23 <td>密 码</td>
24 <td>
25 <input id="txtpwd" name="password" type="password">
26 </td>
27 <td id="info_pwd">* 密码由6-18位字符组成，且必须包含字母、数字和标点符号</td>
28 </tr>
29 <tr>
30 <td>确认密码</td>
31 <td>
32 <input name="pwdrepeat" type="password" id="txtrpt">
33 </td>
34 <td id="info_rpd">* 请再次输入密码</td>
35 </tr>
36 <tr>
37 <td>用户类型</td>
38 <td>
39 <select name="usertype" id="seluser">
40 <option name="admin" value="admin">管理员</option>
41 <option name="sysadmin" value="sysadmin">系统管理员</option>
42 </select>
43 </td>
44 <td>* 请选择用户类型</td>
45 </tr>
46 <tr>
47 <td>性 别</td>
48 <td>
49 <input class="sex" type="radio" id="man" name="sex" value="male">男
50 <input class="sex" type="radio" id="woman" name="sex" value="2">女
51 </td>
52 <td>*请选择你的性别</td>
53 </tr>
54 <tr>
55 <td>出生日期</td>
56 <td>
57 <input class="date" name="birthday" type="date" id="txtdate"/>
58 </td>
59 <td>*请选择你的出生日期</td>
60 </tr>
61 <tr>
62 <td>兴趣爱好</td>
63 <td>
64 <input class="hobby" type="checkbox" id="read" name="hobby" value="1">阅读
65 <input class="hobby" type="checkbox" id="music" name="hobby" value="2">音乐
66 <input class="hobby" type="checkbox" id="sport" name="hobby" value="3">运动
67 </td>
68 <td>*请选择兴趣爱好</td>
69 </tr>
70 <tr>
71
72 <td>电子邮箱</td>
73
74 <td>
75 <input name="email" type="email" id="txtmail"/>
76 </td><td id="info_mail">* 用email找回密码</td>
77 </tr>
78
79
80 <tr>
81 <td>自我介绍</td>
82 <td>
83 <textarea name="introduction" id="txtintro" cols="40" rows="5"></textarea>
84 </td><td>*</td>
85 </tr>
86
87 <tr>
88 <td colspan ="2" align="center">
89 <input type="submit" name="submit" id="register" value="提交"/>
90 <input id="reset"type="reset" value="重填"/>
91 </td>
92 </tr>
93 </table>
94 </form>
95 </body>
96 <script>
97
98 $(document).ready(function() {
99
100
101
102
103 /*用户名验证*/
104 $("#txtuser").blur(function(){
105 var username=$(this).val();
106 if(checkusername(username)){
107 $("#info_username").text("用户名正确");
108 }else{
109 $("#info_username").text("用户名不符合要求，长度在8-16个字符");
110 }
111 });
112
113 /*用户名验证功能定义*/
114
115 function checkusername(name){
116 var re=/^[a-za-z0-9]{6,18}$/;
117 if(re.test(name)){
118 return true;
119 }
120 else{
121 return false;
122 }
123 }
124
125 /*密码验证*/
126 $("#txtpwd").blur(function(){
127 var password=$(this).val();
128 if(checkpwd(password)){
129 $("#info_pwd").text("密码符合要求")
130 }else{
131 $("#info_pwd").text("密码太简单")
132
133 }
134 });
135 /*密码限制功能*/
136
137 function checkpwd(pwd){
138 var re=/^(?=.*[a-z])(?=.*[a-z])(?=.*\d)[\s\s]{8,16}$/ ;
139 if (re.test(pwd)){
140 return true;
141 }else{
142 return false;
143
144 }
145 }
146
147 /*再次确认密码*/
148 $(function(){
149 $("#txtrpt").blur(function(){
150 if($("#txtpwd").val()!=$("#txtrpt").val()){
151 $("#info_rpd").text("确认密码和密码不一致");
152 }else{
153 $("#info_rpd").text("确认密码和密码一致");
154 }
155
156 })
157
158 });
159
160
161 /*邮箱验证*/
162 $("#txtmail").blur(function(){
163 var mail=$(this).val();
164 if (checkmail(mail)){
165 $("#info_mail").text("邮箱地址格式正确");
166 }else{
167 $("#info_mail").text("邮箱地址格式不正确");
168
169
170 }
171 });
172
173 /*邮箱功能*/
174 function checkmail(mail){
175 var re=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
176 if(re.test(mail)){
177 return true;
178 } else{
179 return false;
180
181 }
182 }
183
184
185 /*提交功能*/
186
187 $("#register").click(function(){
188 var user={};
189 var username=$("#txtuser").val();
190 if(checkusername(username)){
191 user.username=username;
192 }else{
193 alert("用户名格式不正确");
194 return;
195 }
196 var password=$("#txtpwd").val();
197 if(checkpwd(password)){
198 user.password=password;
199 }else{
200 alert("请重新输入密码");
201 return;
202
203 }
204 var rp=$("#txtrpt").val();
205 if(password!=rp){
206 alert("确认密码和密码不一致");
207 return;
208 }
209 var type=$("#seluser").val();
210 user.type=type;
211 var sex=$(".sex:checked").val();
212 if(sex!=null){user.sex=sex;
213 }else{
214 alert("请选择性别");
215 return ;
216 }
217
218
219 var birthday=$("#txtdate").val();
220
221 if (birthday==null) {
222 alert("请选择出生日期");
223 return ;
224 }else{
225 user.birthday=birthday;
226 }
227
228
229 var hobby=new array();
230 $(".hobby:checked").each(function(){
231 hobby.push($(this).val())
232
233 });
234 if(hobby.length=0){
235 alert("请选择爱好");
236 return;
237 }else{
238 user.hobby=hobby;
239 }
240 var mail=$("#txtmail").val();
241 if (checkmail(mail)){
242 user.mail=mail;
243 }
244 else{
245 alert("请选择日期");
246 return;
247 }
248
249 var introduction=$("#txtintro").val();
250 if(introduction==null){
251 user.introduction=introduction;
252 }else{
253 alert("自我介绍不能空");
254 }
255
256 alert(user);
257 });
258
259 });
260
261
262 </script>
263 </html>
上一篇： asp.net core中如何使用cookie身份验证
下一篇： plsql储存过程
推荐阅读
-
java SOAPHEADER的web service
-
redis与ssm整合方法（mybatis二级缓存）
-
SpringBoot+Mybatis项目使用Redis做Mybatis的二级缓存的方法
-
寻找二叉树最远的叶子结点(实例讲解)
-
springboot+mybatis+redis 二级缓存问题实例详解
-
Spring Boot与Kotlin处理Web表单提交的方法
-
Java Web学习之Cookie和Session的深入理解
-
HTML5 video标签（播放器）学习笔记（二）:播放控制
-
使用HTML5的Notification API制作web通知的教程
-
Java Web学习之MySQL在项目中的使用方法