1 前台提交信息到后台，两种表单验证：
2 1，form 表单验证
3 2，ajax 无刷新页面提交
4
5 表单验证方法一般有：
6 1，浏览器端验证
7 2，服务器端验证
8 3，ajax验证
9 4，浏览器和服务器双重验证
10
11 html5表单新增类型：
12 email,url,number,range,data(date,month,week,time,datetime,datetime-local),search,color,tel等
13 ========
14 重点：pattern 和 list/datalist
15 表单验证的一些特性：
16 required 必填
17 optional 选填
18 pattern 正则表达式
19 不验证表单提交 novalidate (form属性，写在form中) / formnovalidate (submit属性，即写在提交按钮中)
20 autocomplete 自动回填 联想(off关闭联想) 表单默认autocomplete联想
21 enctype 发送信息到服务器之前，设置对表单数据进行如何编码，enctype="multipart/form-data"
22 是我们在上传文件的时候必须指定的
23
24
25 list/datalist重点：
26 <input type="text" name="" list="tips">
27 <datalist id="tips">
28 <option value="">111</option>
29 <option value="">111</option>
30 <option value="">111</option>
31 </datalist>
32
33 <!DOCTYPE html>
34 <html lang="en">
35 <head>
36 <meta charset="UTF-8">
37 <title>表单验证pattern</title>
38 </head>
39 <body>
40 <form action="#" method="get" accept-charset="utf-8" autocomplete="off">
41 <input type="file" id="file">
42 <label for="">名称：</label><input type="text" placeholder="请输入名称" required>
43 <label>工号：<input type="text" name="num" value="" placeholder="请输五位数字和abcdef中的一个字母" required pattern="^\d{5}[abcdef]{1}$"></label>
44 <!-- 简写如下：input[type=text][list=tips]>datalist[id=tips]>option{可选}*5 -->
45 <input type="text" list="tips">
46 <datalist id="tips">
47 <option value="111"></option>
48 <option value="222"></option>
49 <option value="333"></option>
50 <option value="444"></option>
51 <option value="555"></option>
52 </datalist>
53 </input>
54 <input type="submit" name="" value="验证提交">
55 <input type="submit" name="" value="不验证提交" formnovalidate>
56 </form>
57 </body>
58 </html>
59
60 在html5中，上传文件时在发送数据到服务器之前，必须对表单数据进行编码，下列正确的：
61
62 A：text/plan,提交表单的时候，会对空格转换为 "+" 加号，但不对特殊字符编码。
63
64 B： application/x-www-form-urlencoded是form表单默认的选项。
65
66 C：multipart/form-data是我们在上传文件的时候必须指定的。
67
68 D：而enctype="application/json"是json提交表单的声明。
69
70 =========
71 重点：联想时，点击指定值，输入框背景变色，如何修改该背景色。其他代码与上例子一样，就看工号就行。
72 解决方法二：直接在form中禁用自动联想 autocomplete="off",再自己处理记住之前的信息。
73 <!DOCTYPE html>
74 <html lang="en">
75 <head>
76 <meta charset="UTF-8">
77 <title>表单验证pattern</title>
78 <style type="text/css" media="screen">
79 /* 工号输入正确，多次提交后，与工号输入框再次获得焦点，点击以前输入的内容。输入框的背景颜色变成系统默认的淡蓝色/黄色。
80 修改该默认背景如下方法，为了测试，可以先注释下面所有的CSS样式。查看，一定记住必须多次提交后才行。*/
81 textarea:-webkit-autofill,
82 select:-webkit-autofill,
83 input:-webkit-autofill{
84 -webkit-box-shadow:0 0 0 1000px #fff inset;
85 outline: none;
86 }
87
88 /*获得焦点时，取消默认外边框*/
89 input:focus,select:focus,textarea:focus{outline: none;}
90 </style>
91 </head>
92 <body>
93 <form action="#" method="get" accept-charset="utf-8" >
94 <input type="file" id="file">
95 <label for="">名称：</label><input type="text" placeholder="请输入名称" autocomplete required>
96 <label>工号：<input type="text" name="num" value="" placeholder="请输五位数字和abcdef中的一个字母" required pattern="^\d{5}[abcdef]{1}$"></label>
97 <!-- 简写如下：input[type=text][list=tips]>datalist[id=tips]>option{可选}*5 -->
98 <input type="text" list="tips">
99 <datalist id="tips">
100 <option value="111"></option>
101 <option value="222"></option>
102 <option value="333"></option>
103 <option value="444"></option>
104 <option value="555"></option>
105 </datalist>
106 </input>
107 <select name="">
108 <option value="">1111</option>
109 <option value="">222</option>
110 <option value="">333</option>
111 </select>
112 <input type="submit" name="" value="验证提交">
113 <input type="submit" name="" value="不验证提交" formnovalidate>
114 </form>
115 </body>
116 </html>
117 =========
118 html5 约束验证API：
119 1, willValidate 属性 表示如果元素的约束没有被符合则值为 false。
120 2, validity validityState 对象，表示元素现在所处的验证状态
121 3, validationMessage 用于描述与元素相关约束的失败信息,千万别成：validitionMassage.相差一个a。
122 4, checkValidity()方法 有一个约束条件没有满足，则返回false，所有满足才返回true
123 <!-- checkValidity()方法的使用 修改value来测试
124 所有约束符合，返回true，否则返回false。
125 -->
126 <body>
127 <input type="email" required placeholder="请输入邮箱" id="email" value="1111@qq.com">
128 <input type="text" required placeholder="请输入工号3位数字" pattern="^\d{3}" id="user" value="111">
129 </body>
130 <script type="text/javascript">
131 console.log(email.checkValidity());
132 console.log(user.checkValidity());
133 if (user.checkValidity()) {
134 console.log('用户名输入正确！');
135 }else{
136 console.log("用户名输入有误，请输入3个数字。");
137 }
138 </script>
139
140 5, setCustomValidity(string)方法 切记是dom的属性，不是validityState对象，设置自定义的验证信息来覆盖浏览器默认的提示信息,string自定义的提示信息
141
142 <!-- setCustomValidity("格式不对，请重新输入！"); -->
143 <body>
144 <form action="from_submit" method="get" accept-charset="utf-8">
145 <input type="text" required placeholder="请输入工号3位数字" pattern="^\d{3}" id="user" required>
146 <input type="submit" onclick="checkit()">
147 </form>
148 </body>
149 <script type="text/javascript">
150 function checkit(){
151 var it = document.getElementById("user");
152 var vd = it.validity;
153 // console.log(vd.valueMissing);
154 // console.log(vd.patternMismatch);
155 if (vd.valueMissing) {
156 it.setCustomValidity("内容不能为空！");
157 }else{
158 if (vd.patternMismatch) {
159 it.setCustomValidity("格式不正确，请重新输入!");
160 }else{
161 it.setCustomValidity("");
162 }
163 }
164 }
165 </script>
166
167
168
169 validity validityState 对象，表示元素现在所处的验证状态
170 输出某个对象的validity，如：console.log(document.getElementById("user"));
171
172 在控制台输出validityState对象信息如下：
173
174 ValidityState {valueMissing: true, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}
175 badInput: false 表示：用户提供了一个浏览器不能转换的input
176 customError: false 对应setCusotomValidity()方法，用户自定义了错误信息返回ture，否则返回false.
177 patternMismatch: false 对应pattern属性，规定用于验证表单元素的值的正则表达式。
178 rangeOverflow: false 对应max属性，规定number的最大值，溢出返回true，否则返回false.
179 rangeUnderflow: false 对应min属性，规定number的最小值，溢出返回true，否则返回false.
180 stepMismatch: false 对应step属性，规定表单元素的合法数字间隔。
181 tooLong: false 对应maxlength属性，规定文本区域的最大长度（以字符计）。
182 tooShort: false 对应minlength属性，规定文本区域的最小长度（以字符计）。
183 typeMismatch: false 类型不匹配，如：设置email，但输入的是：dddd，就返回true，否则返回false。
184 valid: false 只要上下文的所有属性返回是false，就会返回true.
185 valueMissing: true 对应required设置表单必填
186
187
188 <!--dom.validity 在控制台输出validityState对象信息验证如下： -->
189 <!DOCTYPE html>
190 <html lang="en">
191 <head>
192 <meta charset="UTF-8" />
193 <title>Document</title>
194 </head>
195 <style type="text/css" media="screen">
196 input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;width: 15px;height: 15px;background-color: red;}
197
198 #num1::-webkit-inner-spin-button,
199 #num1::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0;}
200 </style>
201 <body>
202 <form action="" method="get" id="forms">
203 <input type="text" id="username" required maxlength="5" minlength="2" value="22222222" placeholder="请输入5位用户名">
204 <input type="email" id="email" required value="aaaaa@qq.com" placeholder="请输入邮箱">
205
206 <input type="text" placeholder="请输入工号" id="num" pattern="^\d{5}[abcdef]$" value="12345cddd">
207 <input type="number" placeholder="请输入年龄" max="10" min="3" id="age" value="" required oninput="checkLength(this,2)" >
208 <input type="number" step="0.01" value="0.05" placeholder="请输入数字" id="num1">
209
210 <input type="search" placeholder="输入搜索内容">
211 <input type="submit" value="提交" id="submitBtn">
212 </form>
213 <script>
214 //以下全等，不推荐直接使用id，因为容易和变量混淆，不易维护。id是h5的新属性
215 console.log(username === document.getElementById("username"));
216
217 /*tooLong: false 对应max属性 在控制台查看
218 tooShort: false 对应min属性,不管如何设置max ,min 这两个值是恒等于false的*/
219 console.log(username.validity);
220
221 // typeMismatch: true 对应type="email" 在控制台查看 输入信息类型匹配错误
222 console.log(email.validity);
223
224 // patternMismatch: true 对应pattern属性，上诉默认值value="12345cddd" 不匹配pattern表达式
225 // 没有写required，所以空值可以提交 valueMissing: false 对应required属性，所以null也是一个值。
226 console.log(num.validity);
227
228 /*value > 10 对应的 rangeOverflow: true
229 value < 3 对应的 rangeUnderflow: true
230 value 没有设置，且设置了 required 属性，那么 valueMissing: true，即：缺少值 为 真
231 控制用户只能输入指定的位数，maxlength="10" 这是不行的。只能使用js进行控制。
232 */
233 console.log(age.validity);
234 // 使用js进行控制只能输入的位数
235 function checkLength(obj,length){
236 obj.value=obj.value.substr(0,length);
237 console.log(obj.value);//控制台输出该值
238 }
239
240 /*要求保留两位小数，只能设置 step="0.01"，这样提交后台时才能保留两位小数。
241 如果只设置 value="0.01",那么系统提交后台时，会去掉后面小数，只保留整数。谨记！
242 step 对应 stepMismatch:false 基本是恒等的
243 */
244 console.log(num1.validity);
245 </script>
246 </body>
247 </html>
248
249
250 <!-- 通过输入信息不匹配，输出不匹配信息提示，DOM.validationMessage -->
251 <!DOCTYPE html>
252 <html lang="en">
253 <head>
254 <meta charset="UTF-8" />
255 <title>Document</title>
256 </head>
257 <body>
258 <form action="" method="get" id="forms">
259 <input type="text" id="username" required>
260 <input type="email" placeholder="请输入邮箱" value="aaaa" required>
261 <input type="url" placeholder="请输入网址" value="sdfa" required>
262 <input type="submit" value="提交" id="submitBtn">
263 </form>
264 <script>
265 var form = document.getElementById("forms"),
266 val = null;
267 submitBtn = document.getElementById("submitBtn");
268 submitBtn.addEventListener("click", function() {
269 var invalidFields = form.querySelectorAll(":invalid");
270 for (var i = 0; i < invalidFields.length; i++) {
271 console.log(invalidFields[i].validationMessage);
272 }
273 });
274 </script>
275 </body>
276 </html>
277
278 ============
279
280 HTML5自带验证美化，涉及的伪类及CSS选择器
281 1，:required 和 :optional 必填/选填
282 2，:in-range 和 :out-of-range 在范围之内/不在范围之内 通常与type="number" max 和 min 相对应
283 3，:valid 和 :invalid 符合验证/不符合验证
284 4，:read-only 和 :read-write 只读/读写
285 <div contenteditable="true">可以读写的div，contenteditable是可以被 :read-write 匹配的,当值为false时，则不能写</div>
286
287
288 <!-- 使用伪类 :required 和 :optional 美化表单的基本样式 -->
289 去除webkit内核中表单的默认样式，一般用 -webkit-appearance: none。再进行自定义设置
290
291 <!DOCTYPE html>
292 <html lang="en">
293 <head>
294 <meta charset="UTF-8">
295 <title>常用表单样式</title>
296 </head>
297 <style type="text/css" media="screen">
298 /*设置容器属性*/
299 .container{max-width: 400px;margin: 20px auto;}
300
301 /*表单公共样式*/
302 input,select,textarea{width: 240px;line-height:20px;margin: 10px 0;border: 1px solid #999;}
303 label{color:#999;margin-left: 10px;}
304 input[type="radio"]{width: 20px;}
305 input[type="radio"]+label:after{content: ""!important;}
306
307 /*在search搜索框输入内容时，移除右边的叉号按钮样式
308 在PC端完全没问题，在手机端-webkit-有可能存在 一些问题，所以手机端不推荐使用该种方式，尽量使用原生代码进行操作
309 */
310 #search1::-webkit-search-cancel-button{-webkit-appearance: none;width: 15px;height: 15px;background-color: red;}
311
312 /*必填/选填表单的右边框样式*/
313 input:required,textarea:required{border-right: 3px solid #aa0088;}
314 input:optional,select:optional{border-right: 3px solid #999;}
315
316 /*必填/选填表单后面第一个兄弟label 添加after伪类*/
317 input:required+label::after{content: "(必填)"}
318 input:optional+label::after{content: "(选填)"}
319
320 /*清除表单获取焦点时的默认外边框*/
321 input:focus,select:focus,textarea:focus{outline: none;}
322
323 /*必填/选填表单获取焦点时的样式*/
324 input:required:focus,textarea:required:focus{box-shadow: 0 0 3px 1px #aa0088;}
325 input:optional:focus,select:optional:focus{box-shadow: 0 0 3px 1px #999;}
326
327 /*提交按钮样式*/
328 input[type="submit"]{background: #ccc;padding: 3px 0;}
329 input[type="submit"]:hover{background: #aa0088;color: #fff}
330
331 /*文本域不可改变宽高*/
332 textarea{resize:none;}
333 </style>
334 <body>
335 <div class="container">
336 <form action="#" method="get" accept-charset="utf-8">
337 <input type="name" required><label for="">名称</label>
338
339 <input type="email" required id="email"><label for="">邮箱</label>
340 <input type="tel" ><label for="">电话</label>
341 <input type="url" ><label for="">网址</label>
342 <input type="search" id="search1" placeholder="输入时，修改叉号图标">
343 <input type="search" id="search2" placeholder="输入时，有叉号的输入框">
344 <div>
345 <label for="man">男：</label><input type="radio" id="man" name="sex">
346 <label for="woman">女：</label><input type="radio" id="woman" name="sex">
347 </div>
348 <select name="" >
349 <option value="">非必填选项一</option>
350 <option value="">非必填选项二</option>
351 <option value="">非必填选项三</option>
352 <option value="">非必填选项四</option>
353 </select>
354 <textarea name="" rows="5" cols="30" placeholder="留言(选填31)" required></textarea>
355 <input type="submit" value="表单提交">
356 </form>
357 </div>
358 <script type="text/javascript">
359 //以下两个是全等的，但是极力不推荐直接使用id进行操作，1，容易与变量混淆，不易阅读和维护。2，id 是html5的新属性。
360 console.log(document.getElementById("email") === email);
361 console.log(document.getElementById("email") === 'email');
362
363 // 输出指定对象的validity属性对象，validity是一个validityState对象
364 var ema = document.getElementById("email");
365 console.log(ema.validity);
366 </script>
367 </body>
368 </html>
369 =========
370 注意点：
371 input[type="email"]:focus:invalid~label::after{content: "格式不对！";color: red;}
372 这里是有顺序的：先获取焦点，再验证不符合的input后面的label 后面添加样式
373
374 <!-- 使用伪类 :valid 和 :invalid 符合验证/不符合验证 美化表单的基本样式 -->
375 <!DOCTYPE html>
376 <html lang="en">
377 <head>
378 <meta charset="UTF-8">
379 <title>伪类 :valid 和 :invalid</title>
380 <style type="text/css" media="screen">
381 .container{position: relative;margin: 200px;}
382 input[type="email"]{width: 140px;height: 30px;line-height: 30px;border: 1px solid #999;text-indent: 36px;transition: all .3s;outline: none;border-radius: 5px;}
383 span.title{position: absolute;left: 2px;height: 30px;line-height: 30px;transition: all .3s;}
384 /*鼠标悬浮，获得焦点时的操作*/
385 input[type="email"]:focus,input[type="email"]:hover{text-indent: 5px;}
386 input[type="email"]:focus+span.title,input[type="email"]:hover+span.title{transform: translateX(-120%);}
387
388 /*使用伪类 :valid / :invalid 符合验证 / 不符合验证来写CSS*/
389 input[type="email"]:valid~label::after{content:"格式正确！";color: green;}
390 input[type="email"]:valid{border: 1px solid green;}
391 input[type="email"]:focus:invalid~label::after{content: "格式不对！";color: red;}
392 input[type="email"]:focus:invalid{border: 1px solid red;}
393 </style>
394 </head>
395 <body>
396 <div class="container">
397 <input type="email" required placeholder="请输入邮箱" id="email">
398 <span class="title">邮箱:</span>
399 <label for="email"></label>
400 </div>
401 </body>
402 </html>
403
404 ========
405
406 HTMLL5 自带美化验证 之 事件篇
407 1，oninput事件
408 2，oninvalid事件
409 3，onchange事件
410
411 注意点：
412 1，input表单前面的label 对齐，可以把label设置成行内跨元素，设置width。label内容即可对齐。
413 2，给input设置背景图片，作为必填图标的设置。
414 3，oninput/oninvalid 事件
415 oninput="this.setCustomValidity('')" 表示输入时触发事件，修改默认提示信息为空。
416 oninvalid="this.setCustomValidity('请输入正确手机号码')" 进行表单验证不通过，直接修改提示信息
417 4，小技巧： select 第一个option没有作为选项时，一定要把value设置为空，否则样式设置会出现异常。
418 <select name="know" id="know" required oninvalid="this.setCustomValidity('请在下列选项中选择一项：')">
419 <option value="">==请选择==</option>
420 <option value="2">搜索引擎</option>
421 <option value="3">朋友圈</option>
422 </select>
423
424 用户输入或者值发生变化时，会立刻触发什么事件：B
425 A：onchange事件虽然触发值会发生变化，但不是立刻触发，要鼠标失去焦点时才能触发。
426 B：oninput会在值发生变化时立马触发 。
427 C：oninvalid是在不符合验证的时候触发。
428 D：onfocus是在获得焦点的时候触发 。
429
430
431
432 <!DOCTYPE html>
433 <html lang="en">
434 <head>
435 <meta charset="UTF-8">
436 <title>Document</title>
437 <style>
438 .onelist{margin: 10px}
439 /*只要涉及到对齐问题，都可以使用display属性来调整，这里的label是最典型的例子*/
440 .onelist label{width: 80px;display: inline-block;}
441 .onelist input,.onelist select{height:25px;line-height: 25px;width: 220px;border-radius: 3px;border: 1px solid #e2e2e2;padding: .3em .5em;}
442
443 /* input:required,select:required{background: #fff url(img/star.jpg) no-repeat 90% center;}
444 input:required:valid,select:required:valid{box-shadow: 0 0 0 3px green;background: #fff url(img/right.png) no-repeat 90% center;border-color: green;}
445 input:focus:invalid,select:focus:invalid{box-shadow: 0 0 0 3px red;background: #fff url(img/error.png) no-repeat 90% center;border-color: red; outline: 1px solid red;} */
446 select:required,
447 input:required,
448 textarea:required {
449 background: #fff url(img/star.jpg) no-repeat 90% center;
450 }
451
452 select:required:valid,
453 input:required:valid,
454 textarea:required:valid {
455 background: #fff url(img/right.png) no-repeat 90% center;
456 box-shadow: 0 0 5px #5cd053;
457 border-color: #28921f;
458 }
459
460 select:focus:invalid,
461 input:focus:invalid,
462 textarea:focus:invalid {
463 background: #fff url(img/error.png) no-repeat 90% center;
464 box-shadow: 0 0 5px red;
465 border-color: red;
466 outline: red solid 1px;
467 }
468 </style>
469 </head>
470 <body>
471 <form action="#" class="myform">
472 <div class="onelist">
473 <label for="UserName">手机号：</label>
474 <input type="text" required id="UserName" name="UserName" placeholder="请输入手机号" pattern="^1[0-9]{10}$" required oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确手机号码')">
475 </div>
476 <div class="onelist">
477 <label for="Password">密码：</label>
478 <input type="password" name="Password" id="Password" pattern="^[a-zA-Z0-9]\w{5,19}$" placeholder="6~20位" required oninvalid="this.setCustomValidity('请输入正确密码！')" oninput="this.setCustomValidity('')" onchange="checkpassword()">
479 </div>
480 <div class="onelist">
481 <label for="Repassword">确认密码：</label>
482 <input type="password" name="Repassword" id="Repassword" placeholder="确认密码" required oninput="this.setCustomValidity('')" onchange="checkpassword()">
483 </div>
484 <div class="onelist">
485 <label for="know">了解方式：</label>
486 <select name="know" id="know" required oninvalid="this.setCustomValidity('请在下列选项中选择一项：')">
487 <option value="">==请选择==</option>
488 <option value="2">搜索引擎</option>
489 <option value="3">朋友圈</option>
490 <option value="4">朋友推广</option>
491 <option value="5">广告投放</option>
492 </select>
493 </div>
494 <div class="onelist">
495 <input type="submit" value="提 交">
496 </div>
497 </form>
498 <script type="text/javascript">
499 function checkpassword(){
500 var pwd1 = document.getElementById('Password'),
501 pwd2 = document.getElementById('Repassword');
502 if (pwd1.value != pwd2.value) {
503 pwd1.setCustomValidity('两次密码输入不一致，请重新输入！');
504 }else{
505 pwd1.setCustomValidity('');
506 }
507 }
508 </script>
509 </body>
510 </html>
511
512 =========
513
514 输出：用户输入信息不匹配的信息提示。：validationmessage
515 <!DOCTYPE html>
516 <html lang="en">
517 <head>
518 <meta charset="UTF-8" />
519 <title>Document</title>
520 </head>
521 <body>
522 <form action="" method="get" id="forms">
523 <input type="text" id="username" required>
524 <input type="email" placeholder="请输入邮箱" required>
525 <input type="url" placeholder="请输入网址" required>
526 <input type="submit" value="提交" id="submitBtn">
527 </form>
528 <script>
529 var form = document.getElementById("forms"),
530 val = null;
531 submitBtn = document.getElementById("submitBtn");
532 submitBtn.addEventListener("click", function() {
533 var invalidFields = form.querySelectorAll(":invalid");
534 for (var i = 0; i < invalidFields.length; i++) {
535 console.log(invalidFields[i].validationMessage);
536 }
537 });
538 </script>
539 </body>
540 </html>
541
542 =========
543
544 <!-- H5表单美化，修改默认气泡 -->
545 重点：
546 一，表单提交后，发生事件顺序如下：
547 （1）submit按钮的click事件，若取消默认事件，则终止
548 （2）html5表单验证和提示，若表单验证不通过，则提示第一个不合法输入，并终止
549 （3）form表单的submit事件，若取消默认事件，则终止
550 所以，HTML5自带的验证，发生在表单的onsubmit事件之前，自定义之前必须阻止浏览器默认错误信息提示。
551
552 二，封装自定义错误信息气泡提示，可以无限调用。
553
554 三，调用时必须满足三个条件，
555 1，写好错误信息样式 .error-message 样式。
556 2，获取表单对象 form.
557 3，获取提交按钮对象 submitBtn.
558
559
560 谷歌浏览器29版本之前，后面废弃了，用下面伪元素修改默认气泡样式： ::-webkit-validation-bubble
561 1，使用第三方插件
562 2，自己创建气泡
563 a,阻止默认气泡
564 b,创建新的气泡
565
566 <!DOCTYPE html>
567 <html lang="en">
568 <head>
569 <meta charset="UTF-8">
570 <title>H5表单美化，修改默认气泡</title>
571 <style>
572 .oneline{line-height: 1.5;margin: 10px auto;}
573 .oneline label{width: 100px;text-indent: 15px;font-size: 14px;font-family: "微软雅黑";display: inline-block;}
574 .oneline .sinput{width: 60%;height: 30px;border-radius: 6px;border: 1px solid #e2e2e2;}
575 .oneline input[type="submit"]{margin-left: 20px; width: 100px;height: 30px;border: 0;background-color: #5899d0;color: #fff;font-size: 14px;border-radius: 6px;}
576 .error-message{color: red;font-size: 12px;text-indent: 108px;}
577 </style>
578 </head>
579 <body>
580 <form action="#" id="forms">
581 <div class="oneline">
582 <label for="name">用户名：</label>
583 <input type="text" id="name" class="sinput" name="name" required>
584 </div>
585 <div class="oneline">
586 <label for="email">邮箱：</label>
587 <input type="email" id="email" class="sinput" name="email" required>
588 </div>
589 <div class="oneline">
590 <input type="submit" id="thesubmit" value="提 交">
591 </div>
592 </form>
593 <script type="text/javascript">
594
595 // 自定义封装表单气泡,可以无限调用
596 //封装表单自定义错误信息提示 (阻止表单默认信息提示，添加自定义错误信息提示)
597 function replaceInvalidityUi(form,submitBtn){
598 //阻止表单验证不通过时触发的默认事件
599 form.addEventListener('invalid',function(event){
600 event.preventDefault();
601 },true)
602
603 //阻止提交按钮提交时触发的默认事件
604 form.addEventListener('submit',function(event){
605 event.preventDefault();
606 },true)
607
608 //监听提交按钮的单击事件
609 submitBtn.addEventListener("click", function(event) {
610 var inValidityField = form.querySelectorAll(":invalid"),//所有验证不通过的对象
611 errorMessage = form.querySelectorAll(".error-message"),//所有错误信息，浏览器默认错误信息类名
612 parent;
613
614 //移除所有默认错误信息提示
615 for (var i = 0; i < errorMessage.length; i++) {
616 errorMessage[i].parentNode.removeChild(errorMessage[i]);
617 }
618 //添加自定义错误信息提示，只有不符合验证的才会添加错误信息，通过验证的input后面不会添加错误信息
619 for (var i = 0; i < inValidityField.length; i++) {
620 parent = inValidityField[i].parentNode;
621 parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" + inValidityField[i].validationMessage + "</div>")
622 }
623 //如果存在错误信息，则直接在第一个错误信息的input位置获取焦点。
624 if (inValidityField.length > 0) {
625 inValidityField[0].focus();
626 }
627 })
628 }
629
630 var submitBtn = document.getElementById("thesubmit");
631 var form = document.getElementById("forms");
632 replaceInvalidityUi(form,submitBtn);
633 </script>
634 </body>
635 </html>
636
637 ============
638 关于 element.insertAdjacentHTML(position,text); 给element 相邻的 位置添加内容
639 adjacent 英[əˈdʒeɪsnt] 与…毗连的; 邻近的;
640
641 <!DOCTYPE html>
642 <html lang="en">
643 <head>
644 <meta charset="UTF-8">
645 <title>Document</title>
646 <style>
647 #one{background-color: red;color: #fff;}
648 ol{
649 border: 1px solid #999;
650 }
651 .love{color: blue}
652 </style>
653 </head>
654 <body>
655 <div class="container">
656 <div>内容1</div>
657 <div>内容2</div>
658 <div id="one">内容3</div>
659 <div>内容4</div>
660 <div>内容5</div>
661 <div>内容6</div>
662 </div>
663 <div>
664 <hr>
665 <!-- 给某个dom元素的指定位置添加内容 -->
666 element.insertAdjacentHTML(position, text);
667 'beforebegin': Before the element itself. 在该元素前面添加内容(外部添加内容)<br/>
668 'afterbegin': Just inside the element, before its first child.在该元素内部 第一个子元素前面 添加内容<br/>
669 'beforeend': Just inside the element, after its last child.在该元素内部 最后一个子元素后面 添加内容<br/>
670 'afterend': After the element itself.在该元素后面添加内容(外部添加内容)
671 </div>
672 <script type="text/javascript">
673 var one = document.querySelector('#one');
674 one.insertAdjacentHTML('beforebegin',"<b class='love'>"+"beforebegin"+'</b>');
675 one.insertAdjacentHTML('afterbegin',"<b class='love'>"+"afterbegin"+'</b>');
676 one.insertAdjacentHTML('beforeend',"<b class='love'>"+"beforeend"+'</b>');
677 one.insertAdjacentHTML('afterend',"<b class='love'>"+"afterend"+'</b>');
678 </script>
679 </body>
680 </html>
浙公网安备 33010602011771号