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="[email protected]"> 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="[email protected]" 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>
封装表单自定义错误信息。（阻止默认错误信息提示，添加自定义错误信息提示）
猜你喜欢
转载自www.cnblogs.com/Knowledge-is-infinite/p/11747690.html
今日推荐
周排行