HTML5表单及其验证详解编程语言
min number 规定允许的最小值
step number 规定合法的数字间隔(如果 step= 3 ,则合法的数是 -3,0,3,6 等)
value number 规定默认值
min number 规定允许的最小值
step number 规定合法的数字间隔(如果 step= 3 ,则合法的数是 -3,0,3,6 等)
value number 规定默认值
将原本type为text的input控件声明为以上特殊类型,是为了给用户呈现不同的输入界面(移动平台上支持这些不同的输入界面,这里就不细说),而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素,请用支持这些表单元素的浏览器查看,IE对其支持最差。
E-mail:
date:
range: number: color:
2. 表单新特性和函数
2.1 placeholder
当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,这在目前网站中很常见,一些JS框架都会提供类似功能,简单的说下在旧版本中常用的解决方案,为输入控件创建一个label,然后通过CSS控制些label的位置使之覆盖在输入控件上面,当label获得焦点时,浏览器会把焦点指向输入控件。不过有了placeholder,新的浏览器就内置了这一功能,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自动消失。
如:
input
id= runnername name= runnername type= text placeholder= First and last name /
2.2 autocomplete
其实在IE6中,autocomplete就已经实现,不过现在这一特性终于标准化了,浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用,autocomplete应该用一保护用户敏感数据,避免本地浏览器对它们进行不安全的存储。
当用户提交过一次表单后,再次访问,name的输入框会提示你曾输入的值,而email则不会提示。
2.3 autofocus
页面载入时,我们通过autofocus指定某个表单元素获得焦点,但每个页面只允许出现一个autofocus,如果设置多个则相当于未指定些行为。目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下,使用使用autofocus会惹恼用户。
2.5 list特性和datalist
通过使用list,开发人员能够为某个输入型控件构造一个选值列表,其使用方法:
2.6 required
required 属性规定必须在提交之前填写输入域(不能为空)。它是表单验证最简单的一种方式方法,使用方法:
2.7 pattern
pattern 属性规定用于验证 input 域的模式(pattern),模式(pattern) 是正则表达式。那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。使用方法:
2.8 novalidate
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
如:
3. 表单验证
表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化,让web应用更快的抛出错误,但它仍不能取代服务器端的验证,重要数据还要要依赖于服务器端的验证,因为前端验证是可以绕过的。
目前任何表单元素都有八种可能的验证约束条件:
input
id= runnername name= runnername type= text placeholder= First and last name required= required autofocus= autofocus /
input
id= style name= style type= text list= stylelist title= Years of participation
可是各个浏览器验证行为不一致,我们可能需要统一其验证行为,借助javascript我们可以统一浏览器的验证行为。
还是以上上述HTML为基础,我们为其加上相关javascript:
button
#8221;document.passwordChange.password1.checkValidity() Check Validity /
button
相关文章
- HTML5_ScrollInToView方法「建议收藏」
- 手机刮刮乐HTML5代码详解编程语言
- html5 web worker实现异步执行 计数器详解编程语言
- html5的localStorage使用示例详解编程语言
- html5 drawImage 不显示问题详解编程语言
- 用HTML5的FileReader生成Data Url详解编程语言
- 纯HTML5 Canvas实现的饼图详解编程语言
- 基于html5 localStorage的购物车JS脚本详解编程语言
- HTML5 DRM正式成为Web标准,EFF辞职抗议详解编程语言
- 高级HTML5 移动应用框架 Ionic v2.2.0 发布详解编程语言
- 2016年 20+ 个最好的免费 Bootstrap HTML5 模板详解编程语言
- HTML5 Canvas arc()函数详解编程语言
- html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。详解编程语言
- html5 placeholder兼容ie11详解编程语言
- html5预加载图片的写法详解编程语言
- html5 IOS 软键盘弹出解决方案详解编程语言
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案详解编程语言
- HTML5自定义select标签样式的方法详解编程语言
- html5 textarea 写入换行的方法详解编程语言