表单验证是指,在用户提交表单之前,确保用户输入的数据时合法的。
输入类型:
<div>邮箱:<input type="mail"></div>
1、type类型指定mail后,输入的格式必须为邮箱的格式
2、如qq@.com 不是这种格式会提示你重新输入
必填字段:
<div>姓名:<input type="text" required></div>
1、其中required属性时boolean属性
2、表单提交时输入域不能为空
3、是所有input标签的共有的属性(不包含 type值为:submit reset button)
字符长度:
<div>密码:<input type="password" minlength="6" maxlength="10"></div>
1、当用户输入的文本小于6个字符的时候,页面会提示小于6位
2、当用户超过10个字符的时候,会禁止输入
数值范围:
<div>订购数量:<input type="number" min="5" max="10"></div>
1、输入值的最小值是5,最大值的是10
日期和时间范围:
<div > 送货日期:<input type="date" min="2010-10-11" max="2010-11-10"></div>
<div><input type="time" min="8:00" max="15:00"></div>
1、日期只能是2010-10-11 到2010-11-10 之间可以选择。
2、时间也是只能选择8点至15点之间的时间
步长:
<div>订购数量:<input type="number" min="10" max="100" step="10" ></div>
1、每次增加10个数量。
2、如果手动输入为22 点击提交的时候会提示
正则表达式:
[0-4]{3}
[0-4]:表示0到4之间的任意一个数字
{3} 必须出现3次
例如:103 、341 、222
<div>编号:<input type="text" pattern="[0-4{3}]"></div>
1、用户输入的编号必须是在0-4的数 必须出现过3次
2、也就是说此文本中必须等于3个数
禁用表单验证:
如果你更像使用基于javascript的更强大和灵活的表单验证,那么首先需要禁用HTML5表单验证。
1、novalidate:不使用表单验证
<form action="test.html" method="post" novalidate>
<div>送货日期:<input type="date" min="2018-10-16" max="2018-11-01"></div>
<div>送货时间:<input type="number" min="10" max="100" step="10"></div>
<div>编号:<input type="text" pattern="[0-4]{3}"></div>
<input type="submit">
</form>
2、formnovalidate:在提交按钮中使用formnovalidate
<form action="test.html" method="post" >
<div>送货日期:<input type="date" min="2018-10-16" max="2018-11-01"></div>
<div>送货时间:<input type="number" min="10" max="100" step="10"></div>
<div>编号:<input type="text" pattern="[0-4]{3}"></div>
<input type="submit" formnovalidate>