使用 pattern 属性验证输入值

最新推荐文章于 2024-06-21 10:30:00 发布
最新推荐文章于 2024-06-21 10:30:00 发布
阅读量587 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46267040/article/details/125369646
版权
"本文介绍了HTML5中内置的input类型用于限制用户输入的特定格式，如颜色、日期、电子邮件、数字、电话号码和URL。然而，当需要更复杂的验证规则时，可以结合使用`pattern`属性。例如，通过`<input type="tel" pattern="^d{10}
摘要由CSDN通过智能技术生成

在处理输入字段时，根据特定规则验证用户输入是一件常见的事情。在不使用外部验证库的情况下，我们可以使用一些内置的 HTML5 input 类型来严格控制值。

具体来说，以下 input 类型强制用户输入有效字符：

input 类型描述
type="color"只接受颜色
type="date"只接受日期
type="email"只接受有效的电子邮件地址
type="number"只接受数字
type="tel"只接受电话号码
type="url"只接受 URL

尽管这些 input 类型很有用，但它们不能满足输入必须匹配给定正则表达式的情况。

例如，我们如何在使用 type="tel" 属性时强制用户输入电话号码的 10 位数字。这就是 pattern 属性的用武之地。

下面的示例代码解决了前面提到的问题：

<input type="tel" pattern="^\d{10}$" title="请输入10位数字" />

建议使用 title 属性，以便用户知道正确的值是什么。

