封装表单自定义错误信息。(阻止默认错误信息提示,添加自定义错误信息提示)

Posted knowledge-is-infinite

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了封装表单自定义错误信息。(阻止默认错误信息提示,添加自定义错误信息提示)相关的知识,希望对你有一定的参考价值。

  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="提&nbsp;&nbsp;&nbsp;交">
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>

 

以上是关于封装表单自定义错误信息。(阻止默认错误信息提示,添加自定义错误信息提示)的主要内容,如果未能解决你的问题,请参考以下文章

web.xml配置错误页面,及输出错误信息

018输出错误信息与调试信息

centos mysql错误信息处理

jQuery插件Validate验证提交表单submitHandler更改错误信息显示的位置requiredValidator内置验证方式表validate ()的可选项汇总

PL/SQL Append_Values 提示给出错误信息

SQL注入