① 判断 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>