html5表单密码验证及提示,HTML5表单及其验证(示例代码)

1.输入型控件

Input type

用途

说明

email

电子邮件地址文本框

url

网页URL文本框

number

数值的输入域

属性 值 描述

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value number 规定默认值

range

特定值的范围的数值,以滑动条显示

属性 值 描述

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value number 规定默认值

Date pickers

日期,时间选择器

仅Opera9+支持,包含date, month, week, time, datetime, datetime-local

search

用于搜索引擎,比如在站点顶部显示的搜索框

与普通文本框用法一样,只不过这样更语文化

color

颜色选择器

仅Opera支持

将原本type为text的input控件声明为以上特殊类型,是为了给用户呈现不同的输入界面(移动平台上支持这些不同的输入界面,这里就不细说),而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素,请用支持这些表单元素的浏览器查看,IE对其支持最差。

E-mail:

date:

range: number:  color:

2. 表单新特性和函数

2.1 placeholder

当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,这在目前网站中很常见,一些JS框架都会提供类似功能,简单的说下在旧版本中常用的解决方案,为输入控件创建一个label,然后通过CSS控制些label的位置使之覆盖在输入控件上面,当label获得焦点时,浏览器会把焦点指向输入控件。不过有了placeholder,新的浏览器就内置了这一功能,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自动消失。

如:

Runner:

2.2 autocomplete

其实在IE6中,autocomplete就已经实现,不过现在这一特性终于标准化了,浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用,autocomplete应该用一保护用户敏感数据,避免本地浏览器对它们进行不安全的存储。

类型

作用

on

该字段无需保护,值可以被保存和恢复

off

该字段需要保护,值不可以保存

unspecified

包含

的默认设置,如果没有被包含在表单中或没有指定值,则行为表现为on

如:

当用户提交过一次表单后,再次访问,name的输入框会提示你曾输入的值,而email则不会提示。

2.3 autofocus

页面载入时,我们通过autofocus指定某个表单元素获得焦点,但每个页面只允许出现一个autofocus,如果设置多个则相当于未指定些行为。目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下,使用使用autofocus会惹恼用户。

2.5 list特性和datalist

通过使用list,开发人员能够为某个输入型控件构造一个选值列表,其使用方法:

Webpage:

请在Opera9+或Firefox10+浏览器中查看。

2.6 required

required 属性规定必须在提交之前填写输入域(不能为空)。它是表单验证最简单的一种方式方法,使用方法:

2.7 pattern

pattern 属性规定用于验证 input 域的模式(pattern),模式(pattern) 是正则表达式。那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。使用方法:

2.8 novalidate

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

如:

3. 表单验证

表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化,让web应用更快的抛出错误,但它仍不能取代服务器端的验证,重要数据还要要依赖于服务器端的验证,因为前端验证是可以绕过的。

目前任何表单元素都有八种可能的验证约束条件:

名称

用途

用法

valueMissing

确保控件中的值已填写

将required属性设为true,

typeMismatch

确保控件值与预期类型相匹配

patternMismatch

根据pattern的正则表达式判断输入是否为合法格式

toolong

避免输入过多字符

设置maxLength,

rangeUnderflow

限制数值控件的最小值

设置min,

rangeOverflow

限制数值控件的最大值

设置max,

stepMismatch

确保输入值符合min,max,step的设置

设置max min step,

customError

处理应用代码明确设置能计算产生错误

例如验证两次输入的密码是否一致,等会DEMO细说

下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看:

源代码:

可是各个浏览器验证行为不一致,我们可能需要统一其验证行为,借助javascript我们可以统一浏览器的验证行为。

还是以上上述HTML为基础,我们为其加上相关javascript:

最后说下输入两次密码匹配的验证,写的很简单:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/431686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3.6.4python下载安装教程_python 3.6.4安装教程

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里技术人对外发布原创技术内容的最大平台&…

CTabCtrl控件标签的相关设置

原文链接: http://blog.csdn.net/happyhell/article/details/6012177 1、 获得CTabCtrl标签高度:CRect rc; CTabCtrl *pTabCtrl GetTabControl(); pTabCtrl->GetItemRect(&rc); int nHeight rc.Height(); 2、修改CTabCtrl标签上的文字: // In t…

python人工智能原理及其应用_人工智能原理与实践:基于Python语言和TensorFlow

基 础 篇 第1章 绪论 1 1.1 人工智能简介 1 1.1.1 人工智能的概念 1 1.1.2 现代人工智能的兴起 5 1.1.3 人工智能的学术流派 5 1.2 人工智能的发展历史 8 1&#xff0…

html a 点击防止刷新,a标签点击跳转页面不刷新的问题

作为一位前端新手,刚接触移动端开发不久,遇到的问题真的是一个接着一个...前面写好了几个页面,今天试着将各个页面的链接打通,然后问题就来了...(╯︵╰)这里看一下原来想要实现的两个页面跳转的效果--点击图一标注的栏目可以跳转到一个新的页面图二...按照之前写a标签的跳转链…

不显示表头_技术干货 | 基于数模混合型SoC实现的两线制高精度无源表头方案

摘要:针对传统的两线制表头在高低温环境下测量精度差、温漂大的特点,现提出一种可满足高低温环境使用需求的两线制高精度数显表头设计方案,此方案在高低温环境下测量精度高、工作稳定、抗干扰能力强。引言随着仪表技术和低功耗技术的发展&…

python gui开发_python 开发GUI应用之Dabo

这几天在研究用python开发GUI应用程序,首先选择了wxpython,英文书籍wxpython in action是不错的,网上也有中文版。 在win7下安装python2.7,wxpython2.8.12.1,来个HelloWorld,照着教程一点不成问题。 我为了能够快速开发…

