HTML5中表单提交的4种验证方法

桃扇骨 2024-04-01 17:34 77阅读 0赞

![8b83d0f40e19b37f608e235e682a9d9a.jpeg][]

一、自动验证

我们可以通过元素的属性设置，进行[表单][Link 1]提交的验证。

required属性

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

pattern属性

开发者可以在此属性中设置[正则表达式][Link 2]，提交表单时，会根据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方法来自定义错误信息。

来源：[https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[8b83d0f40e19b37f608e235e682a9d9a.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9985041297964052b17080ccb4d42710.jpeg
[Link 1]: https://so.csdn.net/so/search?q=%E8%A1%A8%E5%8D%95&spm=1001.2101.3001.7020
[Link 2]: https://so.csdn.net/so/search?q=%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F&spm=1001.2101.3001.7020
[HTML5]: https://so.csdn.net/so/search?q=HTML5&spm=1001.2101.3001.7020
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com

发表评论取消回复

表情：

评论列表（有 0 条评论，77人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5中表单提交的4种验证方法

![8b83d0f40e19b37f608e235e682a9d9a.jpeg][] 一、自动验证我们可以通过元素的属性设置，进行[表单][Link 1]提交的验证。

桃扇骨/ 2024年04月01日 17:34/ 0 赞/ 78 阅读

相关防止表单重复提交的4种方法

幂等性效果：系统对某接口的多次请求，都应该返回同样的结果！（网络访问失败的场景除外）目的：避免因为各种原因，重复请求导致的业务重复处理重复请求场景案例：

Love The Way You Lie/ 2023年09月30日 21:48/ 0 赞/ 26 阅读

相关防止表单重复提交的4种方法

幂等性效果：系统对某接口的多次请求，都应该返回同样的结果！（网络访问失败的场景除外）目的：避免因为各种原因，重复请求导致的业务重复处理重复请求场景案例：

╰+哭是因爲堅強的太久メ/ 2023年09月27日 17:06/ 0 赞/ 45 阅读

相关 element-ui中表单验证的三种方式(超详细)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小咪咪/ 2022年12月26日 10:11/ 0 赞/ 514 阅读

相关 html中表单提交注意事项

1.表单标签的使用——重点/难点表单(form)：用于收集用户的数据，提交给服务器上某个页面，该页面可以对表单中提交的数据进行保存或查询(由php/jsp/aspx来担

叁歲伎倆/ 2022年06月12日 13:22/ 0 赞/ 259 阅读

相关 html5中表单的几个新样式

在表单验证的时候，对于必填内容和选填内容，我们可以单独设置新的样式来控制，代码如下： <!DOCTYPE html> <html lang="en"

傷城~/ 2022年06月12日 02:16/ 0 赞/ 197 阅读

相关 HTML5中表单验证的8种方法

在深人探讨表单验证之前，让我们先思考一下表单验证的真实含义。就其核心而言，表单验证是一套系统，它为终端用户检测无效的控件数据并标记这些错误。换言之，表单验证就是在表单提交服务器

柔光的暖阳◎/ 2022年06月10日 05:21/ 0 赞/ 284 阅读

相关 html5表单验证

[jQuery Validate学习网址][jQuery Validate] 挺好用的一款插件,可以自定义验证方法 $("form_details").valid

淩亂°似流年/ 2022年05月31日 05:28/ 0 赞/ 288 阅读

相关 html5表单验证

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表

Love The Way You Lie/ 2022年04月02日 07:17/ 0 赞/ 299 阅读

相关 html form表单提交验证

function check(){ var name = document.getElementById("name").value; if

红太狼/ 2022年03月28日 15:53/ 0 赞/ 436 阅读