起因：今天无意中发现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. for循环、while循环、break、continue、exit

    1. for循环 语法:for 变量名 in 条件; do …; done案例1 #!/bin/bashsum=0for i in `seq 1 100`do# echo "$sum + $ ...

  2. FragmentXlistview

    package com.example.lenovo.tablayout; /** * Created by lenovo on 2018/7/18. */ import android.os.Asy ...

  3. STM32的USART应用问题（不定时添加）

    ST应用的问题:串口一直在用.不检测会导致一直中断要规避. 规避范例: void USART1_IRQHandler(void) //串口1中断服务程序 { u8 Res; u8 DataCount= ...

  4. Linux本地yum源配置以及使用yum源安装gcc编译环境

    本文档是图文安装本地yum源的教程,以安装gcc编译环境为例. 适用范围:所有的cetos,红帽,fedroa版本 适用人群:有一点linux基础的小白 范例系统版本:CentOS Linux rel ...

  5. Linux----------ftp的介绍及安装使用

    目录 一.ftp简介 二.常用的ftp软件有: 三.ftp数据连接模式 3.1命令连接是指文件管理类命令,始终保持连接,直到用户退出 3.2数据连接是指数据传输时创建和关闭的连接 四.用户验证方式 4 ...

  6. C 标准库头文件

    头文件 说明 头文件 说明 <assert.h> 条件编译宏,将参数与零比较 <complex.h> (C99 起) 复数运算 <ctype.h> 用来确定包含于字 ...

  7. H5外包 微信小程序外包 小程序外包 就找北京动点开发团队

    长年承接微信小程序.微信公众号开发 全职的H5开发团队,开发过几十款微信小程序公众号案例 欢迎来电咨询 QQ:372900288 微信:liuxiang0884 TEL:13911652504

  8. 一些关于three.js的摘抄笔记

    加载多个geometry的方式: (可以利用three.js自带convert_obj_three.py文件将obj文件转换成json文件) function loadModel() { loader ...

  9. RN—Android 物理返回键监听

    A → B 使用 navigator 导航,用 goBack() 返回的时候传递参数 在 A 页面 this.props.navigation.navigate("B", { ca ...

  10. javascript+html5+canvse+3d俄罗斯方块

    javascript+html5+canvse+3d俄罗斯方块 必须使用支持html5的浏览器打开,比如firefox,chrome 得分:0速度:1000 // 你的浏览器不支持 <canva ...