maven2-snapshot快照库和release发布库的应用

在项目中应用snapshot和release库&#xff0c;应用snapshot和release库达到不同环境下发布不同的版本的目的&#xff0c;首先看一个pom文件的定义&#xff1a; <project><modelVersion>4.0.0</modelVersion><groupId>cc.mzone</groupId><arti…

计算机网络安装系统怎么办,电脑没有网络如何重装系统

大家应该在线重装系统的时候安装下载到一半会提示您没有网络了&#xff0c;需要用户怎么解决呢&#xff1f;无法联网可以重装系统吗&#xff1f;下面让小编带您了解一下无网环境下重装系统的教程操作哦&#xff01;1&#xff0c;在其他可联网的电脑上&#xff0c;使用小白一键重…

python的return语句求两数之和_程序题(python解)

PyCharm整理代码&#xff1a;CtrlAltl list行数&#xff1a;len(list) list列数&#xff1a;len(list[1])笔试常使用到的功能&#xff1a; 1、单独取出一长串字符中每个单独的字符&#xff1a;输入‘abcd’&#xff0c;输出‘a’bcddef zifu(value):return list(map(str,str(va…

VSTO 得到Office文档的选中内容(Word、Excel、PPT、Outlook)

VSTO 得到Office文档的选中内容&#xff08;Word、Excel、PPT、Outlook&#xff09; 原文:VSTO 得到Office文档的选中内容&#xff08;Word、Excel、PPT、Outlook&#xff09; 目的&#xff1a;得到在Word、Excel、PPT、Outlook中选中的一段内容。 Word: private string GetSel…

用计算机桁架各杆内力,运用AUTO CAD求解桁架内力?

摘要&#xff1a; 一个平面汇交力系的平衡条件是其力多边形必须闭合,依其条件,利用图解法和计算机中的AUTO CAD绘图工具,迅速准确地求解一个结点上的两个未知力,并以其类推求解桁架各杆内力。特别在复杂的桁架内力计算中更显示其法优越性。关键词&#xff1a; CAD 桁架 内力一般…

python开发视频播放器_Python应用03 使用PyQT制作视频播放器实例

最近研究了Python的两个GUI包&#xff0c;Tkinter和PyQT。这两个GUI包的底层分别是Tcl/Tk和QT。相比之下&#xff0c;我觉得PyQT使用起来更加方便&#xff0c;功能也相对丰富。这一篇用PyQT实现一个视频播放器&#xff0c;并借此来说明PyQT的基本用法。 视频播放器 先把已经完成…

js 正则中冒号代表什么_javascript中正则表达式语法详解

好久都没有写博客了&#xff0c;主要是太懒了&#xff0c;尤其是在阳春三月&#xff0c;风和日丽的日子&#xff0c;太阳暖暖的照在身上&#xff0c;真想美美的睡上一觉。就导致了这篇博客拖到现在才开始动笔&#xff0c;javascript的正则这一块也不是什么新的东西&#xff0c;…

一个关于数学归纳法的悖论问题-续

上篇文章讲到一个悖论,这里解开悖论的什么面纱 上篇文章地址http://www.cnblogs.com/zhouyf/p/4583351.html 「游客没有输入任何新的信息」这个断言是错的。N1的情形不必说了&#xff0c;显然输入了新信息。对于N>1的情形&#xff0c;要注意&#xff0c;游客必须是当着所有人…

封装出现 用户.计算机,ES4封装WIN7出现[Administrator.计算机名]目录的可能解决方案...

受https://www.itiankong.net/thread-36634-1-1.html这个贴子中的思路启发&#xff0c;算是彻底解决了[Administrator.计算机名]目录的问题&#xff0c;打算把整理的方法贴出来&#xff0c;遇到问题的朋友也帮忙试一下是否有效。先说原理&#xff1a;这个问题的出现基本上和ES无…

自动化测试工具selenium python_Selenium自动化测试工具使用方法汇总

1、设置无头浏览器模式 from selenium import webdriver from selenium.webdriver.chrome.options import Options chrome_options Options() chrome_options.add_argument(- -headless) chrome_options.add_argument(- -disable-gpu) class XX(object): self.driver webdriv…

数据库查找姓李的人_最通俗易懂的理解什么是数据库

1.什么是数据库呢&#xff1f;每个人家里都会有冰箱&#xff0c;冰箱是用来干什么的&#xff1f;冰箱是用来存放食物的地方。同样的&#xff0c;数据库是存放数据的地方。正是因为有了数据库后&#xff0c;我们可以直接查找数据。例如你每天使用余额宝查看自己的账户收益&#…

Android多媒体分析-通过MediaStore获取Audio信息

public void getAlldata() { ContentResolver cr getApplication().getContentResolver(); if (cr null) { return; } // 获取所有歌曲 Cursor cursor cr.query(MediaStore.Audio.Media.EXTERNAL_CONTENT_URI, …

怎么在anaconda上安装python_我是如何用Anaconda来管理Python的

Anaconda 是一个用于科学计算的 Python 发行版&#xff0c;支持 Linux, Mac, Windows, 包含了众多流行的科学计算、数据分析的 Python 包。 Anaconda主要特点: 开源各个库之间的依赖性列出所需其他依赖包。多种开源库conda是包及其依赖项和环境的管理工具适用语言&#xff1a;P…

rdd分片 spark_Spark分区

一、分区的概念分区是RDD内部并行计算的一个计算单元&#xff0c;RDD的数据集在逻辑上被划分为多个分片&#xff0c;每一个分片称为分区&#xff0c;分区的格式决定了并行计算的粒度&#xff0c;而每个分区的数值计算都是在一个任务中进行的&#xff0c;因此任务的个数&#xf…