11
2019
03

HTML5 pattern 属性

pattern :设置元素文本内容需匹配的正则表达式

说明: 元素文本内容指定的正则表达式完全匹配才会验证通过。

注意:

1) 浏览器不会验证空值,若想必填可加上 required 属性。

2) 若含有title属性的值,当匹配失败会显示title的信息。

定义和用法

pattern 属性规定用于验证输入字段的模式。

模式指的是正则表达式。

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

通过使用HTML5的pattern属性 使用浏览器的本地功能就可以帮助你判断电子邮件的格式,URL,或者是电话格式,防止用户输入错误的信息

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="dd.php">
			<!--pattern 验证合适就提交,不合适就不提交  \d{3,10}  3到10位数字  如果输入英文字母或文字会提示(提交不上去)-->
			姓名:<input type="text" pattern="\d{3,10}" placeholder="请输入3至10位的数字"/>
			<br /><br />
			密码: <input type="password"  />
			<br /><br />
			<!--\d{17}[\dXx] 前17位数是任意数字,后一位是数字或大小写X-->
			身份证号: <input type="text" pattern="\d{17}[\dXx]" />
			<br /><br />
			<!--required 表示如果这个表单为空不能提交-->
			emali: <input type="email" required />
			<br /><br />
			<input type="submit"  />
		</form>
	</body>
</html>

原文链接:https://www.qiquanji.com/post/8666.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。