html5表单密码验证及提示,HTML5表单及其验证(示例代码)
1.输入型控件
Input type
用途
说明
电子邮件地址文本框
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:
最后说下输入两次密码匹配的验证,写的很简单:
html5表单密码验证及提示,HTML5表单及其验证(示例代码)相关推荐
- vue与单页面 使用Photo Sphere Viewer创建vr 360全景示例代码
图片资料来源于:http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html 因本人注册账号下载参考之后再到vue项目中,若有侵权请 ...
- html5 jquery 鼠标拖动例子,jquery实现鼠标拖动实现DIV排序示例代码
先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文://www.jb51.net/article/42087.htm html部分: 指标: 注:可以通 ...
- html5块元素代码,html5 区块与内联div 与span html块级元素(示例代码)
HTML 和 可以通过 和 将 HTML 元素组合起来. HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素. 编者注:"块级元素"译为 block level e ...
- 单表代替和多表代替密码体系
一.实验目的及要求 1. 掌握单表代替和多表代替密码体系 2. 从单表代替或多表代替密码中选取一个密码系统(除凯撒密码),编写程序实现该密码系统 二.实验设备(环境)及要求 PC机, VC++等 三. ...
- JS实现单表代换密码加密
单表代换加密算法是比较经典的加密算法,事先准备好字母代换的相应对照表,即可实现加密解密,这里我们用JS进行实现. 明文字母与密文字母对应关系: 明文 a b c d e f g h i j k l m ...
- 找回XLS工作表保护密码
使用 VBA 代码在 Excel 中恢复丢失的工作表保护密码 以下 VBA 代码可以帮助您快速取消工作表中的原始密码. 1. 打开您之前受保护的工作表. 2. 按住 ALT + F11 键,它会打开 ...
- HTML5中将中文表单验证默认提示语句改为英文!
js代码: function checkEmail(){var email=document.getElementById("eject_email");if(email.valu ...
- html5表单验证没有效果,HTML5表单验证特性(知识点小结)
前台提交信息到后台一般两种常见提交方式: Form表单提交 和 Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持 解决方案: 可以在date ...
- html表单验证的作用,HTML5表单元素 、 表单属性 、 表单验证
[HTML5新表单] 1.type: - email : 验证逻辑不完整,只验证是否包含 @ : - search : - url : 验证逻辑不完整,只判断是否包含 http:// : - tel ...
最新文章
- python建站与java建站有何不同_详解模板建站和定制建站的不同之处
- LoadRunner Winsock 10053错误的真正原因
- 提高性能:用RequireJS优化Wijmo Web页面
- listview 滑动更改标题
- Python面向对象篇(2)-继承
- 单元测试 applicationinfomanager bean无法注入_你真的会用Spring吗?如何在单例Bean中注入原型Bean...
- 前端含金量较高的网站推荐
- 《代码之美》第六章:菜鸟的自圆其说
- matlab求RMSECV,CARS 用于matlab模式识别(分类和回归)的特征变量提取方法 联合开发网 - pudn.com...
- 童程童美机器人编程上海虹口校区_呼市童程童美少儿编程学习中心
- 【多题合集】高精度加减乘除
- HDU 4031 Attack
- delphi mysql 端口_delphi连接mysql
- 正反馈理论与管理学——马太效应、比…
- php币对人民币汇率_php汇率(php等于多少人民币)
- dos下\与/有什么区别
- KGB知识图谱帮助金融机构进行风险预判
- pyqt任务栏图标显示问题
- jsencrypt加密,并解决Message too long for RSA
- WEBSHELL权限提升技巧
热门文章
- centos7 postgresql9和postgis2.1插件编译部署
- js 获取url参数(QueryString)
- java搭建tcp客户端_【Java学习笔记】TCP客户端/服务器端
- 快照速度_网络推广——网络推广专员如何看待网站快照更新快慢问题?
- Navicat 连接MariaDB 失败: Host '*' is not allowed to connect to this MariaDB server
- The 2018 ACM-ICPC上海大都会赛 J Beautiful Numbers (数位DP)
- VS生成Cordova for Android应用之Gradle
- 16-1平衡树源代码
- E20170830-mk
- volatile关键字的使用