HTML5表单信息验证工作原理

任何Web开发者都能向我们保证,在窗体上提交输入的验证需要花费大量的时间来构建Web表单。当涉及到填写Web表单上的信息时,即使是最熟悉Web的用户也可以并且都会犯错。当用户点击页面上的提交按钮时,可能会导致不完整或不准确的数据被提交上去。

为了避免输入出错,开发者需要在加工信息前先进行验证。验证是在接受输入信息时最好的做法。把数据截止在门外越早越好。

验证在用户提交表单时,通过一个服务器端执行来完成的。在这种类型的验证里,用户提供的数据先被提交给服务器,服务器处理之后如果判定输入数据不正确或不完整,就会抛出一个相应的错误信息。

随着JavaScript使用的越来越多,浏览器已经对通过专门的验证库对客户端验证提供支持了。HTML5背后的智囊团们意识到了Web开发者需 要对表单信息验证提供支持,然后就内置了对验证的支持,并引进了在客户端验证的支持,以将输入错误消灭于萌芽状态。通过HTML5表单里的客户端验证,用 户不需要等所有的输入都完成并提交信息给服务器后,才能分辨出哪些是出错信息。实际上,标记元素能指出那些信息不是必填的,这个逻辑在提交按钮发送数据给 远程服务器之前就已经开始执行了。

让我们来看几个支持客户端验证的属性吧。

‘required’required属性能被指定用于任何输入标记元素来注释需要这些的地方。一个简单的声明如下所示:

当上面的HTML在现代浏览器里被提出来时,你可以看到文本框有一个不同的阴影(这是我们为请求的元素指定的风格)。当用户跳过必填字段(通过点击它,然后并没有输入就到下一步),输入框会变成周围围绕红色边框的效果样式。

通过使用客户端验证必填字段,这样的造型有助于与用户沟通。当表单被提交时(用户点击提交按钮),HTML5验证就开始执行了。但这个发生时,浏览 器开始通过必填输入的列表来提示是否缺少要求的输入信息。有时候并没有必要去验证,在这种情况下,我们可以设置窗体上的“movalidate”属性。

例如,下面的代码就没有让客户端验证规则启动:

如果你只想在某个按钮被按下的时候才跳过验证,你可以在提交输入类型上指定“formnovalidate”属性:

当我们点击第一个按钮时,我们看到验证规则起作用了,但当我们点击第二个按钮时,验证规则就没有了。

Web开发神器WebStorm目前正8折优惠,(慧都还有打折心愿,自己想怎么打折就怎么打折【年终大促?巅峰盛"慧"?】促销火热进行中?iPhone?6?Plus、?iPhone?6、iPad?Air满就送,还不赶快买买买!)

时间: 2024-11-05 19:33:28

HTML5表单信息验证工作原理的相关文章

HTML5表单及其验证

随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架,先说下表单的几个基本知识点: 表单仍是以<form>元素作为容器,我们可在其中设置基本的提交特性: 当用户提交页面时,表单仍然向服务器发送表单控件的值: 之前老版本中的表单控件,如text radio checkbox等等,都可以按

bootstrap中的表单信息验证

前端对表单输入信息的格式进行验证有很多方法,下面两种方式效果比较不错也很简单.其中第一种仅在点击提交按钮后显示,而第二种很灵活. 对于使用Bootstrap开发的前端,感觉第二种风格比较统一. 第一种:利用html5的新特性 在<input>标签中加入新的属性 required:要求不能为空 patten="正则表达式":设置内容的格式 title="提示信息":弹出框的显示内容 这一种比较简单,没有利用Bootstrap的特性.效果如下: 第二种:配合

企业级 SpringBoot 教程 (十九) 验证表单信息

这篇文篇主要简述如何在springboot中验证表单信息.在springmvc工程中,需要检查表单信息,表单信息验证主要通过注解的形式. 构建工程 创建一个springboot工程,由于用到了 web .thymeleaf.validator.el,引入相应的起步依赖和依赖,代码清单如下: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactI

实现跨浏览器html5表单验证

div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: right; clear: right; } .clearfix:after{ content: ""; display:block; clear: both; } .figcaption{ clear: both; color: #999; padding-top: 10px; text

jQuery html5Validate基于HTML5表单验证插件

一.前言 前3篇文章实际都是为本文做铺垫的,如果以下棋表示,前三篇是普通走棋,本篇是将军! 目前市面上有不少表单验证插件,看似强大,实在糟糕! 总结下,有以下一些问题: 过多干预包括:改变了表单元素UI, 为表单元素绑定过多事件等 布局等限制包括:需要特定结构的布局,需要特定的类名或者ID 学习成本包括:N多元作者自定义的属性,或者自定义的特定的数据结构 可用性 当JS出现错误的时候而无法正常运作的时候,验证就是聋子的耳朵——摆设,即使在现代浏览器下也是如此. 面向未来的表单验证 验证驱动验证信

Html5之高级-3 HTML5表单验证(验证属性、验证状态)

一.验证属性 Required 属性 - Required 属性主要防止域为空时提交表单.该属性不需要设置任何值 - 语法: Pattern 属性 - Pattern 属性的作用是实现元素的验证.它支持使用正则表达式定制验证规则 - 语法: Min 和 Max 属性 - min.max和step属性用于为包含数字或日期的input类型规定限定(约束) - 语法: Minlength 和 Maxlength 属性 - Minlength 和 Maxlength 属性的作用是定制元素允许的最小字符数

laravel 验证表单信息

1控制器验证 $this->validate($request,[ 'Student.name'=>'required|min:2|max:20', 'Student.age'=>'required|integer', 'Student.sex'=>'required|integer', ],[ 'required'=>':attribute 为必填项目', 'min'=>':attribute 长度必须符合要求', 占位符 ],[ 'Student.name'=>

不支持html5表单验证新特性的解决方案

下载 Alexander Farkas编写的“Webshims Lib”(http://afarkas.github.com/webshim/demos/)它可用于插入表单补丁(也可以为其他 HTML5特性打补丁),从而使不支持新特性的浏览器可以处理 HTML5 表单. 使用方法: a.下载 Webshims Lib(http://github.com/aFarkas/webshim/downloads)并解压: b.将其中的 js-webshim 文件夹复制到相应的位置: <script sr

AngulairJS表单输入验证与mvc

AngulairJS表单输入验证 1.表单中,常用的验证操作有:$dirty 表单有填写记录.$valid 字段内容合法的.$invalid 字段内容是非法的.$pristine 表单没有填写记录.$error    表单验证不通过的错误验证信息. 2.验证时,需给表单及需要验证的input设置name属性 给form和input设置name后,会将form表单信息,默认绑定到$scope作用域中.故,可以使用formName.inputname.$验证操作得到验证结果 例如:formName.