表单验证代码HTML,html表单元素自动验证

　　在HTML5中，加入了大量的表单元素和属性，同时加入了大量的函数来验证表单和表单中新元素提交时的内容有效性。接下来，我们来谈谈自动验证。

　　在Html5中，通过在元素上使用属性，可以实现表单提交时自动验证的功能。执行代码后，会在表单提交时自动验证输入内容是否为数字。如果验证失败，将显示一条错误消息。

　　！doctype HTML HTML lang= en headmethacharaset= UTF-8 标题表单验证示例/title/headbody表单action= # Method= post input type= text name= text required pattern= \ w . * $ input type= submit value= submit /Form/body/HTML接下来我们来看看html5中添加的属性的规范，用来限制元素中的输入内容。

　　1 .必需的属性

　　html5中新的required属性可以应用于大多数输入元素(隐藏元素、图片元素按钮除外)。提交时，如果元素中的内容为空。不允许提交，同时在浏览器中显示信息提示文本，提示用户必须在该元素中输入内容。效果如图。

　　2 .模式属性

　　之前提到的新增加的输入元素，比如邮箱、号码、网址等。要求输入的内容符合一定的格式。使用input元素的pattern属性，并将属性值设置为某种格式的正则表达式。提交时，它会检查其内容是否符合给定的格式。当输入内容不符合给定格式时，不允许提交。同时，在浏览器中显示信息提示文本。提交的输入内容必须符合给定的格式。代码如下，要求输入内容为一个数字和三个大写字母：

　　！doctype HTML HTML lang= en headmethacharaset= UTF-8 标题表单验证示例/title/headbody表单action= # method= post 请输入指定内容：Input pattern=[0-9][A-Z]{ 3 } Name= part placeholder= Input:一个有三个大写字母的数字 Input type= submit value= submit /Form/body/HTML执行效果如下：

　　3 .最小属性和最大属性

　　min max和min max这两个属性是日期类型或数值类型的输入元素的特殊属性。它们限制在input元素中输入的数值和日期的范围。

　　！doctype HTML HTML lang= en headmethacharaset= UTF-8 标题表单验证示例/title/headbody表单action=# Method=post 请输入一个数值：input type= number name= point min= 0 max= 100 /input type= submit value= submit /Form/body/HTML执行效果如下：

　　4 .步骤属性

　　step属性控制input元素中的值增加或减少时的步长。例如，当您希望用户输入的值介于0和100之间，但它必须是5的倍数时，您可以使用以下代码将step指定为5:

　　！doctype HTML HTML lang= en headmethacharaset= UTF-8 标题表单验证示例/Title/headbydyformaction= # method= get input type= number name= point step= 5 /input type= submit /Form/body/HTML效果如下

　　希望你能对这些形态的新属性有更深入的了解！如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。