文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML5中有哪些表单验证方法

2024-04-02 19:55

关注

这篇文章主要介绍“HTML5中有哪些表单验证方法”,在日常操作中,相信很多人在HTML5中有哪些表单验证方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML5中有哪些表单验证方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

1、valueMissing

目的:确保表单控件中的值已填写。

用法:在表单控件中将required特性设置为true。

示例:

<input type="text" name="myText" required>

详细说明:如果表单控件设置了required特性,那么在用户填写或者通过代码调用方式填值之前,控件会一直处于无效状态。例如,空的文本输入框无法通过必填检查,除非在其中输入任意文本。输入值为空时,valueMissing会返回true。

2、typeMismatch

目的:保证控件值与预期类型相匹配(如numbe、email、URL等).

用法:指定表单控件的type特性值。

示例:

<input type="email" name="myEmail">

详细说明:特殊的表单控件类型不只是用来定制手机键盘, 如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则,比如email地址中没有@符号,或者number型控件的输入值不是有效的数字,那么浏 览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况,typeMismatch将返回true。

3、patternMismatch

目的:根据表单控件上设置的格式规则验证输入是否为有效格式。

用法:在表单控件上设置pattern特性,井赋予适当的匹配规则。

示例:

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">

详细说明:pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后,只要 输入控件的值不符合模式规则,patternMismatch就会返回true值。从引导用户和技术参考两方面考虑,你应该在包含pattern特性的表 单控件中设置title特性以说明规则的作用。

4、tooLong

目的:避免输入值包含过多字符。

用法:在表单控件上设置maxLength特性。

示例:

<input type="text" name="limitedText" maxLength="140">

详细说明:如果输入值的长度超过maxLength, tooLong特性会返回true。虽然表单控件通常会在用户输入时限制最大长度,但在有些情况下,如通过程序设置,还是会超出最大值。

5、rangeUnderflow

目的:限制数值型控件的最小值。

用法:为表单控件设置min特性,并赋予允许的最小值。

示例:

<input type="range" name="ageCheck" min="18">

详细说明:在需要做数值范围检查的表单控件中,数值很可能会暂时低于设置的下限。此时,ValidityState的rangeUnderflow特性将返回true。

6、rangeOverflow

目的:限制数值型控件的最大值。

用法:为表单控件设置max特性,并赋予允许的最大值。

示例:

<input type="range" name="kidAgeCheck" max="12">

详细说明:与rangeUnderflow类似,如果一个表单控件的值比max更大,特性将返回true。

7、stepMismatch

目的:确保输入值符合min、max及step即设置。

用法:为表单控件设置step特性,指定数值的增量。

示例:

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

详细说明:此约束条件用来保证数值符合min、max和step的要求。换句话说,当前值必须是最小值与step特性值的倍数之和。例如,范围从0到100,step特性值为5,此时就不允许出现17,否则stepMismatch返回true值。

8、customError

目的:处理应用代码明确设置及计算产生的错误。

用法:调用setCustomValidity(message)将表单控件置于customError状态。

示例:

passwordConfirmationField.setCustomValidity("Password values do not match.");

详细说明:浏览器内置的验证机制不适用时,需要显示自定义验证错误信息。当输入值不符合语义规则时,应用程序代码应设置这些自定义验证消息。

到此,关于“HTML5中有哪些表单验证方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