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. 题解-bzoj4221 JOI2012kangaroo

    Problem bzoj 题意:给定\(n\)只袋鼠,每只袋鼠有俩属性\(a,b\),若\(a_i\leq b_j\),则\(i\)是可以被\(j\)放置在袋子里的,求经过一系列放置操作后无法进行操作 ...

  2. hibernate学习笔记第七天：二级缓存和session管理

    二级缓存配置 1.导入ehcache对应的三个jar包 ehcache/*.jar 2.配置hibernate使用二级缓存 2.1设置当前环境开始二级缓存的使用 <property name=& ...

  3. JUnit3 和 JUnit4的区别

    JUnit3 和 JUnit4的区别 1.JUnit 4使用org.junit.*包而JUnit 3.8使用的是junit.Framework.*;为了向后兼容,JUnit4发行版中加入了这两种包. ...

  4. 37)django-单例模式

    一:单例模式 单例模式,是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例的特殊类. 通过单例模式可以保证系统中一个类只有一个实例.即一个类只有一个对象实例. 常用例子:数据库连接串,只保 ...

  5. 小程序---textarea踩坑

    1.小程序中textarea不能在scroll-view.swiper.picker-view等等里面运用. 2.不在fixed布局的页面中,placeholder也会随着页面滚动,解决方法:顶级父元 ...

  6. 神经网络之 Batch Normalization

    知乎 csdn Batch Normalization 学习笔记 原文地址:http://blog.csdn.net/hjimce/article/details/50866313 作者:hjimce ...

  7. The word 'localhost' is not correctly spelled 这个问题怎么解决

    The word 'localhost' is not correctly spelled 这个问题怎么解决 有时工程中有下划线并提示 The word is not correctly spelle ...

  8. Oracle管理文件OMF （oracle managed files）

    简化dba的管理操作 1:启用 omf 23:16:04 SYS@orcl> show parameter DB_CREATE_FILE_DEST NAME TYPE VALUE ------- ...

  9. java 实现往oracle存储过程中传递array数组类型的参数

    注:本文来源于 <  java 实现往oracle存储过程中传递array数组类型的参数  >最近项目中遇到通过往存储过程传递数组参数的问题, 浪费了N多个小时,终于有点头绪. 具体的代码 ...

  10. Confluence 6 配置管理员会话安全的备注

    禁用密码确定. Confluence 安装使用自定义授权机制有可能会在密码校验的时候遇到问题.如果必要的话,你可以设置 password.confirmation.disabled 系统属性来禁用密码 ...