打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
简单介绍HTML5中表单提交的几种验证方法

一、自动验证
我们可以通过元素的属性设置,进行表单提交的验证。

required属性
此属性可以应用在大多数输入元素上(除了隐藏元素、图片元素按钮上)。提交时,如果元素为空,则在浏览器中显示信息提示文字,提示用户必须输入内容。具体写法如下:


pattern属性
开发者可以在此属性中设置正则表达式,提交表单时,会根据pattern中的正则表达式进行检验,如果不符合给定的格式时,浏览器中会显示信息提示文字,提示输入的内容必须符合给定格式。




min与max属性
min与max属性是数值类型或日期类型的input元素的专用属性,他们限制输入的数值与日期的范围。

step属性
控制input元素中值增加或减少时的步幅。当设置step值为5的时候,必须让用户输入5的倍数才能正常提交,否则会提示文字信息。如下图:





二、显示验证
form元素与input元素(包括select和textarea)都具有一个checkValidity方法。调用该方法,可以显示的对表单内所有元素内容或单个元素内容进行有效性验证。
checkValidity方法以boolean值的形式返回验证结果。



三、取消验证
有两种方法可以取消表单验证。
第一种方法是利用form元素的novalidate属性,它可以关闭整个表单验证。

第二种方法是利用input元素或submit元素的formnovalidate属性,此属性可以让表单验证对单个元素失效。


四、自定义错误信息
在HTML5中,可以使用JS调用各input元素的setCustomValidity方法来自定义错误信息。写法如下:
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
HTML5中修改表单验证默认提示语句
任务7 使用Javascript实现验证
建立JavaScript正则表达式库简化表单验证
JavaScript HTML DOM Input URL 对象
JavaScript HTML DOM Input Time 对象
关于input,type为hidden的问题
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服