起因：今天无意中发现chrome的input框自带表单验证！于是就去试试firefox，惊奇的发现也有自带的验证提示，只不过两者的样式不一样

chrome中的样子：

firefox中的样子：

发散：具体如何使用，让我们接着往下看

我们如何才能够启用html5的表单验证呢？其实，很简单！

假如该字段为“必填”字段，那么我们只需要在表单控件（例如input）上面添加required=“true”即可

但往往我们的需求更加复杂，也许我们需要用上正则表达式

注：这里匹配手机号码的正则不是很规范，仅仅作为demo演示使用

这里我们用到了 pattern 这个属性，也就是我们可以在这个属性当中写正则表达式，然后这里我们还给标签注册了一个oninput事件，这样我们就可以在用户输入的时候持续判断是否符合条件

check这个函数里面还有一个关键的方法，就是setCustomValidity，这个函数主要是用来设置提示语的，设置为空（‘’）时，相当于隐藏提示功能~而patternMismatch则是用来判断验证是否没有通过的~

html5自带表单验证的更多相关文章

  1. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

  2. html5自带表单验证-美化改造

    神奇的代码 暂且叫做html5.css /* === HTML5 validation styles === */ .myform select:required, .myform input:req ...

  3. 用html5自带表单验证 并且用ajax提交的解决方法(附例子)

    用submit来提交表单,然后在js中监听submit方法,用ajax提交表单最后阻止submit的自动提交. 在标准浏览器中,阻止浏览器默认行为使用event.preventDefault(),而在 ...

  4. H5自带表单验证

    HTML5自带的表单验证 转载:https://www.web-tinker.com/article/20781.html HTML5对表单元素提供了patern属性,它接受一个正则表达式.表单提交时 ...

  5. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

  6. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  7. 表单验证—html5新特性表单验证

    一.表单 <body> <section id="register"> <div><img src="images/logo.j ...

  8. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  9. JS判断字符串长度，结合element el-input el-form 表单验证（英文占1个字符，中文汉字占2个字符）

    首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...

随机推荐

  1. Floyd（求每2个点之间的最短路）

    稍微改变即可求传递闭包,即关心两点之间是否有同路: for(int i=0;i<n;i++) for(int j=0;j<n;j++){ if(i==j) d[i][i]=0; else ...

  2. java 你画我猜 了解一下

    0-设计思路: 你画我猜顾名思义,有一个人画,一个人猜,两个思路: 1)一个中央服务器,中转数据,两个client端:,a画对应点的数据通过服务器发给客户端b,b通过这些数据进行绘画,换颜色人,等等, ...

  3. 加载Excel时，如何过滤空行空列

    巨硬为Excel提供了丰富的C#接口,基本上可以将Excel当做一个微型数据库来用,奈何前端的我们,sql也只会写两句select * from table: 目前工作中遇到了一个问题,在需要读取的E ...

  4. ubuntu 主题和zsh终端

    ubuntu 主题和zsh终端 1) sudo apt-get install unity-tweak-tool  sudo add-apt-repository ppa:noobslab/theme ...

  5. The Oregon Trail 俄勒冈之旅

    发售年份 1971 平台 多平台 开发商 MECC 类型 教育娱乐 https://www.youtube.com/watch?v=QBOLN7I8omY

  6. QT心电图设计

    不需要别的UI设置,直接放在QT文件中即可 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #includ ...

  7. Git-命令行-删除本地和远程分支

    命令行方式 Git Bash: 切换到要操作的项目文件夹 命令行 : $ cd <ProjectPath> 查看项目的分支们(包括本地和远程) 命令行 : $ git branch -a ...

  8. 线程中AutoResetEvent与ManualResetEvent的区别

    线程之间的通信是通过发信号来进行沟通的.. ManualResetEvent发送Set信后后,需要手动Reset恢复初始状态.而对于AutoResetEvent来说,当发送完毕Set信号后,会自动Re ...

  9. v4l2框架

    参考:https://www.cnblogs.com/tuotuteng/p/4648387.html http://blog.sina.com.cn/s/blog_c91863e60102w65w. ...

  10. Git 安装和使用教程

    Git 安装和使用教程 git 提交 全部文件 git add .  git add xx命令可以将xx文件添加到暂存区,如果有很多改动可以通过 git add -A .来一次添加所有改变的文件.注意 ...