发布于2022年10月15日2年前 1、基本表单验证特性介绍 ① html5表单新增了那些类型？ email、url、number、range、date、search、color、tel等 ② 文本框中，输入一次，下一次再输入会自动提示是哪个特性？ autocomplete ③ 初始化页面之后，如何让input自动获取焦点？ autofocus ④ html5如何设置表单元素必填？ required ⑤ html5表单验证如何使用正则？ pattern ⑥ html5表单中设置了必填，提交表单的时候如何做到不验证？ novalidate或formnovalidate ⑦ 文本框灰色提示？ placeholder ⑧ 如何实现提示选择？ list和datalist 2、代码演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- <form action="" method="post" novalidate> --> <!-- <form action="" method="post" autocomplete="on"> --> <form action="" method="post" > <input type="file"><br><br> <label for="">用户名</label> <!-- 1、required：表示该项必须填写，不然提交不了 2、autofocus：自动获取焦点 3、novalidate：在form上加，表示提交表单不验证 4、formnovalidate：在submit上加，表示提交表单不验证 5、正则^\d{5}[imooc]$：^\d以数字开头；{5}：五个数字； [imooc]$以这五个字母的一个为结尾(总共6位；例如：12345c) 6、autocomplete：为on，输入一次，下一次再输入会自动提示；off则不是 --> <input type="text" name="user" placeholder="请输入用户名" required="required" autofocus><br><br> <label for="">工号</label> <input type="text" name="gonghao" placeholder="请输入工号" pattern="^\d{5}[imooc]$"><br><br> <input type="text" list="tips"> <datalist id="tips"> <option value="abc1"></option> <option value="abc2"></option> <option value="abc3"></option> </datalist> <br><br> <input type="submit" value="按钮"> <input type="submit" value="formnovalidate" formnovalidate> </form> </body> </html> 效果图： 3、label中for的补充 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="post" > <!-- 1、for 属性规定 label 与哪个表单元素绑定。 作用是 在点击label 时 会自动将焦点移动到绑定的元素上 --> <label for="man">男</label> <input type="radio" name="sex" id="man"> <label for="woman">女</label> <input type="radio" name="sex" id="woman"> </form> </body> </html> 效果图： 4、html5约束验证API ① 约束的API有如下几个： willValidate属性 validity属性 validationMessage属性 checkValidity()方法 setCustomValidity()方法 ② validity属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*将文本框右侧的×去掉*/ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 15px; width: 15px; background-color: red; } /* 去掉上下箭头 */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } </style> </head> <body> <form action="" method="post"> <input type="text" id="username" value="123456" pattern="^\d{5}" required maxlength="6" minlength="2"><br><br> <input type="search" name="search" id="search"> <input type="submit"><br><br> <input type="number" id="numbers" max="5" min="3" value="8"><br> <input type="number" id="numbers" value="0.02" step="3" oninput="checkLength(this, 5)"> </form> <script> var user = document.getElementById('username'); console.log(user.validity);// 对应上面的图看，每一项相互对应的 // 控制输入位数 function checkLength (obj, length) { obj.value = obj.value.substr(0, length); } </script> </body> </html> ③ checkValidity()方法：如果元素没有满足它的任意约束，返回false，其他情况返回true。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="post"> <!-- text文本框里面的属性：只要有一个不符合， 那么checkValidity()返回false，反之true --> <input type="text" value="adfsa" id="username" pattern="^\d{5}"> <input type="email" id="emails" value="[email protected]"> </form> <script> var Emil = document.getElementById('emails'); var user = document.getElementById('username'); if (Emil.checkValidity()){ alert('是一个邮箱'); } else { alert('不是一个邮箱'); } if (user.checkValidity()){ alert('符合'); } else { alert('不符合'); } </script> </body> </html> ④ setCustomValidity()方法：设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。 5、html自带验证美化（这块就是加css样式了，之后就没看） ① 了解一些伪类及css选择器 ：required和：optional： :required：设置输入框必填样式 :optional：设置输入框非必填样式 ：in-range和：out-of-range :in-range：选择值在指定范围内的input元素 :out-of-range：选择值在指定范围外的input元素 ：valid和：invalid :valid：有效，即当填写的内容符合要求的时候触发。 :invalid：无效，即当填写的内容不符合要求的时候触发。 ：read-only和：read-write :read-only：用于匹配用户可编辑的元素，即可读和可写的元素 :read-write：匹配任何与:read-write选择器不匹配的元素
创建帐户或登录后发表意见