JS库函数~正则表达式及表单、ip验证实例
本文内容：
1.什么是正则表达式？
2.正则表达式限定符、选择匹配符、字符匹配符
3.常用的正则表达式
4.创建RegExp对象实例的两种方式
5.String对象与正则表达式
6.使用正则表达式验证表单实例、验证ip实例
-- 什么是正则表达式？
正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。
-- 限定符
（1）{n,}：规定前面的元素或组合项至少出现n次。
（2）{n,m}：规定前面的元素或组合项至少连续出现n次，至多连续出现m次，其中n≤m，逗号和数字之间不能有空格。
（3）+：规定前面的元素或组合项必须出现一次或连续出现多次，等效于{1,}。
（4）*：规定前面的元素或组合项可以出现零次或连续多次，等效于{0,}。
（5）?：规定前面的元素或组合项出现零次或一次，等效于{0,1}。
-- 选择匹配符
选择匹配符有且仅有一个，即“|”字符，用于选择匹配两个选项之中的任意一个（就是没我们所理解的“或”）。
-- 字符匹配符
（1）[…]：匹配方括号中包含的字符集中的任意一个字符。例如，正则表达式“[abc]”，字符“a”、“b”、“c”都可以与之匹配。
（2）[…]：匹配方括号中未包含的任何字符。例如，正则表达式“[ab]”，除了字符“a”、“b”之外,其他的任何字符都可以与之匹配。
（3）[a-z]，[1-9]：匹配指定范围内的任何字符。
（4）[a-z]，[1-9]：匹配不在指定的范围内的任何字符。
（5）\d：匹配任意一个数字字符，等效于[0-9]。
（6）\D：匹配任意一个非数字字符，等效于[^0-9]。
（7）\s：匹配任何空白字符，包括空格、制表符等。
（8）\S：匹配任何非空白字符。
（9）\w：匹配任何英文字母、数字和下划线，等效于[A-Za-z0-9_]。
（10）\W：匹配任何非英文字母和数字类字符，但不包括下划线，等效于[^A-Za-z0-9_]。
（11）.：匹配除换行符\n之外的任何单字符。
-- 常用正则表达式
1．匹配身份证号码：\d{15}$|\d{18}$
2．邮箱：^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$;
3．中国的邮政编码：^\d{6}$
4．匹配字符串中的中文字符：[\u4e00-\u9fa5]
5．验证5到12位的qq号：^\d{5,12}$
-- RegExp对象
- 创建RegExp对象实例的两种方式
（1）构造函数方式
var reg=new RegExp(“表达式”,“附加参数”);
（2）普通方式
var reg=/表达式/附加参数
附加参数是可选的，用来扩展正则表达式的含义，主要有三个参数：
（1）g：全局匹配。
（2）i：用作忽略大小写的参数。
（3）m：多行匹配。
- test方法：
该方法检查一个字符串中是否存在创建RegExp对象实例时所指定的正则表达式模式，如果存在则返回true，否则返回false。
- exec方法：
exec方法使用RegExp对象实例创建时指定的正则表达式模式搜索字符串，并返回一个包含搜索结果的数组。
-- String对象与正则表达式
- match方法
String对象的match方法作用与RegExp对象的exec方法类似，它使用正则表达式模式对字符串进行搜索，并返回一个包含搜索结果的数组，传递给match方法的参数是一个RegExp对象实例，即使用正则表达式作为match方法的参数去搜索字符串；而传递给exec方法的参数是一个String类型的对象实例，即使用正则表达式对象去搜索作为exec方法参数的字符串。
语法：array=stringObj.match(regExpObject);
示例：
type="text/javascript">
var str="This is a dog,that is a cat";
var regExp=/th[a-z]{2}/gi;
var arr=str.match(regExp);
document.write(arr);
说明：
（1）正则表达式/th[a-z]{2}/gi的作用是全局匹配以th开头的4个字符，i表示不区分大小写。
（2）match()方法使用正则表达式模式对字符串进行搜索，如果在字符串中没有搜索到匹配正则表达式模式的内容，则此方法返回值是null。
- search方法
search方法利用使用正则表达式搜索，返回的是第一个匹配到的字符串在整个被搜索的字符串中的位置。如果没有找到匹配的子串则返回-1。如果是简单的搜索，可以用String对象的indexOf()方法。但对于较为复杂的模式匹配则需要使用search()方法。
语法：index=stringObj.search(regExpObject);
- replace方法
replace方法使用正则表达式模式对字符串执行搜索，并对搜索到的内容用指定的字符串替换，返回值为包含替换后的内容的字符串对象。
语法：var newStr= stringObj.replace(regExpObject);
示例：
function checkInfo(){
var str=document.getElementById("info").value;
var regExp=/[\. ]/g;
document.getElementById("info").value=str.replace(regExp,"");
}
说明：
（1）参数g用于全局替换，即所有找到的匹配都将被替换。
（2）在正则表达式中，“.”是元字符，匹配除换行符“\n”之外的任何单字符，若要匹配“.”字符本身，需要使用“.”。
-- 使用正则表达式验证表单实例
1.form表单：
<form action="#" method="post" onsubmit="return check()">
<table border="0" cellspacing="" cellpadding="">
<tr>
<td class="t1">用户名:</td>
<td ><input type="text" id="name" onblur="checkName(this)"/></td>
<td class="t2">由英文字母和数字组成的4-16位字符，以字母开头</td>
</tr>
<tr>
<td class="t1">昵称:</td>
<td><input type="text" id="nicheng" onblur="checkNicheng(this)" /></td>
<td class="t2">由2-6个汉字组成</td>
</tr>
<tr>
<td class="t1">邮箱:</td>
<td><input type="text" id="email" onblur="checkEmail(this)"/></td>
<td class="t2">邮箱账号@域名，如：good@tom.com. whj@sina.com.cn</td>
</tr>
<tr>
<td class="t1">密码:</td>
<td><input type="password" id="password" onblur="checkPwd(this)" /></td>
<td class="t2">由英文字母和数字组成的4-10位字符</td>
</tr>
<tr>
<td class="t1">确认密码:</td>
<td ><input type="password" id="password1" onblur="SurePWD(this)" /></td>
<td></td>
</tr>
<tr>
<td class="t1">手机号码:</td>
<td><input type="text" id="phone" onblur="checkPhone(this)" /></td>
<td class="t2">手机号由11位数字组成，且以13、15、18开头</td>
</tr>
<tr>
<td class="t1">出生日期:</td>
<td><input type="datetime" id="birdate" onblur="checkBirDate(this)"/></td>
<td class="t2">出生日期在1900-2009之间，如：1985-3-1或1985-03-01</td>
</tr>
<tr>
<td colspan="3"><button type="submit">提交</button></td>
</tr>
</table>
</form>
2.js验证：
function checkName(obj){
var name=document.getElementById("name").value;
var nameRegExp=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
if(!nameRegExp.test(name)){
alert("错误，英文字母和数字组成的4-16位字符，以字母开头");
return false;
}
obj.parentNode.parentNode.lastElementChild.style.color="blue";
return true;
}
function checkNicheng(obj){
var nicheng=document.getElementById("nicheng").value;
var nichengRebExp=/^['\u4e00-\u9fa5']{2,6}$/;
if(!nichengRebExp.test(nicheng)){
alert("错误，由2-6个汉字组成");
return false;
}
obj.parentNode.parentNode.lastElementChild.style.color="blue";
return true;
}
function checkEmail(obj){
var email=document.getElementById("email").value;
var emailRegExp=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
if(!emailRegExp.test(email)){
alert("错误，邮箱账号@域名");
return false;
}
obj.parentNode.parentNode.lastElementChild.style.color="blue";
return true;
}
function checkPwd(obj){
var pwd=document.getElementById("password").value;
var pwdRegExp=/^[a-zA-Z0-9]{4,10}$/;
if(!pwdRegExp.test(pwd)){
alert("错误，由英文字母和数字组成的4-10位字符");
return false;
}
obj.parentNode.parentNode.lastElementChild.style.color="blue";
return true;
}
function SurePWD(obj){
var pwd1=document.getElementById("password1").value;
var pwd=document.getElementById("password").value;
if(pwd1!=pwd){
alert("两次输入密码不一致！");
return false;
}
obj.parentNode.parentNode.lastElementChild.innerHTML="密码一致";
return true;
}
function checkPhone(obj){
var phone=document.getElementById("phone").value;
var phoneRegExp=/^(13|15|18)\d{9}$/;
if(!phoneRegExp.test(phone)){
alert("错误，手机号由11位数字组成，且以13、15、18开头");
return false;
}
obj.parentNode.parentNode.lastElementChild.style.color="blue";
return true;
}
function checkBirDate(obj){
var date=document.getElementById("birdate").value;
var dateRegExp=/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
if(!dateRegExp.test(date)){
alert("错误，出生日期在1900-2009之间，如：1985-3-1或1985-03-01");
return false;
}
obj.parentNode.parentNode.lastElementChild.style.color="blue";
return true;
-- ip验证实例：
1.输入框：
输入IP地址：<input type="text" id="ip" onblur="checkIp()"/>
2.js验证：
function checkIp(){
var ip=document.getElementById("ip").value;
//var ipRegExp=/^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
var ipRegExp=/^((25[0-5]|2[0-4]\d|1?\d?\d)\.){3}(25[0-5]|2[0-4]\d|1?\d?\d)$/;
if(!ipRegExp.test(ip)){
alert("ip输入错误！");
return false;
}
alert("输入正确！");
return true;
}
