首页 > 代码库 > 正则表达式初识及简单的案例应用

正则表达式初识及简单的案例应用

正则表达式

正则表达式首先是一个表达式,有一定的规则,也叫规则表达式
  按照一定的规则来匹配字符串的这样的表达式,叫做正则表达式
正则表达式是由好多的符号组成的
作用:匹配字符串
正则表达式的符号----元字符,分为限定符

正则表达式的是应用之一是验证表单元素


元字符:
. 除了\n以外任意一个单个字符串

[ ]表示的是范围  或干掉原有正则符号的意义

 [0-9] 0到9之间任意一个数字,包括0和9

 [a-z] a-z任意一个小写字母
 [A-Z] 大写字母

[0-9a-zA-Z] 所有字母和数字中的一个

[0-9]{2} {}这个特殊符号前面表达式出现的次数
[0-9]{1,2} 大括号前面表达式出现最少1 最多2次
 [a-z]{0,1} 大括号前面表达式出现0-1次

{0,1} 前面的表达式出现最少0 最多1 ?
 {1,}  前面表达式出现最少1次,最多无限次 +
{0,}  前面表达式出现最少0次,最多无限次 *

 ? 前面的表达式出现0到1次
 + 前面表达式出现1到无限次
 * 前面表达式出现到无限次

 | 或者的意思 优先级最低

 () 小括号 提升优先级 作用:分组 从最左边开始算起

\d 数字中的一个
 \D 非数字 [^0-9]非数字
 \d\D

 \s 空白符
 \S 非空白符

 \w 非特殊字符 _属于非特殊字符
 \W 特殊字符

 ^ 以什么开始^[fw1]   取反 [^a1d223]  [^0-9]非数字 \D
$ 以什么结束[0-9][a-z]$


 ^[0-9]{2,4}$-----严格匹配

 [*]---干掉原有正则符号*的意义

 \b 单词的边界 "what are you doing"--->what

案例1:利用正则表达式验证座机号码

请输入座机号:<input type="text" value="" id="txt">

<script>
my$("txt").onblur = function () {
var reg = /^[0-9]{3,4}[-][0-9]{7,8}$/;
if (reg.test(this.value)) {
this.style.backgroundColor = "gray";
}
else {
this.style.backgroundColor = "red";
}
}
</script>

案例2:利用正则表达式验证邮箱输入形式是否正确<body>
请输入您的邮箱:<input type="text" value="" id="txt"/>
<script>
my$("txt").onblur = function () {
var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z]+([.][a-zA-Z]+){1,2}$/;
if (reg.test(this.value)) {
this.style.backgroundColor = "gray";
}
else {
this.style.backgroundColor = "red";
}
};
</script>

案例3:用正则表达式验证注册表单
<div class="container" id="dv">
<label>Q Q</label><input type="text" id="qq"><span></span><br/>
<label>手机</label><input type="text" id="phone"><span></span><br/>
<label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
<label>座机</label><input type="text" id="telephone"><span></span><br/>
<label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>
<script>
function checkInput(element,reg) {
element.onblur = function () {
if (reg.test(this.value)) {
this.nextElementSibling.innerHTML = "ok";
this.nextElementSibling.style.color = "green";
}
else {
this.nextElementSibling.innerHTML = "It‘s wrong!";
this.nextElementSibling.style.color = "red";
}
};
}
var reg1 = /^\d{6,12}$/;
checkInput(my$("qq"),reg1);
checkInput(my$("phone"),/^\d{11}$/);
checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9A-Za-z]+([.][a-zA-Z]+){1,2}$/);
checkInput(my$("telephone"),/^[0-9]{3,4}[-][0-9]{7,8}$/);
checkInput(my$("fullName"),/^[\u4E00-\u9FA5]{2,6}$/);
</script>

正则表达式初识及简单的案例应用