首页 理论教育 HTML5表单验证:必填项、格式规则、数值范围和增量控制

HTML5表单验证:必填项、格式规则、数值范围和增量控制

时间:2023-06-03 理论教育 版权反馈
【摘要】:在HTML5中,下列属性具有在表单提交时执行自动验证的功能。图5.25必填写required域,若未填入内容则提交时报错2.pattern属性pattern属性的主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。图5.26pattern属性的表单验证3.min属性与max属性min与max这两个属性是数值类型或日期类型的input元素的专用属性,它们限制了在input元素中输入的数值与日期的范围。图5.27min、max属性的表单验证4.step属性step属性控制input元素中的值增加或减少时的增量。

HTML5表单验证:必填项、格式规则、数值范围和增量控制

在HTML5中,下列属性具有在表单提交时执行自动验证的功能。

1.required属性

required属性的主要目的是确保表单控件中的值已填写。在提交时,如果元素中的内容为空白,则不允许提交,同时在浏览器中显示提交信息出错的提示文字,提示用户在这个元素中必须输入内容。

使用实例如下:

<formmethod="get">

Name:<inputtype="text"name="usr_name"required="required"/>

<inputtype="submit"value="提交"/>

</form>

其运行结果如图5.25所示。

图5.25 必填写required域,若未填入内容则提交时报错

2.pattern属性

pattern属性的主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。对input元素使用pattern属性,并且将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字,提示输入的内容必须符合给定格式。(www.xing528.com)

例如下面的代码要求输入的内容必须为一个数字与三个大写字母。

<inputpattern="[0-9][A-Z]{3}"name="mr"placeholder="输入内容:一个数字与三个大写字母。"/>

其运行结果如图5.26所示。

图5.26 pattern属性的表单验证

3.min属性与max属性

min与max这两个属性是数值类型或日期类型的input元素的专用属性,它们限制了在input元素中输入的数值与日期的范围。验证功能如图5.27所示。

图5.27 min、max属性的表单验证

4.step属性

step属性控制input元素中的值增加或减少时的增量。例如当想让用户输入的值在0与100之间,但必须是5的倍数时,可以指定step为5,验证功能如图5.28所示。

图5.28 step属性的表单验证

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