-
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="123123@qq.com"> </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选择器不匹配的元素