HTML5学习笔记3-正则表达式

最新推荐文章于 2023-07-06 21:02:32 发布

糯米味儿的粽子

最新推荐文章于 2023-07-06 21:02:32 发布

阅读量1k

点赞数 1

分类专栏： # HTML

本文链接：https://blog.csdn.net/emmm520/article/details/119682511

版权

正则表达式 HTML5 表单验证字符匹配语法示例

关键词由CSDN通过智能技术生成

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML5学习笔记3-正则表达式

正则表达式的概念

正则表达式，又称规则表达式**。**（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本，比如校验指定的字符串是否是手机号，邮箱，网址等。

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

以上源自百度百科正则表达式_百度百科 (baidu.com)

正则表达式的语法规则

让我们用举例说明的方式来弄清正则表达式的语法规则

[a]：指定的字符串只有唯一字符’a’；
[abc]：指定的字符串只能有一个字符，并且这个字符只能是’a’或’b’或’c’。可见，一个"[]"代表一个字符；
[abc] [123]：指定的字符串恰好有两个字符，第一个字符只能是’a’或’b’或’c’，第二个字符只能是’1’或’2’或’3’；
[0123456789]：指定的字符串只能有一个字符，且这个字符必须是数字。可以简化为[0-9]或者"\d";
[abc]{2}：指定的字符串恰好有2个字符，这两个字符都只能是’a’或’b’或’c’;
[1] [35789]\d{9}：指定字符串只能有1+1+9=11个字符，第一个字符必须为"1",第二个字符只能为[]内的数字中的一个，剩下9个字符必须是数字，此正则表达式可用于手机号码校验。
[abc]{3 , }：指定字符串的字符个数至少为三位，且每一位必须是[]中字符中的一个。
[123]{2,4}：指定字符串的字符个数至少为2，且至多为4，且每一位都必须是[]中的某一个。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正则表达式1</title>
</head>
<body>
	
	<form action="">
		<!-- input下有一个属性pattern,在pattern下可书写正则表达式 -->
		<!-- required属性表示是否为必须 -->

		<!-- 规定：用户名只能是大小写字母，且在3-12位之间 -->
		用户名：<input type="text" name="username" pattern="[a-zA-z]{3,12}" required="required"><br>
		<!-- 规定：密码只能是数字，且长度为6-12位之间 -->
		密码：<input type="password" name="password" pattern="\d{6,12}" required="required"><br>
		<input type="submit" value="登录"><br>
	</form>

</body>
</html>

当我们的用户名不符合规则时，演示效果为：
在这里插入图片描述
当用户名符合规则，密码缺失时：

当用户名符合规则，密码不符合规则时：

案例：表格+表单+正则表达式

表格标签+表单标签+正则表达式综合案例

使用表格标签布局

使用表单标签展示效果

使用正则表达式进行数据校验

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格+表单+正则表达式综合</title>
</head>
<body>
	<!-- 快捷方式table>(tr>td*2)*5tab -->
	<table border="1px" cellspacing="0px">
        <!-- 切记不要忘了form标签，表单必须放在form中 -->
		<form action="">
			<tr>
				<td>用户名</td>
				<td>
					<!-- placeholder:可在输入框中显示提示符 -->
	                <input type="text" name="username" pattern="[a-zA-z]{3,12}" required="required" placeholder="请输入3-12位大小写字母 ">
				</td>
			</tr>
			<tr>
				<td>密码</td>
				<td>
					<input type="password" name="password" pattern="\d{3,12}" required="required" placeholder="请输入3-12位数字">
				</td>
			</tr>
			<tr>
				<td>手机号</td>
				<td>
					<input type="text" name="phone" pattern="[1][3578]\d{9}" required="required" placeholder="请输入11位手机号">
				</td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td>
					<!-- html5有邮箱格式email，因此只需type="email"即可 -->
					<input type="email" name="email" placeholder="请输入邮箱号">
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="注册">
					<!-- 在表单中，重置有自己的类型，为reset，重置会将内容清空-->
					<input type="reset" value="重置">
				</td>
				
			</tr>
		</form>
	</table>
</body>
</html>

效果展示：

在这里插入图片描述
当用户名不符合规则时

当没有填写密码时
在这里插入图片描述

当邮箱格式不正确时
在这里插入图片描述

糯米味儿的粽子

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记3-正则表达式

HTML5学习笔记3-正则表达式正则表达式的概念正则表达式，又称规则表达式**。**（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本，比如校验指定的字符串是否是手机号，邮箱，网址等。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。以上源自百度百科正则表达
复制链接

扫一扫