一、正则表达式
1.1 正则表达式创建方式
语法1:
/正则表达式/模式
语法2:
re=new RegExp("正则表达式","模式")
1.2 js中的正则和java中的正则区别
java中的正则表达式是写在双引号中,
js中的正则表达式是写在双斜杠中的。
1.3 正则表达式常用的方法
1.3.1 test()
test 使用正则对象去匹配字符串, 如果匹配成功返回true ,
匹配失败返回false
1.3.2 exec()
exec 根据正则表达式去查找字符串中符合规则的字符串
>>>>>> 查找字符串中相符的字符串
var str="da jia hao hao xue xi a";
var reg=/\b[A-Z]{3}\b/ig; //忽略大小写
var line=reg.exec(str)
alert(line)// jia
>>>>>> 查找字符串中所有相符的字符串
<body>
</body>
<script type="text/javascript">
var str="da jia hao hao xue xi a";
var reg=/\b[A-Z]{3}\b/ig; //忽略大小写
var line="";
while((line=reg.exec(str))!=null){
document.write(line)
document.write("<br/>")
}
</script>
1.4 单词边界匹配器
\b正则表达式\b 表示这个正则为一个单词
eg:var reg=/\b[A-Z]{3}\b/ig; //忽略大小写
1.5 模式
g 全文查找出现的所以的正则
i 忽略大小写
没有加模式i,则匹配为false。如例1。加上模式i,匹配为true,如例2
例1:
var str="121212asd";
var reg=/^[A-Z0-9]+$/;
var b=reg.test(str)
alert(b)// false
例2
var str="121212asd";
var reg=/^[A-Z0-9]+$/i; //忽略大小写
var b=reg.test(str)
alert(b)// true
1.6 正则细节
>>>>>> 正则只要匹配到字符串的一部分就返回true,而不是匹配整个字符串相符才返回true。
var str="121212asd";
var reg=/[0-9]+/;
var b=reg.test(str)
alert(b)// true
>>>>>> 如果正则想匹配整个字符串则要加上边界匹配器
^ 表示字符串的开始
$ 表示字符串的结束
var str="121212asd";
var reg=/^[0-9]+$/;
var b=reg.test(str)
alert(b)// false
常用的正则
验证邮箱:
var reg=/^[a-z0-9]\w+@[a-z0-9]+(\.[a-z0-9]+){1,2}$/ig
二、正则表达式的应用 – 表单验证
2.1 表单的onsubmit事件的应用
表单提交时,会触发onsubmit事件,如果onsubmit事件的方法返回的是true,
那么该表单提交成功,否则失败。
onsubmit绑定函数时,要return该方法
<form action="success.html" method="get" onsubmit="return test()">
onsubmit绑定的方法返回false,点击提交按钮时,提交失败。
<body>
<form action="success.html" method="get" onsubmit="return test()">
<input type="text" name="k"/>
<input type="submit" />
</form>
</body>
<script type="text/javascript">
function test(){
return false;
}
</script>
obsubmit绑定的方法返回true,点击提交按钮时,提交失败。
<body>
<form action="success.html" method="get" onsubmit="return test()">
<input type="text" name="k"/>
<input type="submit" />
</form>
</body>
<script type="text/javascript">
function test(){
return true;
}
</script>
2.2 表单验证
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<style type="text/css">
.t{
text-align:center;
width:100px;
}
input{
margin-left:10px;
}
</style>
</head>
<body>
<table width="500px" height="400px"style="margin:100px auto; table-layout:fixed; word-break:break-all;
" border="1" cellspacing="0" cellpadding="0">
<form action="success.html" method="get" onsubmit="return checkAll()">
<tr>
<td class="t">用户名:</td>
<td><input type="text" name="username" onblur="checkName()"/><span></span></td>
</tr>
<tr>
<td class="t">密码:</td>
<td><input type="password" name="pwd" onblur="checkPwd()"/><span></span></td>
</tr>
<tr>
<td class="t">确认密码:</td>
<td><input type="password" name="pwd" onblur="checkPwd2()"/><span></span></td>
</tr>
<tr>
<td class="t">邮箱:</td>
<td><input type="text" name="email" onblur="checkEmail()" /><span></span></td>
</tr>
<tr>
<td class="t">性别:</td>
<td> <input type="radio" name="sex" value="man" />男 <input type="radio" value="woman" name="sex" />女<span></span></td>
</tr>
<tr>
<td class="t">爱好:</td>
<td><input type="checkbox" name="like"/>篮球 <input type="checkbox" name="like"/>足球<span></span></td>
</tr>
<tr>
<td class="t">城市:</td>
<td>
<select name="city">
<option value="nj">南京</option>
<option value="bj">北京</option>
</select>
<span></span>
</td>
</tr>
<tr>
<td class="t">自我描述:</td>
<td><input type="textarea" rows="4" cols="8" name="self"/><span></span></td>
</tr>
<tr>
<td colspan="2" style="padding-left:400px"><input type="submit" /></td>
</tr>
</form>
</table>
</body>
<script type="text/javascript">
//校验用户名
function checkName(){
var obj=document.getElementsByName("username")[0];
var username=obj.value
var reg=/^[A-Z0-9]{6,9}$/ig
var flag=reg.test(username);
console.log(flag)
var p=obj.parentNode;
var s=p.childNodes[1]
if(flag){s.innerHTML="正确".fontcolor("green") ;return true}
s.innerHTML=" 用户名错误".fontcolor("red")
}
//校验密码
function checkPwd(){
var obj=document.getElementsByName("pwd")[0];
var pwd=obj.value
var reg=/^[A-Z0-9]{6,9}$/ig
var flag=reg.test(pwd);
console.log(flag)
var p=obj.parentNode;
var s=p.childNodes[1]
if(flag){s.innerHTML="正确".fontcolor("green") ;return true}
s.innerHTML=" 密码错误".fontcolor("red")
}
function checkPwd2(){
var obj=document.getElementsByName("pwd")[0];
var obj1=document.getElementsByName("pwd")[1];
var pwd=obj.value
var pwd1=obj1.value
var p=obj1.parentNode;
var s=p.childNodes[1]
if(pwd==""||pwd!=pwd1){
s.innerHTML=" 密码不一致".fontcolor("red")
}else{
s.innerHTML="正确".fontcolor("green");return true
}
}
//检验邮箱
function checkEmail(){
var obj=document.getElementsByName("email")[0];
var email=obj.value
//5454@qq.com 23323232@123.123.com.cn 匹配邮箱正则
var reg=/^[a-z0-9]\w+@[a-z0-9]+(\.[a-z0-9]+){1,2}$/ig
var flag=reg.test(email);
console.log(flag)
var p=obj.parentNode;
var s=p.childNodes[1]
if(flag){s.innerHTML="正确".fontcolor("green") ;return true}
s.innerHTML=" 邮箱格式错误".fontcolor("red")
}
//表单提交时,重新检查表单项
function checkAll(){
var f=checkName();
var f1=checkPwd();
var f2=checkPwd2();
var f3=checkEmail();
return f&&f1&&f2&&f3?true:false;
}
</script>
</html>
</script>
</html>