正则得介绍和使用——表单验证

1、正则的概念

　　（1）js这门语言一开始诞生得目的是什么？

　　　　　　就是为了做表单验证。在JS未出现以前，表单的信息验证需要传输给后台，让后台做数据验证处理之后，再返回给前端页面处理的结果。在带宽有限的情况下，整个验证过程非常复杂，且耗时。 　　　　　　在使用JS做验证的过程中，一个简单的验证规则的实现非常的麻烦。     　　　　　如：从杂乱的字符串中找数字

var str = "asd68asd687as6da78sd123123zcacas"
var linshi='';
var arr=[]
for(var i = 0 ; i < str .length ; i ++){
if(str.charAt(i)>=0&&str.charAt(i)<=9){
linshi+=str.charAt(i)
}else{
if(linshi!=''){
arr.push(linshi)
}
}
}
if(linshi!=''){
arr.push(linshi)
}
console.log(arr)

　　　　　　如果我们使用正则呢？

var arr = str.match(/\d+/g);

  　　　　　是的使用正则和使用传统的js代码都可以实现这个功能，但是是不是太繁琐了。

　　（2）、什么是正则？

 　　　　　正则表达式（regular expression）是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个字符，将匹配的字符做替换或者从某个字符串中取出某个条件的子串等。 　　　　　　         　　　正则表达式：        　　　 正则表达式其实就是一种规则，其实把正则称作规则表达式更为恰当。正则的语法基于一种古老的perl语言。

　　（3）、为什么要使用正则呢？　　

　　　　　前端往往有大量的表单数据校验工作，采用正则表达式会使得数据校验的工作量大大减轻。常用效果：邮箱，手机号，身份证号等（使用熟练的情况下）

　　　　　正则的使用理念：

    　　　   任何程序都可以不用正则表达式写出来，但根据懒人原则，怎么做不言而喻。    2.正则的创建方式 　　正则的创建方式： 　　（1）.构造函数方式

var reg1 = new RegExp("a");
var str = "adassdfsd";
console.log(str.match(reg1))        //输出匹配a的字符

　　（2）.字面量方式，古老的perl语言风格

var reg2 = /a/;
console.log(str2.match(reg2));      //输出匹配a的字符

　　（3）常用的正则表达式

/*
　　　　/ / 是正则表达式的标识符

　　　　" " 是字符串的标识符
　　　　[ ] 是数组的标识符
　　　　{ } 是对象的标识符

　　　　正则中的修饰符，写在正则表达式后面／的后面：
　　　　g表示全局匹配，查找所有
　　　　i表示忽略大小写

　　　　\d 匹配所有的数字
*/
　　　　var reg = /\d/g;
　　　　console.log(str.match(reg)) //打印字符串中所有的数字

/* 　　+ 若干，量词，表示多少个都可以，至少1个，无上限*/

　　　　var reg = /\d+/g;
　　　　console.log(str.match(reg)) //打印字符串中所有的数字,连续

/* 　　 | 表示或，类似于js中的 || */
　　　　var reg = /abc|bbc|cbc|dbc/g
　　　　console.log(str.match(reg)); //打印字符串中的abc，bbc，cbc，dbc
　　　　var reg = /[a-c]bc/g

/*　　　[ ] 中元符*/
　　　　var reg = /[a-z]/ //匹配所有字母
　　　　[0-9] == \d
/* 　　^ 排除（除了）*/
　　　　var reg = /[^0-9]/ //表示除了数字之外所有

/*　　 . 代表所有，不建议使用*/
　　　　var reg = /<.+>/g
　　　　console.log(str.replace(reg,"")) //过滤，表示尖括号里面的东西不要，但是？
//　　　正则的贪婪定律：
　　　　var reg = /<[^<>]+>/g
　　　　console.log(str.replace(reg,"")) //表示尖括号里面的东西不要，真
/*
　　　　转义字符：
　　　　\d —— [0-9] 数字
　　　　\w —— [a-z0-9_] 数字，字母，下划线
　　　　\s —— 空白字符（空格）

　　　　\D —— [^0-9] 非数字
　　　　\W —— [^a-z0-9_] 非数字，字母，下划线
　　　　\S —— 非空白字符

　　　　量词：限定符，可以指定正则表达式的一个给定组，必须要出现多少次才能满足匹配
　　　　* 匹配前面的子表达式零次或多次
　　　　+ 匹配前面的子表达式至少一次或多次
　　　　? 匹配前面的子表达是零次或一次
　　　　{n} 匹配确定n次
　　　　{n,} 至少匹配n次
　　　　{n,m} 至少匹配n次，最多匹配m次

　　　　注：在限定符后紧跟？，则由贪婪匹配变成非贪婪匹配
*/