lio_zero
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
h5 php表单验证,pattern--HTML5的表单验证属性
weixin_39828102的博客
03-22 616
在本教程中我们将探索 HTML 的pattern属性，用来帮助我们制定自定义表单验证的方式。验证表单验证对一个网站的安全性，以及可用性至关重要。验证过程就是在表单提交之前判断输入值是否匹配了正确的格式。例如，如果我们要在一个输入框内输入电子邮件地址，该值一定要是一个有效的电子邮件地址；应该以一个字母或数字开头，然后是@符号，最后以一个域名结束。HTML5规范对于一些新的input类型，如email...
asp 验证输入网址是否有效并可以访问 与正则验证输入网址
10-30
其次，使用正则表达式验证输入的URL是否合法。正则表达式是一种强大的文本匹配工具，可以用来检查字符串是否符合特定的模式。下面是一个名为`checkexp`的函数，它接收一个正则表达式模式和要验证的字符串： ```asp ...
正则表达式数字验证
11-13
//java正则表达式数字验证 public boolean isNumber(String str) { java.util.regex.Pattern pattern=java.util.regex.Pattern.compile("[0-9]+(.[0-9]+)?"); java.util.regex.Matcher match=pattern.matcher(str); if(match.matches()==false) { return false; } else { return true; } } ------------------------------------------------------------------------------------------------------ [removed] function validate(){ var reg = new RegExp("^[0-9]*$"); var obj = document.getElementById("name"); if(!reg.test(obj.value)){ alert("请输入数字!"); } if(!/^[0-9]*$/.test(obj.value)){ alert("请输入数字!"); } } [removed] ------------------------------------------------------------------------------------------------------ 验证数字的正则表达式集 验证数字：^[0-9]*$ 验证n位的数字：^\d{n}$ 验证至少n位数字：^\d{n,}$ 验证m-n位的数字：^\d{m,n}$ 验证零和非零开头的数字：^(0|[1-9][0-9]*)$ 验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数：^\+?[1-9][0-9]*$ 验证非零的负整数：^\-[1-9][0-9]*$ 验证非负整数（正整数 + 0） ^\d+$ 验证非正整数（负整数 + 0） ^((-\d+)|(0+))$ 验证长度为3的字符：^.{3}$ 验证由26个英文字母组成的字符串：^[A-Za-z]+$ 验证由26个大写英文字母组成的字符串：^[A-Z]+$ 验证由26个小写英文字母组成的字符串：^[a-z]+$ 验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$ 验证由数字、26个英文字母或者下划线组成的字符串：^\w+$ 验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。 验证是否含有 ^%&',;=?$\" 等字符：[^%&',;=?$\x22]+ 验证汉字：^[\u4e00-\u9fa5],{0,}$ 验证Email地址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ 验证InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$ 验证电话号码：^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$：--正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。 验证身份证号（15位或18位数字）：^\d{15}|\d{}18$ 验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为：“01”-“09”和“1”“12” 验证一个月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为：01、09和1、31。 整数：^-?\d+$ 非负浮点数（正浮点数 + 0）：^\d+(\.\d+)?$ 正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$ 非正浮点数（负浮点数 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$ 浮点数 ^(-?\d+)(\.\d+)?$
pattern属性（表单验证input）
qq_49097495的博客
06-26 898
手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$ （更简单的 ^1[0-9]{10}$ ）=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。7个汉字或14个字符：^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$密码：^[a-zA-Z]\w{5,17}$ 字母开头，长度在6~18之间，只能包含字母、数字和下划线。
HTML5的新属性
最新发布
qq_44327851的博客
06-21 1224
是 HTML5 中的一个布尔属性，用于指定页面加载后自动将焦点（即光标）放在指定的输入字段上，使用户可以立即开始在该字段中输入内容。属性是 HTML5 中用于表单验证的一个属性，它用于指定一个正则表达式，以验证输入字段中的值是否符合特定的模式。属性，可以更灵活地组织和布局表单元素，使其可以跨越不同的 HTML 结构，而仍然能够在逻辑上属于同一个表单。属性，因为只有一个元素可以拥有焦点，这可能会导致意外的用户体验，特别是在用户期望焦点在其他元素上时。属性，但在某些较旧的浏览器版本中可能不被完全支持。
常用的正则验证表达式pattern
casablancaGET的博客
09-12 260
d{7,8}$"正确格式为：“XXX-XXXXXXX”、“XXXX-XXXXXXXX”、“XXX-XXXXXXX”、“XXX-XXXXXXXX”、“XXXXXXX"和"XXXXXXXX”。[1-9])|((1|2)[0-9])|30|31)$"正确格式为；22验证InternetURL：“^http://([\w-]+.)+[\w-]+(/[\w-./?[1-9]|1[0-2])$"正确格式为：“01"～"09"和"1"～"12”。7只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”。
html5中的pattern属性（表单验证input）
GLyihu的博客
04-15 8654
pattern用于验证表单输入的内容，通常HTML5的type属性，比如email、tel、number、data类、url等，已经自带了简单的数据格式验证功能了，加上pattern后，前端部分的验证更加简单高效了。 pattern的属性值要用正则表达式。 常用的正则表达式： 信用卡 [0-9]{13,16} 银联卡 ^62[0-5]\d{13,16}$ Visa...
使用Pattern类验证数字
小夜丶凝眸的博客
11-04 1806
String str= "123456"; // 判断是否为数字 Pattern pattern = Pattern.compile("[0-9]*"); if(pattern.matcher(str).matches()==false){ System.out.println("你输入的不是数字，请重新检查"); }else{ System.out.println("你输入的为数字"); } ...
Js中使用正则表达式验证输入是否有特殊字符
10-18
本文介绍了如何在JavaScript中使用正则表达式来验证输入字符串是否包含特殊字符。通过具体的代码示例和解释，我们理解了正则表达式的构成、特殊字符的意义以及如何利用正则表达式的`test()`方法和`lastIndex`属性来...
thymeleaf怎么使用pattern属性
04-21
Thymeleaf中的pattern属性可以用于指定一个正则表达式，用来验证用户输入的数据是否符合指定的格式。该属性通常与th:field一起使用，例如： ```html *{propertyName}" th:pattern="[0-9]*" /> ``` 在上述代码中，*...
解决html input验证只能输入数字,不能输入其他的问题
08-29
pattern属性接受一个正则表达式，当用户提交表单时，浏览器会自动验证input元素的值是否符合该正则表达式的规则。如果不符合，表单提交将被阻止，并提示用户。这种方法不需要JavaScript代码，是纯HTML5的验证方法，...
正则表达式校验数字
u011840990的博客
08-16 679
记一下，老是忘记， 可以输入：1、正整数 2、小数，最多两位，最后一位可以是0 String reg="^((0{1}|([1-9]{1}[0-9]*)).((0[1-9]|([1-9]{1}[0-9]{0,1}))))|([1-9]{1}[0-9]*)$";   System.out.println("10008855.12".matches(reg)); 已测可用...
html中<input>的pattern属性
Jessy_Tien的博客
11-05 7636
pattern用于验证表单输入的内容，通常HTML5的type属性，比如email、tel、number、data类、url等，已经自带了简单的数据格式验证功能了，加上pattern后，前端部分的验证更加简单高效了。 pattern的属性值要用正则表达式。 常用的正则表达式： 信用卡  [0-9]{13,16} 银联卡  ^62[0-5]\d{13,16}$
正则表达式大全——包括校验数字、字符、一些特殊的需求等（超全）
Sandwichsauce的博客
04-09 1324
一、校验数字的表达式1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字：^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$ 8 正数...
Spring mvc参数校验
zhaomengxia123的博客
10-21 685
/** * Bean Validation 中内置的 constraint * @Null 被注释的元素必须为 null * @NotNull 被注释的元素必须不为 null * @AssertTrue 被注释的元素必须为 true * @AssertFalse 被注释的元素必须为 false ...
前端基础input输入框主要属性
热门推荐
m0_58849641的博客
09-17 1万+
　1、单行输入框< input type"text"/>。单行文本的输入框常用来输入简单的信息，例如用户名、账号等等。具体的属性有：name、value、maxlength。 　　2、密码输入框<input type=”password”/>。其内容以圆点的形式显示。 　　3、但选按钮<input type-”radio”/>。单选按钮用于单项选择，在定义单选按钮时必须为同一组中的选项制定相同的name值，可以对单选按钮应用checked属性，制定默认选中项。 　　4、复
前端HTML5/HTML+CSS3/CSS学习笔记(六)
weixin_51227348的博客
02-23 2606
前端HTML5/HTML+CSS3/CSS学习笔记(六)
Pattern和Matcher的概述，正则表达式获取功能
渣渣修炼记
12-04 509
Pattern和Matcher概述
IC测试-CP测试中运用到的pattern简介
weixin_47847473的博客
06-21 4740
IC在CP测试阶段有一个最直接有效的测试手段就是利用pattern来实现相应的测试功能，pattern不仅能承载测试指令，也能作为庞大测试数据的载体。pattern文档从实质上来说就是一串很长的二进制码，不管是文件中所用到的1和0，还是P和N，代表的都是映射到硬件上的驱动高电平或者驱动低电平，用pattern测试的实质也就是通过这些二进制符号组合成符合IC设计需求的时序波形下发给IC和驱动IC的IO状态或者去compare IC的某一IO的某时刻的高低状态，以实现控制IC动作或与IC交互传播数据等功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值