文档章节

HTML5 表单验证

SKYCOBS
 SKYCOBS
发布于 2016/03/16 14:26
字数 610
阅读 78
收藏 3

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

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

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

HTML5表单验证

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

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

HTML5表单验证


二、显示验证
form元素与input元素(包括select和textarea)都具有一个checkValidity方法。调用该方法,可以显示的对表单内所有元素内容或单个元素内容进行有效性验证。使用document.getElementById("hh"),使用jQuery选择报错,这个方法没有定义
checkValidity方法以boolean值的形式返回验证结果。
HTML5表单验证

另外,在HTML5中,form元素与input元素还存在一个validity属性,该属性返回一个ValidityState对象,该对象具有很多属性(此属性也只能是js获取才能得到),但最简单、最重要的属性为valid属性,它表示了表单内所有元素内容是否有效或单个input元素内容是否有效

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

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


四、自定义错误信息
在HTML5中,可以使用JS调用各input元素的setCustomValidity方法来自定义错误信息。写法如下:
HTML5表单验证

相关http://lucifinilhades.iteye.com/blog/1186033


本文转载自:http://nhce111.blog.163.com/blog/static/19763917220141131854111/

SKYCOBS
粉丝 10
博文 122
码字总数 19280
作品 0
呼和浩特
程序员
私信 提问
开始使用HTML5和CSS3验证表单

本文转载于:猿2048网站➯开始使用HTML5和CSS3验证表单 使用HTML5和CSS3验证表单 客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证。HTML5其实早已...

前端老手
09/10
12
0
全新改进的 HTML5 表单创建

经历了12年之久,万维网的核心语言(HTML或超文本标记语言)终于迎来了HTML5主要修订版本。虽然万众期待的版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就有...

小卒过河
2011/07/23
4.2K
16
HTML5编程之旅 第4站 Forms

涉及到Web开发的,肯定要涉及到HTML表单,本节将带你走入HTML5表单的世界。 一、HTML5 Forms概述 熟悉HTML表单的开发人士,可以很容易的适应HTML5 Forms的新增功能。 XFomrs是一个以XML为核心...

倪伟伟
2014/02/27
251
1
10 款简单精美的 jQuery 和 CSS3 表单

表单在网页中扮演着十分重要的作用,从用户登录注册到留言评论,都离不开表单。一个设计精美方便的表单,可以提高用户交互的质量。下面给大家介绍10款设计简单但是外观精美的jQuery和CSS3表单...

android哥哥
2012/08/06
9.1K
10
推荐 10 个优秀的 HTML5 编码工具

HTML5将彻底改变我们建设网站和Web应用程序的方式。这里有10个伟大的工具,用于简化和提高HTML5的编码。 假如你才刚开始利用HTML5来创建网站,可访问Initializr来入门。这个网站将帮您根据样...

小编辑
2011/08/22
3.2K
8

没有更多内容

加载失败,请刷新页面

加载更多

golang-字符串-地址分析

demo package mainimport "fmt"func main() {str := "map.baidu.com"fmt.Println(&str, str)str = str[0:5]fmt.Println(&str, str)str = "abc"fmt.Println(&s......

李琼涛
今天
4
0
Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
今天
8
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
今天
9
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
今天
7
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部