正则表达式
位置:
^ 开头
$ 结尾
次数:
* 0或多个
+ 1或多个
? 0或1个
{n} 就是n个
{n,} 至少n个
{n,m} 最少n个,最多m个
通配符:
\d 任意数字
\D 任意非数字
\s 任意空白
\S 任意非空白
. 任意字符(除'\n'外)
组合:
[a-z]
[0-9]
等
组:
(正则) 匹配括号中正则表达式对应的结果,并暂存这个结果。
(?:正则) 匹配括号中正则表达式对应的结果,但不暂存这个结果。
\数字 使用第n个组匹配的结果
使用正则的工具(RegExp类与相关方法)
创建:
// 方式一
var regex = new RegExp("正则表达式", "标志");
// 方式二
var regex = /正则表达式/标志
参数说明:
正则表达式:
参见上面的规则
标志:
g (全文查找出现的所有 pattern)
i (忽略大小写)
m (多行查找)
方法:
Regexp.test( str )
String.replace( regex, str )
校验表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script>
//用户名的规则:第一位是字母,只有由数字与字母组成,6位。 function checkName(){ //获取到了用户名的值 var userName = document.getElementById("username").value; var userSpan = document.getElementById("userId"); var reg = /^[a-z][a-z0-9]{5}$/i; if(reg.test(userName)){ //符合规则 userSpan.innerHTML="正确".fontcolor("green"); return true; }else{ //不符合规则 userSpan.innerHTML="错误".fontcolor("red"); return false; } }
//校验密码 6位 function checkPass(){ var password = document.getElementById("pwd").value; if(password.length>0){ var reg = /^\w{6}$/; var passSPan = document.getElementById("passId"); if(reg.test(password)){ //符合规则 passSPan.innerHTML="正确".fontcolor("green"); return true; }else{ //不符合规则 passSPan.innerHTML="错误".fontcolor("red"); return false; } }
}
//检验密码是否正确 function ensurepass(){ var password1 = document.getElementById("pwd").value; //第一次输入的密码 var password2 = document.getElementById("ensurepwd").value; if(password2.length>0){ var enSpan = document.getElementById("ensure"); if(password1.valueOf()==password2.valueOf()){ enSpan.innerHTML="正确".fontcolor("green"); return true; }else{ enSpan.innerHTML="错误".fontcolor("red"); return false; } } }
//校验邮箱 function checkEmail(){ var email = document.getElementById("email").value; var reg = /^[a-z0-9]\w+@[a-z0-9]{2,3}(\.[a-z]{2,3}){1,2}$/i; // .com .com.cn var emailspan = document.getElementById("emailspan"); alert(reg.test(email)); if(reg.test(email)){ //符合规则 emailspan.innerHTML="正确".fontcolor("green");
return true; }else{ //不符合规则 emailspan.innerHTML="错误".fontcolor("red"); return false; } }
//校验兴趣爱好:至少要算中其中的一个。 function checkHoby(){ var likes = document.getElementsByName("like"); var hobySpan =document.getElementById("hobbySpan") var flag = false; for(var i = 0 ; i<likes.length ; i++){ if(likes[i].checked){ flag =true; break; } }
if(flag){ //符合规则 hobySpan.innerHTML="正确".fontcolor("green"); return true; }else{ //不符合规则 hobySpan.innerHTML="错误".fontcolor("red"); return false; } }
//总体校验表单是否可以提交了 如果返回的true表单才可以提交。上面的表单项必须要每个都填写正确。 function checkForm(){ var userName = checkName(); var pass = checkPass(); var ensure = ensurepass(); var email = checkEmail(); var hoby = checkHoby(); if(userName&&pass&&ensure&&email&&hoby){ return true; }else{ return false; }
}
</script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>正则表达式</title> </head> <body> <form action="success.html" method="get" οnsubmit="return checkForm()"> <!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交,如果返回的是true允许提交 --> <table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px"> <tr> <td width="25%">姓名:</td> <td> <input type="text" name="username" id="username" οnblur="checkName()"/> <span id="userId"></span> </td> </tr> <tr> <td >密码:</td><td> <input type="password" name="pwd" id="pwd" οnblur="checkPass()"/> <span id="passId"></span> </td> </tr> <tr> <td>确认密码:</td><td> <input type="password" name="ensurepwd" id="ensurepwd" οnblur="ensurepass()" /> <span id="ensure"></span> </td> </tr> <tr> <td>邮箱</td><td> <input type="text" name="email" id="email" οnblur="checkEmail()"/> <span id="emailspan"></span>
</td> </tr> <tr> <td>性别</td><td> <input type="radio" checked="ture" name="gender" id="male" value="male"/> 男 <input type="radio" name="gender" value="female"/>
女</td> </tr>
<tr> <td>爱好:</td><td> <input type="checkbox" checked="checked" name="like" /> eat <input type="checkbox" name="like" /> sleep <input type="checkbox" name="like"/> play <span id="hobbySpan"></span> </td> </tr> <tr> <td>城市</td><td> <select name="city" id="city"> <option value=""> 请选择</option> <option value="bj">北京 </option> <option value="gz">广州 </option> <option value="sh">上海 </option> </select>
</td> </tr> <tr> <td>自我介绍</td><td> <textarea cols="15" rows="5" name="myInfo" id="myInfo"></textarea></td> </tr> <tr align="center"> <td colspan="2"><!--提交按钮--> <input type="submit"/> </td> </tr> </table> </form> </body> </html> |