http://tool.oschina.net/uploads/apidocs/jquery/regexp.html tip：推荐的一个正则表达式手册   3.字符串.replace(oldstr, newstr)函数 和 字符串.match(正则)函数 　　字符串的replace函数的功能：将老字符串替换成新字符串 　　可以利用此函数，将老字符串表示成正则表达式，对字符串进行替换 　　如：字符串中的abc替换成“哈哈”，如果正则后面没有g，则只替换一个，如果没有i，则大写不会替换

var str = “abc123abc456abbcdABCefaacbcdbcabc";
var reg = /abc/g;
console.log(str.replace(reg,"哈哈"));

tip：字符串match函数的功能：提取所有的想要的东西，返回一个数组，包含所有符合条件的字符。

tip：看一些小练习

// qq号验证规则:
var reg = /[1-9]\d{4,10}/

//固化的规则：0411-6666888
//规则：开头为0或者2的或者三位数字加上-开头为非零的八位数字，结尾是1到4的分机号
var reg = /(0\d{2,3}-)?[1-9]\d{7}(-\d{1,4})?/

//复杂邮箱的规则：英文数字下划线@一串英文或数子.一串英文
var reg = /\w+@[a-z0-9]+\.[a-z]+/i
//想要校验怎么办？在正则转义字符前加上\

//删除多余空格
str.replace(/\s+/g,'');

//删除首尾空格
str.replace(/^\s+/,'');
str.replace(/\s+$/,'');

//检查邮政编码  共 6 位数字，第一位不能为 0
/^[1-9]\d{5}$/

//ps：规则可以自己定，也可以别人定，我们自己写的练习当然是我们自己定，但是以后定规则一定要跟你产品经理沟通好，不是你想怎么定就怎么定。

 4、正则的方法

    正则.test(字符串)方法，返回值是true和false     正则.test(字符串)有一个特性，就是只要字符串的一部分符合要求，那么就会返回true 　解决方法： 在正则的一开始加上^表示开始 在正则的结尾处加上$表示结束 tip:exec()找到了返回数组，找不到反回null   5、我们常用的检测方式

//（1）.中文检测
//unicode编码中文监测：
/^[\u2E80-\u9FFF]+$/

//（2）.用户名检测
/^[a-z0-9_-]{3,16}$/

//（3）邮箱检测
/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
//     可以多次出现 (字母数字下划线.-)@可以出现多个(数字字母.-).2到6位字母或.
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
//    可以有多个(字母数字)可有多个可无(.多个(字母数字))@可以多个(数字字母可   有1次可无(-数字字母))可以有多个(1或2个.多个字母)
//示例：abc123@123abc.com

//（4）URL检测
/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/
//    有1次或0次(http有1次或0次s : //) 可以多个(数字字母.-) . 2到6位(字母.) 可多个或0个 (可以多个或0个 /数字字母下划线.-) 可0或1次/

//    示例 ：http://sh.op-ta.l.baidu.com

//（5）HTML标签检测
/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
//    <多个(字母)可多个或0个(除了<的所有字符)  />
//    <多个(字母)可多个或0个(除了<的所有字符)>多个任意字符   </重复第一部分的多个字母>

//（6）自定义的html标签
/<[^<>]+>/g

6、表单及ajax综合验证-案例

规则： （1）.用户名           用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符 （2）.密码的规则        数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强 （3）.重复密码            跟第一次输入 密码一致 （4）.手机号的验证      第一位必须为1，后面再加10位数字 （5）.邮箱                数字大小写字母_- 3到12位   @  数字字母 2到9位  . 字母2到5位 （6）.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳  

