表单验证的概念
表单验证是指在用户提交表单之前,验证用户输入的数据是否合法。 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属性可以设置相关的提示信息。
<form>
用户名:<input type="text" required="required" title="用户名一定要写哦!" maxlength="16">
<input type="submit" value="提交"
</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属性可以设置相关的提示信息。
<form>
邮箱:<input type="email" required="required" placeholder="示例:12345@qq.com"/>
<input type="submit" value="提交"
</form>
pattern验证
HTML5新增的pattern属性具有对表单中输入字段模式进行验证的功能。适合于text、serch、url、telephone、email、password等<input>
类型。 示例如下: <input type="text" pattern="^[0-9]{12}$"/>
可以看到,pattern属性取值为符合某种规则的正则表达式,它以“^”开始,以“$”结束,中间是“规则字符串”,规则字符串通常由普通字符和元字符组成。
- 普通字符:由大小写的字母和数字组成
- 元字符:是具有特殊含义的字符
常见的元字符及其功能说明如下图所示: