① 判断 String 是否符合正则要求
patt.test(String);
【例】表单提交:
a.用户名不能为空,只能是数字及字母,6-11位
b.email 不能为空且格式正确
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:400px;
height:400px;
border:0;
border-collapse: collapse;
background:orange;
} td{
border: 1px solid gray;
cursor:pointer;
}
</style>
</head>
<body>
<form action="">
<p>用户名:<input type="text" name="username" id=""></p>
<p>Email:<input type="text" name="email" id=""></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
<script>
document.getElementsByTagName("form")[0].onsubmit = function(){
var patt = /^[a-zA-Z0-9]{6,11}$/;
if(!patt.test(document.getElementsByName("username")[0].value)){
alert("用户名只能是6-11位数字及字母组成");
return false;
} patt = /^[a-zA-Z0-9\.-]+@\w+(\.\w+)+$/; //域名不能有_,可以有-
if(!patt.test(document.getElementsByName("email")[0].value)){
alert("邮箱错误");
return false;
}
}
</script>
</html>
注意:js 正则表达式 // 外面不要加单引号,这点与 php 不同。
② 找出字符串中符合正则的子串
patt.exec(String);
【例】查出含有邮箱的人,给这些人的名字标红
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:400px;
height:400px;
border:0;
border-collapse: collapse;
background:orange;
} td{
border: 1px solid gray;
cursor:pointer;
}
</style>
</head>
<body>
<input type="button" value="标红有邮箱的人">
<ul>
<li>袁绍</li>
<li>曹操</li>
<li>孙坚<sunjian@changsha.com></li>
<li>董卓<dongzhuo@xiliang.com></li>
</ul>
</body>
<script>
function find(){
var lis = document.getElementsByTagName("li");
var i = 0;
var patt = /[a-zA-Z0-9\.-]+@\w+(\.\w+)+/;
while(i < lis.length){
if(null !== patt.exec(lis[i].innerHTML)){ //exec 匹配到值时返回匹配到的值,否则返回null
lis[i].style.color = "red";
}
i += 1; //建议使用 i += 1 代替 i ++
}
} document.getElementsByTagName("input")[0].onclick = find;
</script>
</html>