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. a.py

    #!/usr/bin/python # -*- coding: UTF-8 -*- import os import sys import re import shutil import glob d ...

  2. 使用sudo而无需输入密码的设置

    在linux上,root用户是老大,什么事都能做.但是,很多时候由于安全等各种原因,我们不希望把root用户开放给大家,但是又希望其他的用户可以有root的权限,所以就有了sudo用户.而执行sudo ...

  3. hibernate框架学习之数据查询（QBC）

    lQBC(Query By Criteria)是一种Hibernate中使用面向对象的格式进行查询的计数 lQBC查询方式步骤 •获取Session对象 •初始化Criteria对象(使用Sessio ...

  4. expect学习笔记及实例详解

    因为最近正在学习expect脚本,但是发现网上好多文章都是转载的,觉得这篇文章还不错,所以简单修改之后拿过来和大家分享一下~ 1. expect是基于tcl演变而来的,所以很多语法和tcl类似,基本的 ...

  5. 利用表格分页显示数据的js组件bootstrap datatable的使用

    前面展示了datatable的简单使用,还可以通过bootstrap结合datatable来使用,这样可以进一步美化datatable插件 <!DOCTYPE html> <html ...

  6. percona-xtrabackup工具实现mysql5.6.34的主从同步复制

    percona-xtrabackup工具实现mysql5.6.34的主从同步复制 下载并安装percona-xtrabackup工具 # wget https://www.percona.com/do ...

  7. linux服务器上配置多个svn仓库

    linux服务器上配置多个svn仓库 1.在指定目录建立仓库保存总目录,本文示例目录设定为:/usr/local/svn/svnrepos # mkdir -p /usr/local/svn/svnr ...

  8. C++ sizeof()练习

    class A { int a; short b; int c; char d; }; class B { double a; short b; int c; char d; }; 在32位机器上用g ...

  9. mac 上如何安装非app store上的下载的软件-------打开未知来源

    打开了 Terminal 终端后 ,在命令提示后输入 sudo spctl --master-disable 并按下回车执行,如下图所示.   随后再输入当前 Mac 用户的密码,如下图所示.   如 ...

  10. Centos7升级gcc版本方法之一使用scl软件集

    Centos7 gcc版本默认4.8.3,Red Hat 为了软件的稳定和版本支持,yum 上版本也是4.8.3,所以无法使用yum进行软件更新,所以使用scl. scl软件集(Software Co ...