起因：今天无意中发现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. 将TUM数据集的RGB-D数据集转化为klg格式

    1.在github上下载代码png_to_klg git clone https://github.com/HTLife/png_to_klg 2.将png_to_klg目录下的associate.p ...

  2. javascript常见问题总结

    1.const obj = {a:6}; obj.b=8; obj.a=9;//obj为{a:9,b:8};const定义对象的时候是可以改变内容的. const b = "hello&qu ...

  3. C putchar() 和 getchar()

    C 库函数 int getchar(void)   从 终端输入获取一个字符 : 返回值:该函数以无符号 char 强制转换为 int 的形式返回读取的字符,如果到达文件末尾或发生读错误,则返回 EO ...

  4. 嵌入式C语言常见的错误

    预处理的错误: #include “stdio.h”   //引用符号错误 #inlcude <name>  //自定义文件用 "  " not find gcc -I ...

  5. Verilog手绘FVH信号

    Verilog手绘FVH信号 `timescale 1ns / 1ps //////////////////////////////////////////////////////////////// ...

  6. pagination.js 使用

    pagination.js 使用方式 $('.paginationjs').pagination({ dataSource: 'DetailImage?handler=Search', locator ...

  7. aspnetcore 日志 serilog-aspnetcore

    serilog-aspnetcore https://github.com/serilog/serilog-aspnetcore public static void Main(string[] ar ...

  8. lnmp环境 swoole聊天室

    pecl install swoole 安装php扩展swooleservice php-fpm restart 重启php服务whereis php.ini 查看php.ini的位置 查看文件是否配 ...

  9. tp框架增删改

    选择一张表: 首先要创建模型: 1 $n = M("account"); 数据库添加数据: 1.使用数组: 1 2 3 1.使用数组 $arr = array("uid& ...

  10. python爬虫学习笔记（一）——环境配置（windows系统）

    在进行python爬虫学习前,需要进行如下准备工作: python3+pip官方配置 1.Anaconda(推荐,包括python和相关库)   [推荐地址:清华镜像] https://mirrors ...