web前端开发与应用——表单的验证

表单验证的概念

表单验证是指在用户提交表单之前，验证用户输入的数据是否合法。 HTML5提供了一套简单的验证方式，在表单提交时，会根据情况弹出一些简单的提示，如“请填写此字段”“请匹配要求的模式”等，不同的浏览器所弹出的提示内容会有所不同。

表单验证的类型

HTML5中主要包括以下几个方面的验证：输入类型的验证、日期和时间范围的验证、必填字段的验证、步长的验证、字符长度的验证、数值范围的验证、正则表达式的验证等。

required非空验证

在某个表单控件中添加required属性，则表明该表单的值不能为空。required 属性适用于以下类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 示例如下： <input type="text" placeholder="请输入用户名" required>

非空校验示例

在表单text类型的input标签中添加required属性，可以设置文本框的值不能为空；在该标签中通过title属性可以设置相关的提示信息。

1. <form>
2. 用户名：<input type="text" required="required" title="用户名一定要写哦！" maxlength="16">
3. <input type="submit" value="提交"
4. </form>

maxlength字符长度验证

在某个表单控件中添加maxlength属性，可限定输入的字符数。maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。 示例如下： <input type="password" maxLength="10"/>

输入类型的验证

HTML5新增了一些具有校验功能的input控件的类型，分别是：

• email:要求输入内容必须符合电子邮件地址的格式。
• url:要求输入内容必须符合URL的格式
• number:要求输入内容必须为数字，并可通过min、max、step等属性来设置最小值、最大值和间隔

示例如下： <input type="email"/> <input type="url"/> <input type="number" min="0" max="100" step="10" value="20"/>

邮箱校验示例

在表单email类型的input标签中添加required属性，可以设置电子邮箱输入框的值不能为空；在该标签中通过placeholder属性可以设置相关的提示信息。

1. <form>
2. 邮箱：<input type="email" required="required" placeholder="示例：12345@qq.com"/>
3. <input type="submit" value="提交"
4. </form>

pattern验证

HTML5新增的pattern属性具有对表单中输入字段模式进行验证的功能。适合于text、serch、url、telephone、email、password等<input>类型。 示例如下： <input type="text" pattern="^[0-9]{12}$"/> 可以看到，pattern属性取值为符合某种规则的正则表达式，它以“^”开始，以“$”结束，中间是“规则字符串”，规则字符串通常由普通字符和元字符组成。

• 普通字符：由大小写的字母和数字组成
• 元字符：是具有特殊含义的字符
  常见的元字符及其功能说明如下图所示：