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. sumafan:python爬虫多线程爬取数据小练习（附答案）

    抓取 https://www.cnbeta.com/ 首页中新闻内容页网址, 抓取内容例子: https://hot.cnbeta.com/articles/game/825125 将抓取下来的内容页 ...

  2. .NET之美 第一部分C#语言基础

    第一章 类型基础 1 值类型与引用类型 CLR 支持两种类型:值类型和引用类型, C#的所有值类型均隐式派生自System.ValueType: 结构体:struct(直接派生于System.Valu ...

  3. EF 常见异常总结

    问题:System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invoca ...

  4. Docker的离线安装

    由于公司需要离线部署Docker,这里将其步骤记录下来. 目标环境Centos7.2. 由于目标环境为公司内网,首先尝试在https://download.docker.com/linux/cento ...

  5. GigE IP地址配置

    目前有三种配置Gige地址的方法: 1)动态获取DHCP 连接的PC上有DHCP server,可以分配给摄像头IP地址 2)静态IP 通过 设备自身的配置命令,来修改摄像头的IP地址,例如DALSA ...

  6. Android App增量升级

    移动互联网主打的就是用户体验和产品的快速迭代,通过用户反馈和用户行为跟踪及时调整产品方向,这样才能持续保持生命力和创造力.说的接地气点就是,你频繁的升级更新,有时只是修复了几个bug或者微调了下界面, ...

  7. Android下利用zbar类库实现扫一扫

    程序源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/zbardemo.zip Android下常用的条码扫描类库有zxing和zbar,比较了一下 ...

  8. 16)django-ajax使用

    通过ajax可以悄悄的把数据传输给服务器,实现页面无刷新. 一:ajax使用语法 1)普通方式 ajax使用语法: $.ajax({ url:"/host", //提交到那里 ty ...

  9. centos6.5 有趣但是没有用的linux命令

    小火车 get http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm rpm -ivh epel-rele ...

  10. Where is NuGet in VS2017 Community?

    问题:在VS2017中找不到NuGet 回答:https://stackoverflow.com/questions/43702484/where-is-nuget-in-vs2017-communi ...