tip：写的很简陋的一个表单验证，最后没有用php、mysql做后台数据的查询，因为本地服务器也看不了。

//css样式
<style>
.error{color: red;}
.success{color: green;border: 2px solid green;}
</style>

//html样式
<body>
<form action="http://www.jd.com">
<h2>注册</h2>
<p>账号:<input type="text" id="user"><span class="error"></span></p>
<p>密码:<input type="text" id="pass"><span class="error"></span></p>
<p>确认密码:<input type="text" id="validatePass"><span class="error"></span></p>
<p>手机号:<input type="text" id="phoneNum"><span class="error"></span></p>
<p>邮箱:<input type="text" id="email"> <span class="error"></span></p>
<input type="submit" id="btn" value="提交注册信息">
</form>
</body>

//js样式
<script>
// 每次输入框失去焦点的时候验证输入框内容; => 正确 给予正确提示，错误给予提示;
// 当点击提交按钮的时候，所有输入项要正确验证才可跳转; 数组 里面所有的项都验证成功;
var aValidate = [false,false,false];//验证数组;
function $(id){
return document.getElementById(id);
}
var oBtn = $("btn");
var oUser = $("user");
var oPass = $("pass");
var oValidatePass = $("validatePass");
oUser.onblur = function(){
var sUser = oUser.value;
var reg = /^[a-z0-9_\-\u4e00-\u9fa5]{4,20}$/gi
//console.log(sUser);
if(reg.test(sUser)){
//符合规则;
oUser.className = "success";
oUser.nextElementSibling.innerHTML = "";
aValidate[0] = true;
}else{
//console.log(oUser.nextElementSibling);
oUser.className = "error";
oUser.nextElementSibling.innerHTML = "支持中文、字母、数字、“-”“_”的组合，4-20个字符";
aValidate[0] = false;
}
}
//判定密码难度
oPass.onblur = function(){
var sPass = oPass.value;
var reg = /^[^\\*\u4e00-\u9fa5]{6,20}$/
if(reg.test(sPass)){
//验证成功;
// 验证密码强度;
// 三个判断分别加分 =>
//1.有数字 加一分;
//2.有字母 加一分;
//3.有特殊符号加一分;
var mark = 0;
//判定是否有数字;
var hasNum = /\d/g
if(hasNum.test(sPass)){
mark++;
}
var hasLetter = /[a-z]/gi
if(hasLetter.test(sPass)){
mark++;
}
var hasSymbol = /[!@#\$%\^\.]/g
if(hasSymbol.test(sPass)){
mark++;
}
switch(mark){
case 1:
oPass.style.border = "2px solid #f10";
oPass.nextElementSibling.innerHTML = "密码安全度低,建议使用组合密码!";
break;
case 2:
oPass.style.border = "2px solid yellow";
oPass.nextElementSibling.innerHTML = "密码中等,建议使用组合密码!";
break;
case 3:
oPass.style.border = "2px solid green";
oPass.nextElementSibling.innerHTML = "你别把自己密码忘了!";
setTimeout(function(){
oPass.nextElementSibling.innerHTML = "";
}, 1000);
}
oPass.className = "";
aValidate[1] = true;
}else{
oPass.className = "error";
oPass.style.border = "1px solid #000";
oPass.nextElementSibling.innerHTML = "请输入符合规则的密码";
aValidate[1] = false;
}
}
oValidatePass.onblur = function(){
if(oValidatePass.value == oPass.value){
//正确
oValidatePass.style.border = "1px solid #ddd";
oPass.style.border = "1px solid #ddd";
oValidatePass.nextElementSibling.innerHTML=""
aValidate[2] = true;
}else{
//错误;
oValidatePass.style.border = "2px solid red";
oValidatePass.nextElementSibling.innerHTML="密码输入不一致";
oPass.style.border = "2px solid red";
aValidate[2] = false;
}
}
oBtn.onclick = function(event){
// 是否必填选项选中;
var isAllValidate = false; //是否全部验证通过;
for(var i = 0 ; i < aValidate.length ; i++){
if(aValidate[i] == false){
var evt = event || window.event;
if(evt.preventDefault){
evt.preventDefault()
}else{
window.event.returnValue = false;
}
break;
}
}
}
</script>