起因：今天无意中发现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. java-jdk动态代理生成的代理类源码

    import com.zkn.newlearn.gof.proxyhandler.PersonInter; import java.lang.reflect.InvocationHandler; im ...

  2. ssh_exchange_identification: read: Connection reset by peer

    vim /etc/hosts.deny 删除ip 借鉴:https://www.sunnyos.com/article-show-81.html

  3. 关于使用jQuery操作dom时的一点发现

    <body> <ul> <li>list item 1</li> <li>list item 2</li> <li> ...

  4. 3-Longest Substring Without Repeating Characters @LeetCode

    3-Longest Substring Without Repeating Characters @LeetCode 题目 题目中得到的信息有: 一段字符串找出不重复子串的最大长度,只需要长度信息. ...

  5. mysql入门学习笔记

    MySQL的登陆和退出 mysql -u 用户名 -p 密码 #登陆 quit #退出(exit or \q) 具体参数: 参数 描述 -D,--database=name 打开指定数据库 -deli ...

  6. FtpHelper实现ftp服务器文件读写操作(C#)

    最近做了一个项目,需要读取ftp服务器上的文件,于是参考了网上提供的一些帮组方法,使用过程中,出现一些小细节问题,于是本人做了一些修改,拿来分享一下 using System; using Syste ...

  7. C# 生成海报，文本区域指定和换行，图片合成

    protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string path = Server.MapPa ...

  8. Git 环境配置

    Git 自带一个 git config 的工具来帮助设置控制 Git 外观和行为的配置变量. 这些变量存储在三个不同的位置: /etc/gitconfig 文件: 包含系统上每一个用户及他们仓库的通用 ...

  9. centos 7下rabbitmq安装(转)

    安装erlang环境 添加rabbitmq依赖的erlang yum命令repos # In /etc/yum.repos.d/rabbitmq-erlang.repo [rabbitmq-erlan ...

  10. js配置文件路径和项目目录文件夹位置的一致性

    在js文件引入的时候注意配置文件的路径是否和项目目录中的文件夹位置一致,如果不一致, 浏览器会指出找不到文件404的情况