HTML代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<form action="demo-form.php">

 手机号:

    <input type="text" name="phone" maxlength="11" pattern="^(0|86|17951)?1[0-9]{10}"

    oninvalid="setCustomValidity('请输入11位手机号');"/>

    <br>

  <input type="submit">

</form>

</body>

</html>

运行结果

TIP：这里只写了手机号码的验证，用作示例，若需要验证其它东西，只需在pattern属性里写对应的正则表达式即可。也可以使用input类型里除了text的其它类型来做验证，比如

<input type="email">

<input type="number">

属性解释

  • pattern：属性规定用于验证输入字段的正则表达式。
  • oninvalid：提交的input元素的值为无效值时（这里是正则验证失败），触发oninvalid事件。oninvalid属于Form 事件。
  • setCustomValidity()：这个是HTML5内置的JS方法，用来自定义提示信息
  • maxlength：限定input最大输入长度

其它属性

  • required：增加一个非空验证。ps——我这里有正则就没写
  • oninput：该事件在 input 或 textarea 元素的值发生改变时触发。

总结

  • 优点：简单方便。
  • 缺点：提示的UI不是太漂亮，无法做多个验证，必须表单提交才能验证（即ajax无效）。
  • 建议：在要求比较简单的时候可以考虑使用H5验证表单，也可以使用内置JS函数加各种事件自定义一个验证函数，不过这样不仅兼容是个问题，而且还麻烦，倒不如直接使用JQ插件验证

在线测试工具

这里我测试是用的菜鸟教程在线工具，点击旁边的菜鸟工具会进入到这个页面

H5利用pattern属性和oninvalid属性验证表单的更多相关文章

  1. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  2. JavaScript/Jquery：Validform 验证表单的相关属性解释

    当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...

  3. input 的 pattern 验证表单

    pattern 用于定义验证输入正则表达式 pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 passwo ...

  4. tp框架之自动验证表单

    tp框架的create自动加载表单的方法可以自动根据自己定义的要求来验证表单里面的内容,但是由于是在后台执行代码,会拖慢程序运行速度,所以还是建议通过前端js来进行判断,后台只进行数据库的查询以及传值 ...

  5. flask 在视图函数中验证表单

    在视图函数中验证表单 因为现在的basic_form视图同时接受两种类型的请求:GET请求和POST请求.所以我们要根据请求方法的不同执行不同的代码.具体来说,首先是实例化表单,如果是GET请求,就渲 ...

  6. ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建

    在上一篇"ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式.错误信息提示.validate方法的背后"中,了解了jQuery如何验证,如何显示错误信息,本篇要 ...

  7. SpringBoot非官方教程 | 第十九篇： 验证表单信息

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot19/ 本文出自方志朋的博客 这篇文篇主要简述如何 ...

  8. 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  9. JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等

    JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

随机推荐

  1. node promise库bluebird

    var fs = require('fs') var Promise = require("bluebird") function file1() { return new Pro ...

  2. Linux下的压缩和解压缩命令gzip/gunzip

    作者:邓聪聪 Linux下的压缩和解压缩命令——gzip/gunzip yum -y install zip gzip (--安装压缩工具) gzip命令 gzip命令用来压缩文件.gzip是个使用广 ...

  3. STL中vector、list、deque和map的区别

    1 vector     向量 相当于一个数组    在内存中分配一块连续的内存空间进行存储.支持不指定vector大小的存储.STL内部实现时,首先分配一个非常大的内存空间预备进行存储,即capac ...

  4. python中input和raw_input函数

    python input() 相等于 eval(raw_input(prompt)) ,用来获取控制台的输入. raw_input() 将所有输入作为字符串看待,返回字符串类型.而 input() 在 ...

  5. 1、git基础介绍及远程/本地仓库、分支

    1. Git基础介绍 基于Git进行开发时,首先需要将远程仓库代码clone到本地,即为本地仓库.后续大部分时间都是基于本地仓库上的分支进行编码,最后将本地仓库的代码合入远程仓库. 1.1. 远程仓库 ...

  6. SpringMVC拦截器（慕课网）

    拦截器:通过统一拦截从浏览器发往服务器的请求来完成功能的增强 使用场景:解决请求的共性问题 如:乱码.权限验证 基本工作原理:拦截器和过滤器的工作原理相似 乱码问题:使用Spring过滤器(Filte ...

  7. Docker 导出 & 导入

    Docker 容器因为它的快速部署被深受喜爱.本文记录 Docker 容器的导出与导入,分别用到 Docker 的 export 和 import 命令. 1.查看正在运行的容器: [root@loc ...

  8. 转载：UML学习（三）-----序列图（silent）

    原文:http://www.cnblogs.com/silent2012/archive/2011/09/14/2172219.html UML的模型中可分为两种,动态模型和静态模型.用例图.类图和对 ...

  9. socket原理-基于UDP的套接字-基于TCP实现远程命令-粘包

  10. 发布python模块

    首先要写好模块和setup.py,把他们放在同一个文件夹下,图例是放在了stuManage文件夹下,setup.py具体内容如下: 然后打开终端,切到stuManage文件夹下开始发布 现在就可以跟p ...