使用 pattern 属性验证输入值

"本文介绍了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 属性,以便用户知道正确的值是什么。

//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+)?$
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值