1.声明和使用
@正则的声明和使用
通过构造函数定义
var 变量名= new RegExp(/表达式/);
通过直接量定义（简单方便，我们一般用这个）
var 变量名= /表达式/;
常用方法，可用于检测传入的字符串是否符合该规则并返回布尔值
exp.test("要检测的字符串")
2.预定义类
. [^\n\r] 除了换行和回车之外的任意字符
\d [0-9] 数字字符digit
\D [^0-9] 非数字字符
\w [a-zA-Z0-9_] 单词字符(所有的字母数字和_)word
\W [^a-zA-Z0-9_] 非单词字符
\s [\f\r\n\t\v] 不可见字符 space 空格也是
\S [^\f\r\n\t\v] 可见字符
转义符
\f 表示换页 form feed
\t 表示水平制表符 table
\v 表示垂直制表符 vertical table
\n /\n/ 换行符 newline\r /\r/ 回车符 return
\r,\n,\r\n的区别
在万恶的旧社会，打字机换行（\n newline）之后只会下移一行，需要回到一行的开头（\r return）才能继续打字
老式的操作系统也继承了打字机的这一特性，但用户换行之后一般都是要回到开头的，因此新式的操作系统为了方便将键盘上的Enter键的含义修改为\r\n
3.字符类
@字符类
简单类[abc] 表示该位置可以出现的字符
负向类[^abc] 表示该位置不可以出现的字符
范围类[a-e] 表示该位置可以出现的字符的范围
组合类[a-xA-E0-9] 范围类的组合2. 边界量词括号
4.边界，量词，括号
@边界
^ 会匹配行或者字符串的起始位置
^只有在[]内才表示非在外边表示开始
$ 会匹配行或字符串的结尾位置
^$在一起表示必须是这个（精确匹配）
@量词
"*" 重复零次或更多x>=0
"+" 重复一次或更多次x>=1
"?" 重复零次或一次 x=(0||1)
{n} n次 x=n
{n,} 重复n次或更多 x>=n
{n,m} 重复出现的次数比n多但比m少 n<=x<=m
@括号总结
()表示一组
[]表示一个字符的位置
{}表示次数
5. 常见项目的匹配
常见项目的匹配网上有很多（例如搜索常用正则表达式大全），无需记忆，能看懂即可
匹配国内电话号码：
/^0\d{2,3}-\d{7,8}$/
匹配姓名：
/^[\u4e00-\u9fa5]{2,}$/
匹配腾讯QQ号：
/^[1-9]\d{4,10}$/
匹配手机号：
/^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/
匹配邮箱：
/^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
<div class="container">
<label>座机</label><input type="text" id="inp1"><span></span><br>
</div>
</body>
</html>
<script>
//要做事先找人
var inpTel = document.getElementById("inp1");
//分析电话号码的规律
/*匹配电话号码：
010-12345678
0313-1234567
开头3或4位（首位为0）
后面7或8位*/
//var regEx = /^0\d\d-\d\d\d\d\d\d\d\d$/;
var regEx = /^0\d{2,3}-\d{7,8}$/;
//用户输入完成之后进行判断
inpTel.onblur = function () {
//判断用户输入并做相应操作
if (regEx.test(this.value)) {
alert("输入正确");
} else {
alert("滚");
}
}
</script>
<div class="container">
<label>姓名</label><input type="text" id="inp1"><span></span><br>
</div>
</body>
</html>
<script>
//要做事先找人
var inpName = document.getElementById("inp1");
//分析姓名的规律
// 汉字 至少两个汉字
var regEx = /^[\u4e00-\u9fa5]{2,}$/;
//用户输入完成之后进行判断
inpName.onblur = function () {
//判断用户输入并做相应操作
if (regEx.test(this.value)) {
//alert("输入正确");
this.nextSibling.innerHTML = "输入正确"; //HTML DOM nextSibling 属性, nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中
this.nextSibling.className = "right";
} else {
//alert("滚");
this.nextSibling.innerHTML = "输入错误";
this.nextSibling.className = "wrong";
}
}
</script>
<div class="container">
<label>Q Q</label><input type="text" id="inp1"><span></span><br>
<label>手机</label><input type="text" id="inp2"><span></span><br>
<label>邮箱</label><input type="text" id="inp3"><span></span><br>
<label>座机</label><input type="text" id="inp4"><span></span><br>
<label>姓名</label><input type="text" id="inp5"><span></span><br>
</div>
</body>
</html>
<script>
function $(id) {
return document.getElementById(id);
}
//要做事先找人
var inpQQ = $("inp1");
var inpMobile = $("inp2");
var inpEmail = $("inp3");
var inpTel = $("inp4");
var inpName = $("inp5");
//QQ的规律 5到11位 开头不能是0
//开头不能为0的数字
var regQQ = /^[1-9]\d{4,10}$/;
//手机号的规律 11位数字 并且有号段 13[0-9] 14[57] 15[0-9] 17[0-9] 18[0-9]
//var regMobile = /^()\d{11}$/;
var regMobile = /^(13[0-9]|14[57]|15[0-9]|17[0-9]|18[0-9])\d{8}$/;
//邮箱的规律 有@
//var regEmail = /^\w+@\w+$/;
//var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
//barack.obama@whiter-house.gov.us
var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
//座机
var regTel = /^0\d{2,3}-\d{7,8}$/;
//分析姓名的规律
// 汉字 至少两个汉字
var regName = /^[\u4e00-\u9fa5]{2,}$/;
check(inpName, regName);
check(inpQQ, regQQ);
check(inpMobile, regMobile);
check(inpEmail, regEmail);
check(inpTel, regTel);
//用户输入完成之后进行判断
function check(inp, regEx) {
inp.onblur = function () {
//判断用户输入并做相应操作
if (regEx.test(this.value)) {
//alert("输入正确");
this.nextSibling.innerHTML = "输入正确";
this.nextSibling.className = "right";
} else {
//alert("滚");
this.nextSibling.innerHTML = "输入错误";
this.nextSibling.className = "wrong";
}
}
}
</script>