创建正则表达式： var 变量 = /正则规则/;
[a-z]: 表示匹配字母
* : 0或多个元素
+: 1个或多个元素
? : 0或1个元素
{n,m} 大于n,小于m的个数
正则方法：
test（）： 用于匹配指定的字符串. true：表示匹配成功 ； false; 表示匹配失败</br>
注意：
在js的正则表达式中，如果遇到了符合规则的内容，就代表匹配成功！
如果需要和java一样完全匹配，需要添加边界符号
开始标记： ^
结束标记： $
var str = "12abc";
var reg = /[0-9]{2}/; //这种方法，java不会通过，但是这里是能匹配的
var reg = /^[0-9]{2}$/;
if(reg.test(str)){ //这里test()是一个关键字来着，以后不能乱用
alert("成功");
}else{
alert("失败");
}
练习：
需求：
用户名： 4-14位字母或数字
密码： 6-16位的字母或数字
密码和确认密码输入一致
邮箱符合规则： 字母或数字@字母或数字.(com/cn/net/com.cn)
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//:检查用户名 (4-12位字母或数字)
function checkUserName() {
var userName = document.getElementsByName("name")[0].value;
var reg = /^\w{4,14}$/;
var nameTip = document.getElementsByName("nameTip")[0];
if (reg.test(userName)){
nameTip.innerHTML = "用户名可用";
nameTip.style.color = "green";
return true;
}else{
nameTip.innerHTML = "用户名不可用";
nameTip.style.color = "red";
return false;
}
}
//:检查密码
function checkPasswd() {
var passwd = document.getElementsByName("passwd")[0].value;
var reg = /^\w{4,16}$/;
var passwdTip = document.getElementsByName("passwdTip")[0];
if (reg.test(passwd)){
passwdTip.innerHTML = "";
return true;
} else {
passwdTip.innerHTML = "密码格式不正确";
passwdTip.style.color="red";
return false;
}
}
//:核对密码
function checkREPasswd() {
var passwd = document.getElementsByName("passwd")[0].value;
var rePasswd = document.getElementsByName("rePasswd")[0].value;
var rePasswdTip = document.getElementsByName("rePasswdTip")[0];
if (passwd == rePasswd){
rePasswdTip.innerHTML = "";
return true;
} else {
rePasswdTip.innerHTML = "两次密码不正确";
rePasswdTip.style.color="red";
return false;
}
}
//：核对邮箱
function checkEmail() {
var reg = /^\w+@[0-9a-z]{2,}(.com|.net|.cn){1,2}$/;
var email = document.getElementsByName("email")[0].value;
var emailTip = document.getElementsByName("emailTip")[0];
if (reg.test(email)){
emailTip.innerHTML = "";
return true;
}else{
emailTip.innerHTML = "邮箱格式不正确";
emailTip.style.color = "red";
return false;
}
}
//:点击提交前的检测
function checkAll() {
if (checkUserName() && checkPasswd() && checkREPasswd() && checkEmail())
return true;
else
return false;
}{
}
</script>
</head>
<body>
<form action="./demo03.html" method="get" onsubmit="return checkAll()">
<table>
<tr>
<td>用户名：</td>
<td><input name="name" type="text" placeholder="请输入您的用户名" onblur="checkUserName()"></td>
<td><span name="nameTip"></span></td>
</tr>
<tr>
<td>密码：</td>
<td><input name="passwd" type="password" placeholder="请输入您的密码" onblur="checkPasswd()"></td>
<td><span name="passwdTip"></span></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input name="rePasswd" type="password" placeholder="请确认您的密码" onblur="checkREPasswd()"></td>
<td><span name="rePasswdTip"></span></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input name="email" type="email" placeholder="请输入您的邮箱" onblur="checkEmail()"></td>
<td><span name="emailTip"></span></td>
</tr>
</table>
<input type="submit" value="提交">
</form>
</body>
正则表达式.gif
