pattern 用于定义验证输入正则表达式

pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 password

需要注意的是:input的正则表达式是不需要使用 \ 来转义特殊字符的,这和js里面的正则表达式有所区别,转义了反而会报错

可以使用 title 属性来描述正则表达式,这样在浏览器验证表单是就会按title描述来提示错误消息

使用title虽然会有提示,但提示语前面会附加 “请匹配要求的格式”。如果浏览器是中文,提示语是英文,就会感觉怪怪的

这时我们可以通过setCustomValidity方法来自定义提示信息,更准确的提示给用户,但因为设置了setCustomValidity后如果不手动取消,表单就会一直提示有错误消息而无法提交,所以需要写一段js代码

<script type="text/javascript">
    function vali(obj) {
        if (obj.validity.patternMismatch === true) {
            obj.setCustomValidity($(obj).prop('title'));
        } else {
            obj.setCustomValidity('');
        }
    }
</script>

<input type="text" pattern="[a-zA-Z]+" oninvalid="vali(this);" />

上面这个方法还有一个问题,因为调用vali()函数是在oninvalid里面调用的,而oninvalid是在onsubmit中被浏览器调用的

所以执行vali()函数后submit不会再执行了,这样即使vali()里面调用了obj.setCustomValidity('');清理了错误消息,表单也还是无法提交,还需要点击一次提交按钮

所以,看具体情况,也可以使用oninput代替oninvalid,或者就只使用title属性,如果浏览器语言和提示信息语言一致的话

input 的 pattern 验证表单的更多相关文章

  1. H5利用pattern属性和oninvalid属性验证表单

    HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  2. jQuery用面向对象的思想来编写验证表单的插件

    本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...

  3. Spring MVC 验证表单

      在实际工作中,得到数据后的第一步就是检验数据的正确性,如果存在录入上的问题,一般会通过注解校验,发现错误后返回给用户,但是对于一些逻辑上的错误,比如购买金额=购买数量×单价,这样的规则就很难使用注 ...

  4. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  5. js验证表单大全

    js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...

  6. 运用jQuery写的验证表单

    //运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  7. 开始使用HTML5和CSS3验证表单

    使用HTML5和CSS3验证表单 客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证.HTML5其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼 ...

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

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

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

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

随机推荐

  1. golang在import自己的包报错问题

    原因:使用git clone项目后,项目根路径是小写英文名称,比如cmdbapi,但是项目里面的import导入自己的相关包时,红色报错 解决:把项目名称改写成import导入包的名称,即cmdbAp ...

  2. golang之字符串

    字符串中的每一个元素叫做“字符”.在遍历或者单个获取字符串元素时可以获得字符.严格来说,这并不是 Go语言的一个类型,字符只是整数的特殊用例. (1)最后要注意,字符串值是不可变的.也就是说,我们一旦 ...

  3. Data Visualisation Cheet Sheet

    Univariate plotting with pandas import pandas as pd reviews = pd.read_csv() reviews.head() //bar rev ...

  4. web前端学习(四)JavaScript学习笔记部分(3)-- JavaScript函数+异常处理+事件处理

    1.Javascript函数-了解函数的用途 1.1.函数: 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 2.Javascript函数-定义函数 2.1.function必须小写 3. ...

  5. php require_once的使用方法

    学习笔记 require_once 语句和 require 语句完全相同,唯一区别是 PHP 会检查该文件是否已经被包含过,如果是则不会再次包含. equire_once() 为了避免重复加载文件. ...

  6. 高效整洁CSS代码原则 (下)

    6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰.你可以选择做的样式表的开始添加目录: /*---------------------------- ...

  7. 一眼看穿👀JS基本概念

    前段时间忙,好久没更新了,继续梳理基础知识这期总结的是JS的基本概念 标识符 所谓的标识符是指变量,函数属性的名字,或者函数的参数 第一个字符必须是一个字母,下划线(_)或者一个美元符号($),其他字 ...

  8. hackerrank--- challenges/fp-update-list

    纯属为了练习haskell, 竟然贴代码都没办法高亮. challenges/fp-update-list Update the values of a list with their absolut ...

  9. No.1 Verilog HDL简介

       硬件描述语言HDL(Hardware Description Language)是一种用形式化方法来描述数字电路和系统的语言.设计者利用HDL可以从抽象到具体逐层描述自己的设计思想,用一系列的分 ...

  10. RNN与 LSTM 网络

    循环神经网络(RNN) 人们的每次思考并不都是从零开始的.比如说你在阅读这篇文章时,你基于对前面的文字的理解来理解你目前阅读到的文字,而不是每读到一个文字时,都抛弃掉前面的思考,从头开始.你的记忆是有 ...