使用HTML5的表单验证的简单示例


Posted in HTML / CSS onSeptember 09, 2015

HTML5对表单元素提供了patern属性,它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值,如果控件的值不匹配这个正则表达就会弹出提示框,并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。

比如下面这个表单内,文本框只接受大陆的手机号,输入其它东西就无法提交
运行

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <form>  
  3.   <input id="text" pattern="^1[3-9]\d{9}$" required />  
  4.   <input id="button" type="submit" />  
  5. </form>  

注意只有非空的表单才会使用正则验证,如果什么都不输入的话,pattern不会被使用,所以还需要required协助。但是这个代码弹出的提示是这样的:
使用HTML5的表单验证的简单示例

这样的提示文字只有猴子看得懂!所以我们还需要更友好的提示文字,使用setCustomValidity方法来定义。
运行

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <form>  
  3.   <input id="text" pattern="^1[3-9]\d{9}$" required />  
  4.   <input id="button" type="submit" />  
  5. </form>  
  6. <script>  
  7. text.oninput=function(){   
  8.   text.setCustomValidity("");   
  9. };   
  10. text.oninvalid=function(){   
  11.   text.setCustomValidity("请不要输入火星的手机号好吗?");   
  12. };   
  13. </script>  

使用HTML5的表单验证的简单示例

invalid事件会在表单submit事件之前触发,如果验证不通过的话就不会触发表单的submit。而提交时会先验证所有表单元素是值是否有效。除了提交外还可以手动调用checkValidity方法来执行验证。

上面的例子中我直接对控件设置固定的提示其实不太好,有时候可能需要更详细的提示信息,比如空的时候提示为空、太长的时候提示太长、非数字的时候提示非数字等。这些动作可以通过程序验证后动态地setCustomValidity来实现。

其实我觉得HTML5的这套API设计的很糟糕,虽然可以满足基本需求,但还真不太实用。

手机页面中表单提交用JavaScript验证信息 会弹出窗口,用户体验极差,所以再给出一个手机端用HTML5的属性来验证的示例:

XML/HTML Code复制内容到剪贴板
  1. <input id="name" name="name" placeholder="name" required="" tabindex="1" type="text">    
  2. <input id="email" name="email" placeholder="telephone" required="" tabindex="2" type="text" pattern="(^(\d{3,4}-)?\d{7,8})$|^(13|15|18|14)\d{9}$">    
  3. <input id="subject" name="subject" placeholder="example@domain.com" required="" tabindex="2" type="text">    
  4.  // 主要用了HTML的一下属性   
  5. // 1.placeholder 提供可描述输入字段预期值的提示信息。 该提示会在输入字段为空时显示,并会在字段获   
  6. //得焦点时消失   
  7. //2.required 属性规定必需在提交之前填写输入字段   
  8. //3.pattern  是正则表达式,  里面可以直接填写正则表达式  

使用HTML5的表单验证的简单示例

使用HTML5的表单验证的简单示例

HTML / CSS 相关文章推荐
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 #HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 #HTML / CSS
详解HTML5中ol标签的用法
Sep 08 #HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 #HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 #HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 #HTML / CSS
详解HTML5中的元素与元素
Aug 17 #HTML / CSS
You might like
小偷PHP+Html+缓存
2006/12/20 PHP
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
zend framework多模块多布局配置
2011/02/26 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
python简单实例训练(21~30)
2017/11/15 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
Python里面search()和match()的区别
2016/09/21 面试题
口才训练演讲稿范文
2014/09/16 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
关于做家务的心得体会
2016/01/23 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
德生2P3收音机开箱评测
2022/04/30 无线电