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>
效果展示:
当用户名不符合规则时
当没有填写密码时
当邮箱格式不正确时