了解pattern属性以及常用的正则表达式

最新推荐文章于 2023-09-12 14:24:12 发布

꧁缘法天地间꧂

最新推荐文章于 2023-09-12 14:24:12 发布

阅读量859

点赞数 1

分类专栏：前端文章标签： HTML 表单验证正则表达式用户输入前端开发

原文链接：https://blog.csdn.net/weixin_45737330/article/details/120566920

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果图：

111

当输入的内容与定义的正则表达式格式不匹配时，单击“提交”按钮，效果如下：

112
213

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>pattern属性</title>
</head>
<body>
	<form action="#" method="get">
		账&nbsp;&nbsp;&nbsp;&nbsp;号：
		<input type="text" name="username" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />
		以字母开头，允许5~16字节，允许字母、数字和下划线）<br/>
		密&nbsp;&nbsp;&nbsp;&nbsp;码：
		<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" />
		（以字母开头，长度在6~18，只能包含字母、数字和下划线）<br/>
		身份证号：
		<input type="text" name="mycard" pattern="^\d{15}|\d{18}$" />(15位、18位数字)<br/>
		E-mail地址：
		<input type="email" name="mymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" />
		<input type="submit" value="提交" />
	</form>
</body>
</html>

重点：