表单验证

表单验证是指，在用户提交表单之前，确保用户输入的数据时合法的。

　　输入类型：

　　　　<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>