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

Posted xushipobk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了正则得介绍和使用——表单验证相关的知识,希望对你有一定的参考价值。

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次

    注:在限定符后紧跟?,则由贪婪匹配变成非贪婪匹配
*/
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]\\d4,10/

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

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

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

    //删除首尾空格
    str.replace(/^\\s+/,‘‘);
    str.replace(/\\s+$/,‘‘);
 
    //检查邮政编码  共 6 位数字,第一位不能为 0
    /^[1-9]\\d5$/

    //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:写的很简陋的一个表单验证,最后没有用phpmysql做后台数据的查询,因为本地服务器也看不了。

    //css样式
    <style>
        .errorcolor: red;
        .successcolor: 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>

 

 

 

 

 

 

以上是关于正则得介绍和使用——表单验证的主要内容,如果未能解决你的问题,请参考以下文章

表单校验

正则表达式验证表单

JS之正则表达式

表单正则验证及文件上传验证

form表单验证和事件正则表达式

form表单验证和事件正则表达式