使用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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP学习之数组值的操作
2011/04/17 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
讲解Python中的标识运算符
2015/05/14 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
实例详解Python装饰器与闭包
2019/07/29 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
社区七一党员活动方案
2014/01/25 职场文书
党员公开承诺事项
2014/03/25 职场文书
简单租房协议书
2014/10/21 职场文书
村主任当选感言
2015/08/01 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
聊聊JS ES6中的解构
2021/04/29 Javascript