Javascript的正则表达式相关笔记（一）

1.正则表达式定义的方式有两种：内置对象定义法、字面量定义法

◆数组使用字面量定义的方式是[]、对象使用字面量定义的方式是{}、正则使用字面量定义的方式是/abc/（/占位置不能为空/）

var reg=new RegExp(/abc/);，通过new 关键字和构造函数来定义
var reg=/abc/;，通过正则表达式字面量来定义

◆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式对象</title>
</head>
<body>
<script>
    //正则表达式对象的定义

    //正则表达式定义的方式有两种：内置对象定义法、字面量定义法

    var reg1 = new RegExp(/abc/);//通过new 关键字和构造函数来定义

    var reg2 = /abc/;//通过正则表达式字面量来定义

    //使用正则表达式对象的test方法来检测是否匹配
    console.log(reg1.test("abc"));//true
    console.log(reg2.test("abc"));//true

</script>
</body>
</html>

2.正则表达式五大内部类（浏览器写好的工具直接使用）

◆预定义类

.：[^\n\r]	匹配除了\r、\n之外的任何单个字符
\d：[0-9]匹配所有数字类型的单个字符
\D：[^0-9]匹配所有非数字类型的单个字符
\s：[ \t\n\x0B\f\r]匹配所有空白的单个字符
\S：[^ \t\n\x0B\f\r]	匹配所有非空白的单个字符
\w：[a-zA-Z_0-9]匹配所有的数字类型及字母类型的单个字符
\W：[^a-zA-Z_0-9]匹配所有的非数字类型及非字母类型的单个字符

◆简单类

//中什么特殊符号都不写，如/str/，只要包含str的字符的字符串都能够匹配成功，是整个str，只能多不能少，例如str123也能匹配成功。

//中加入[]，如/[str]/，只要包含s、t、r的字符的字符串都能匹配成功，是整个str中的任何单个字符，例如 s123、t123、r123都能够匹配成功。

◆负向类

[^]：表示只要不完全等于括号中的完整字符串或者不完全等于括号中完整字符串中的任意单个字符或者多个相同字符或不同字符的组合，就算你匹配成功了，如/[^str]/，只要你的字符串中包含了str或者只有str中任意单个字符或多个字符都无法匹配成功，例如str、sssss、tttttt、rrrr、srsss、strrr、rts、tsr、rst、sr、tr、st、ts、rt、rs、s、t、r、都会匹配失败，而ts123、st123、str123、str345、s123、r123、t123、aacc123都会匹配成功，也就是说，你只能是括号完整字符串中的一部分或者全部，也可以是这个完整字符串中的任意单个字符或者多个字符的组合，甚至连长度都可以超过原来完整字符串的长度。
总结：[]表示只要包含其中之一，而[^]表示只要不完全等于其中之一或者不完全等于全部再或者不完全等于其中任意的组合。
核心：[^]，只要你匹配的字符串中有任何一个不在[^]里的字符，就算你匹配成功，只要你匹配的字符串中都是[^]里的字符组成而来，那么就算你匹配失败，这个很像是贪婪匹配，尽可能匹配所有能够匹配到的。
其它：[^abc]、[^a,b,c]、[^a-c]表示的都是一样的效果。

◆范围类

[a-z]：表示a到z之间的所有字母
[A-Z]:表示A到Z之间的所有字母
[0-9]:表示0-9之间的所有数字

◆组合类

[a-z0-9]：表示a到z之间的所有字母和0-9之间的所有数字
[a-z0-9A-Z]：表示a到z之间的所有字母和A到Z之间的所有字母和0-9之间的所有数字
[]中的-的意思是 unicode码指定范围之间的连接符，如a-z表示 97-125之间

◆[]与[^]的区别

[]表示只要匹配的字符串中有一个字符是括号里的就算匹配成功
[^]表示只要匹配的字符串中有一个字符不是括号里的就算匹配成功

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式的五大内部类</title>
</head>
<body>
<script>

    console.log("-----------------预定义类------------------");
    /*
     .：[^\n\r]	匹配除了\r、\n之外的任何单个字符
     \d：[0-9]匹配所有数字类型的单个字符
     \D：[^0-9]匹配所有非数字类型的单个字符
     \s：[ \t\n\x0B\f\r]匹配所有空白的单个字符
     \S：[^ \t\n\x0B\f\r]	匹配所有非空白的单个字符
     \w：[a-zA-Z_0-9]匹配所有的数字类型及字母类型的单个字符
     \W：[^a-zA-Z_0-9]匹配所有的非数字类型及非字母类型的单个字符
     *在没有量词的帮助下，只要有一个字符匹配成功，就匹配成功。
     */
    var reg1 = /./;
    console.log(reg1.test("1"));//true;
    var reg2 = new RegExp(/\d/);
    console.log(reg2.test("2"));//true;


    console.log("------------------简单类-------------------");
    /**
     * //中什么特殊符号都不写，
     * 如/str/，只要包含str的字符的字符串都能够匹配成功，
     * 是整个str，只能多不能少，例如str123也能匹配成功。
     */
    console.log(/str/.test("str"));//true;
    console.log(/str/.test("str1"));//true;
    console.log(/str/.test("st1r1"));//false;

    /*
     * //中加入[]，如/[str]/，
     * 只要包含s、t、r的字符的字符串都能匹配成功，
     * 是整个str中的任何单个字符，
     * 例如 s123、t123、r123都能够匹配成功
     * */
    console.log(/[str]/.test("s"));//true
    console.log(/[str]/.test("s1"));//true
    console.log(/[str]/.test("str"));//true
    console.log(/[str]/.test("123"));//false


    console.log("------------------负向类-------------------");
    /*
     * [^]：表示只要不完全等于括号中的完整字符串
     * 或者不完全等于括号中完整字符串中的任意单个字符
     * 或者多个相同字符或不同字符的组合，
     * 就算你匹配成功了，如/[^str]/，
     * 只要你的字符串中包含了str或者只有str中任意单个字符
     * 或多个字符都无法匹配成功，
     * 例如str、sssss、tttttt、rrrr、srsss、strrr、
     * rts、tsr、rst、sr、tr、st 、ts、rt、rs、s、t、r、
     * 都会匹配失败，
     * 而ts123、st123、str123、str345、s123、r123、t123、
     * aacc123都会匹配成功，也就是说，
     * 你只能是括号完整字符串中的一部分或者全部，
     * 也可以是这个完整字符串中的任意单个字符或者多个字符的组合，
     * 甚至连长度都可以超过原来完整字符串的长度。
     ★总结：[]表示只要包含其中之一，
     而[^]表示只要不完全等于其中之一或者不完全等于全部再
     或者不完全等于其中任意的组合。
     ★★核心：[^]，只要你匹配的字符串中有任何一个不在[^]里的字符，
     就算你匹配成功，只要你匹配的字符串中都是[^]里的字符组成而
     来，那么就算你匹配失败，这个很像是贪婪匹配，尽可能匹配所有
     能够匹配到的。
     * */
    console.log(/[^abc]/.test("a"));//false
    console.log(/[^abc]/.test("a2"));//true
    console.log(/[^abc]/.test("abcccc"));//false
    console.log(/[^a,b,c]/.test("1abcccc"));//true
    console.log(/[^a-c]/.test("bbb"));//false
    console.log(/[^a-c]/.test("bbb1"));//true


    console.log("------------------范围类-------------------");
    /*
     * [a-z]：表示a到z之间的所有字母
     [A-Z]:表示A到Z之间的所有字母
     [0-9]:表示0-9之间的所有数字
     * */
    console.log(/[a-z]/.test("a"));//true
    console.log(/[A-Z]/.test("A"));//true
    console.log(/[0-9]/.test("0"));//true
    console.log("------------------组合类-------------------");
    /*
     * [a-z0-9]：表示a到z之间的所有字母和0-9之间的所有数字
     * [a-z0-9A-Z]：表示a到z之间的所有字母和A到Z之间的所有字母和0-9之间的所有数字
     * []中的-的意思是 unicode码指定范围之间的连接符，如a-z表示 97-125之间
     * */
    console.log(/[a-z0-9]/.test("a09"));//true
    console.log(/[a-z0-9A-Z]/.test("Aa0"));//true
    console.log(/[A-z]/.test("aA"));//true


    /****************[]与[^]的区别******************/
    /**
     * []表示只要匹配的字符串中有一个字符是括号里的就算匹配成功
     * [^]表示只要匹配的字符串中有一个字符不是括号里的就算匹配成功
     */

</script>
</body>
</html>

3.正则边界

◆^:表示开头的边界，表示以什么什么开头
◆$:结束的边界，以什么什么结束
◆^$:表示以什么开头，以什么结束。

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式的边界</title>
</head>
<body>
<script>
    /*
     *^:表示开头的边界，表示以什么什么开头
     *$:结束的边界，以什么什么结束
     *^$:表示以什么开头，以什么结束。
     * */

    //^:表示开头的边界，表示以什么什么开头
    console.log(/^abc/.test("abc"))//true
    console.log(/^abc/.test("abcd"))//true
    console.log(/^abc/.test("1abcd"))//false

    //$:结束的边界，以什么什么结束
    console.log(/abc$/.test("abc"))//true
    console.log(/abc$/.test("1abc"))//true
    console.log(/abc$/.test("a1bc"))//false

    //^$:表示以什么开头，以什么结束
    console.log(/^abc$/.test("abc"));//true
    console.log(/^abc$/.test("1abc"));//false
    console.log(/^abc$/.test("abcc"));//false
</script>
</body>
</html>

4.量词，前面单个字符的数量

◆*：前面的内部类所代表的字符重复零次或者多次（>=0），会触发贪婪模式，尽可能的多匹配
◆+：前面的内部类所代表的字符重复一次或者多次（>=1）
◆?：前面的内部类所代表的字符重复零次或者一次（0||1），可以终止贪婪模式
◆{}：重复多少次的，{5}表示重复五次（=5）;{5,10}，重复5至10次（>=5&&<=10）;{5，},重复至少5次(>=5)。
◆|：表示满足左边或者右边都行，2|5表示2或者5。
◆()：表示提升优先级，并且也可以提取，通过$符号提取，在使用replace方法时可以提取。

◆* 等价于 {0,} + 等价于{1,} ? 等价于{0,1}

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式的量词</title>
</head>
<body>
<script>
    /**
     * 量词：前面单个字符的数量
     *  *：前面的内部类所代表的字符重复零次或者多次（>=0），
     *  会触发贪婪模式，尽可能的多匹配
     *
     *  +：前面的内部类所代表的字符重复一次或者多次（>=1）
     *
     *  ?：前面的内部类所代表的字符重复零次或者一次（0||1），
     *      可以终止贪婪模式
     *
     *  {}：重复多少次的，{5}表示重复五次（=5）;{5,10}，
     *  重复5至10次（>=5&&<=10）;{5，},重复至少5次(>=5)。
     *
     *  |：表示满足左边或者右边都行，2|5表示2或者5。
     *
     *  ()：表示提升优先级，并且也可以提取，通过$符号提取，
     *  在使用replace方法时可以提取。
     *
     *  * 等价于 {0,} + 等价于{1,} ? 等价于{0,1}
     */

        //*：前面的内部类所代表的字符重复零次或者多次（>=0），
        // 会触发贪婪模式，尽可能的多匹配
    console.log(/^abc*$/.test("ab"));//true
    console.log(/^abc*$/.test("abcabc"));//false
    console.log(/^abc*$/.test("abccc"));//true

    // +：前面的内部类所代表的字符重复一次或者多次（>=1）
    console.log(/^abc+$/.test("ab"));//false
    console.log(/^abc+$/.test("abc"));//true
    console.log(/^abc+$/.test("abcabc"));//false
    console.log(/^abc+$/.test("abccc"));//true

    //?：前面的内部类所代表的字符重复零次或者一次（0||1），
    // 可以终止贪婪模式
    console.log(/^abc?$/.test("ab"));//true
    console.log(/^abc?$/.test("abc"));//true
    console.log(/^abc?$/.test("abcc"));//false

    //{}：重复多少次的，{5}表示重复五次（=5）;{5,10}
    // 重复5至10次（>=5&&<=10）;{5，},重复至少5次(>=5)。
    console.log(/^abc{2}$/.test("abc"));//false
    console.log(/^abc{2}$/.test("abcc"));//true

    console.log(/^abc{2,4}$/.test("abcc"));//true
    console.log(/^abc{2,4}$/.test("abccc"));//true
    console.log(/^abc{2,4}$/.test("abcccc"));//true
    console.log(/^abc{2,4}$/.test("abccccc"));//false

    console.log(/^abc{2,}$/.test("abcc"));//true
    console.log(/^abc{2,}$/.test("abccc"));//true
    console.log(/^abc{2,}$/.test("abcccc"));//true
    console.log(/^abc{2,}$/.test("abccccc"));//true
    console.log(/^abc{2,}$/.test("abcccccc"));//true

    //    |：表示满足左边或者右边都行，2|5表示2或者5。
    console.log(/^2|5$/.test("2"));true
    console.log(/^2|5$/.test("5"));true
    console.log(/^2|5$/.test("3"));false

    //()：表示提升优先级，
    //    并且也可以提取，
    //    通过$符号提取，
    //    在使用replace方法时可以提取。
    console.log(/^(\d{2})|(a{3})$/.test("2"));false
    console.log(/^(\d{2})|(a{3})$/.test("22"));true

    console.log(/^(\d{2})|(a{3})$/.test("a"));false
    console.log(/^(\d{2})|(a{3})$/.test("aa"));false
    console.log(/^(\d{2})|(a{3})$/.test("aaa"));true
    console.log(/^(\d{2})|(a{3})$/.test("aaaa"));false


    console.log("123aaa456".replace(/(\d+)aaa/,"$1"));//123456
    console.log("123aaa456".replace(/^(\d+)aaa/,"($1)"));//终止贪婪模式下：(123)456

</script>
</body>
</html>

5.一些常用的正则表达式

◆匹配HTML标记的正则表达式：

< (\S*?)[^>]*>.*?|< .*? />

◆验证QQ号：

/^[1-9][0-9]{4,}$/

◆验证手机号：

/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/

◆验证邮箱：

/^[\w\-\.]+\@[\w]+\.[\w]{2,4}$/

◆验证座机号：

/^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/

◆验证用户名：

/^[a-zA-Z0-9_-]{3,16}$/

◆验证密码：

/^[\$a-zA-Z0-9_-]{6,18}$/

◆匹配人名：

/^[\u4e00-\u9fa5]{2,4}$/

◆匹配URL：

[a-zA-z]+://[^\s]*

◆匹配国内电话号码：

\d{3}-\d{8}|\d{4}-\d{7}

◆匹配中国邮政编码：

[1-9]\d{5}(?!\d)中国邮政编码为6位数字

◆匹配身份证：

\d{15}|\d{18}中国的身份证为15位或18位

◆匹配ip地址：

\d+\.\d+\.\d+\.\d+：提取ip地址时有用

◆匹配密码强度：

◇弱

/^([a-z].*[A-Z])|([A-Z].*[a-z])$/   区分大小写英文字母

◇中

/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/   带有字母 和 数字

◇强

/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/   字母数字中间 加有下划线（想要什么中括号中加）

◆匹配双字节字符(包括汉字在内)：

[^\x00-\xff]可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

6.正则表达式验证：验证中文名字+验证固定电话号码

◆汉字的unicode码的取值范围在 u4e00-u9fa5，汉字接近21000个，[\u4e00-\uf95a]匹配的是中文，其实也就是第一个汉字和最后一个汉字之间的unicode码的范围，[\u4e00-\uf95a]等价于[一-偿]，所以用这个效果一样[一-偿]，原理是在unicode码之间取值

◆正则表达式验证中文名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式验证中文名字</title>
</head>
<body>
<div>
    <label for="zhName">验证姓名：</label><input type="text" id="zhName" value="">
      <span></span>
</div>
<script>
    //需求：输入姓名 两位-四位 /[\u4e00-\4f9a5]/
    //思路：
    // 输入姓名
    // 使用正则表达式验证
    // 验证成功给出成功的样式
    // 验证失败给出失败的样式
    //步骤：
    //1.老三步


    //1.老三步

    //获取事件源及相关对象
    var zhName = document.getElementById("zhName");
    var span = zhName.nextElementSibling || zhName.nextSibling;

    //绑定事件
    zhName.onblur = function () {
//        var reg = new RegExp(/^[\u4e00-\uf95a]{2,4}$/);
        var reg = new RegExp(/^[一-偿]{2,4}$/);//

        //2.使用正则表达式验证
        if (reg.test(this.value)) {

            span.innerHTML = "恭喜你，验证成功，这是一个人的名字！";
            span.style.color = "#0f0";
        } else {

            span.innerHTML = "对不起，验证失败，这是什么鬼的名字！";
            span.style.color = "#f00";
        }
    }
</script>
</body>
</html>

◆正则表达式验证固定电话号码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式验证固定电话号码</title>
</head>
<body>
<div>
    <label for="phone">座机号：</label><input type="text" id="phone" value="">
      <span></span>
</div>
<script>
    //需求：验证座机号！
    //直辖市：三位-八位（010-82935150） /^0\d{2}-8\d{7}$/
    //普通市：四位-七位（0314-3160186）/^0\d{3}-3\d{6}$/
    //思路：
    //  当输入座机号移出焦点时，使用正则表达式验证一下，
    // 如果验证成功就添加成功的样式，反之就添加失败的样式。
    //步骤：
    // 1.老三步
    // 2.正则表达式验证成功就添加成功的样式
    // 3.正则表达式验证失败就添加失败的样式

    // 1.老三步
    //    var box=document.getElementsByTagName("div")[0];
    //获取事件源及相关对象
    var phone = document.getElementById("phone");
    var span = phone.nextElementSibling || phone.nextSibling;

    //绑定事件
    phone.onblur = function () {
        //书写事件驱动程序
        var reg = new RegExp(/^0\d{2}-8\d{7}$|^0\d{3}-3\d{6}$/);
        if (reg.test(this.value)) {
            // 2.正则表达式验证成功就添加成功的样式

            span.innerHTML = "恭喜你，输入正确！";
            span.style.color = "#0f0";
        } else {
            // 3.正则表达式验证失败就添加失败的样式

            span.innerHTML = "对不起，输入错误！";
            span.style.color = "#f00";
        }

        // bug
        //getAttribute或者getAttributeNode
        // 只能够获取页面标签字符串中属性及节点的值，
        // 并不能实时的获取，只要页面标签字符串没有，
        // 那么就获取不到返回null或者为空，
        //而通过对象.属性，可以实时获取
//        if (reg.test(phone.getAttribute("value"))) {
//            span.innerHTML = "恭喜你，输入正确！";
//            span.style.color = "#0f0";
//        } else {
//            span.innerHTML = "对不起，输入错误！";
//            span.style.color = "#f00";
//        }
    }
</script>
</body>
</html>

6.getAttribute或者getAttributeNode 只能够获取页面标签字符串中属性及节点的值，并不能实时的获取，只要页面标签字符串没有，那么就获取不到返回null或者为空，而通过对象.属性，可以实时获取。

7.字符串的search方法，str.search(/s/);和str.indexOf("s")效果一样，只不过是参数不一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式的search方法</title>
</head>
<body>
<script>
    var str = "123aaaccc";
    //字符串的indexOf方法
    console.log(str.indexOf("a"));//3
    console.log(str.search(/a/));//3
    
</script>
</body>
</html>

8.字符串的trim方法在IE678里不支持，所以有时候需要自己封装trim方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自己封装trim方法</title>
</head>
<body>
<script>

    var str ="   123  1231  121   ";
    //使用字符串的trim方法 在IE678 中不支持
    console.log(str);
    console.log(str.trim());

    //自己封装trim方法
    function trim(str){

       return str.replace(/^\s+|\s+$/g,"");//i是忽略大小写 g表示全局匹配

    }

    //面向对象
    String.prototype.trim2= function () {
        return str.replace(/^\s+|\s+$/g,"");//i是忽略大小写 g表示全局匹配
    }

    console.log(str.trim2());
    console.log(trim(str));

</script>
</body>
</html>

9.正则表达式-表单验证合集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式-表单验证合集</title>
</head>
<style type="text/css">
    body {
        background: #ccc;
    }

    label {
        width: 40px;
        display: inline-block;
    }

    .container {
        margin: 100px auto;
        width: 450px;
        padding: 50px;
        line-height: 40px;
        border: 1px solid #999;
        background: #efefef;
    }

    span {
        margin-left: 30px;
        font-size: 12px;
        padding: 2px 20px 0;
        color: #ccc;
    }

    .wrong {
        color: red;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACfklEQVQ4jaWTzUtUURjGfzNzvTPOjKKmmWl+hCaJMmBCH0oElhRtgsgU2rRyIfUHtKpN2yAIoV1Um7CMiIwiUpQWRZAfqQ0p4/htd0Yb5+Pec++d2+Z6zVp6VofDeX/nfZ/zPC7LstjLcu+pGpC2N81X+wD4VDMsi4zWY6jaFVOI40LTyWjml986L5+5Qw/fexuTQPY/AMDHqpEKPaO9lkInQt6qWlyWRnYpQio63+qZm2+9FBm9fkBa7nxc1BEGDMByRhit+CC70luDUmtHyNd2Fk82gzX9FSMyg9tUCZYVk1+c39Cw8X3gkLpcuv24AxCpdI8ndLJRbmrGfeQY0rlr6MoqWkyh8PYjSu4+wR/MJejPqbuwMNgL5AFuB6BpepenvJLs7DjqvRsABO88Zd/9NwBMt9eSXllDkiT8KeUiUADIDkDPiBaXSGDMfEMo6yi95x1tps4cJh1LkJhfJkfyQCZ51O5gB6CqGsbqEiKuoMY3KH7w1gE0DM2hpk0MgNxchJk1AB8gOYC0ZoylogvoBuzvewfAZFs1nxuLAWgNxwhU12D6AmwhRwBrl4gJwfPYXBShmwBMnKokvZlEE1mG64oACNRUosQ2WfcfHAYEYDiAF76WvqW5lR8r4SjhrtNk5QBCt7Bwk1dfT7i3k8XoGpPjs5Hhxq5+IAEIx0hDwVCyJLl4uX5+YqDAL9d5fTL+qipyCotQ3R5+/ogwOTYbGWnqvqXKeb+ATUC4tsNkWzmnPLVU2h55ddOXindIajKkmyZJT2BKCZSNjDR199vFq0Ac0P8FuGyH5dn/nA947XPVbnsT2MK28q4s2Mrq9qU0oLCTF8MWTvBXmP4AiqgZz2d4EqoAAAAASUVORK5CYII=) no-repeat;

    }

    .right {
        color: green;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACdUlEQVQ4jaWTS2hTQRSGv3uT3OQmjbSWGtFKLVLxUSiIoFJUcCGCuCo+cGNdSKFKEVo3LsSVIgiCm4Lgyp1v0Y07xU19VgXFKq2p0drYNE2ax33M3DsucptWXTqrYZj/O2f++Y+mlOJ/lv5faiC8sNlyeBiAgSsXDSFFnyudg54S26SncFz9pW0Z9z882Xtt4tXOMuD/AwDov3S51ZPyUVt8d1c8EkKRpSrnmLWL3blIqXv9rofHzebMoQ+Pj34GJKC0BQ+uf19l+J7/uiN5oLPZTDDrPqfgfsQSNvgpPC/OVLHAj3z5y9u7p/aUsm1ZQNQ9cKXTt9rc0dlkRvhpPyDvvKciKlRdwZyVIWd9ZfvKfhJmtKOt+9ZJIAnoiwAhj5gRRUg1UhJZqq6N5XjYQmEJOL3BYdeKc4RDJnostx9oBIw6QPreVo8cnfEL9KyoYgkfW4AlYHBT7ZlnXoSIhKMovbox6GARIKSPLea58d0A4ER7rfJQIB4a0VAqjFRRhNQkEAPCdYDtht7NWmWU18LVMa1WcXNNPDii4REiGmkFz0RYZhpQsCRIVjVy51epjPQTuNLg/KhWF/uECWnLaYy2UanYWPnVTwEXkHXAp2f7hqfylbGpQhFdX4Oupxgc0fEJEzfaSSW7yBeLjH9Lp7Mvem8D84BbD1JmdGfZbMr0WGvf3GtoEB1RI8Yycx0aDfjSIDszzfjkRHrm9bGznpOcAQqAWw9SEOVIomUy1brt5oAey+9V4XKX7yucavKjM7fq2cyr3tuBeBrIA+JvgBbEOxn88zIgGpzbQdsFoLQQ5T9mIXBWBJeqQI7FeZGBcS5Lhuk3jPAwTgV/38sAAAAASUVORK5CYII=) no-repeat;
    }

    .pwd {
        width: 220px;
        height: 20px;
        background: url("images/strong.jpg") no-repeat;
    }

    .str1 {
        background-position: 0 -20px;
    }

    .str2 {
        background-position: 0 -40px;
    }

    .str3 {
        background-position: 0 -60px;
    }

    .str4 {
        background-position: 0 -80px;
    }
</style>


<body>
<div class="container" id="container">
    <label for="inp1">QQ</label><input type="text" id="inp1"><span>输入正确的QQ号码</span><br>
    <label for="inp2">手机</label><input type="text" id="inp2"><span>输入13位手机号码</span><br>
    <label for="inp3">邮箱</label><input type="text" id="inp3"><span>输入正确邮箱</span><br>
    <label for="inp4">座机</label><input type="text" id="inp4"><span>输入您的座机</span><br>
    <label for="inp5">账号</label><input type="text" id="inp5"><span>亲输入您的账号</span><br>
    <label for="inp6">密码</label><input type="text" id="inp6"><span>请输入您的密码</span><br>
    <div id="password" class="pwd"></div>
</div>
<script>
    //需求：
    // 验证如下，
    // 验证成功后给出提示，
    // 验证失败给出提示，
    // 最后验证密码强度，
    // 显示强度图片

    // 验证QQ    验证QQ号：/^[1-9][0-9]{4,}$/
    // 验证手机  验证手机号：/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/
    // 验证邮箱  验证邮箱：/^[\w\-\.]+\@[\w]+\.[\w]{2,4}$/
    // 验证座机  验证座机号：/^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/
    // 验证账号  验证用户名：/^[a-zA-Z0-9_-]{3,16}$/
    // 验证密码  验证密码：/^[\$a-zA-Z0-9_-]{6,18}$/
    // 匹配密码强度：
    // 【
    //    弱 /^([a-z].*[A-Z])|([A-Z].*[a-z])$/
    //    区分大小写英文字母

    //    中/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/
    //    带有字母 和 数字

    //    强/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/
    //    字母数字中间 加有下划线（想要什么中括号中加）
    // 】
    //思路：
    // 获取所有的表单，
    // 然后绑定事件，
    // 使用正则表达式验证，
    // 最后添加相应的类样式。
    //步骤：
    //1.获取事件源及相关元素对象
    //2.绑定事件
    //3.书写事件驱动程序

    //1.获取事件源及相关元素对象
    var container = document.getElementById("container");
    var inp1 = document.getElementById("inp1");
    var inp2 = document.getElementById("inp2");
    var inp3 = document.getElementById("inp3");
    var inp4 = document.getElementById("inp4");
    var inp5 = document.getElementById("inp5");
    var inp6 = document.getElementById("inp6");
    var password = document.getElementById("password");
    //2.绑定事件
    //三种方式 绑定事件

    //第一种  直接绑定
    //    inp1.onblur = function () {
    //        var span = inp1.nextElementSibling || inp1.nextSibling;
    //        if (this.value.length != 0) {
    //            if (/^[1-9][0-9]{4,}$/.test(this.value)) {
    //                span.className = "right";
    //                span.innerHTML = "恭喜你,输入正确!";
    //            } else {
    //                span.className = "wrong";
    //                span.innerHTML = "对不起，输入错误！";
    //            }
    //        } else {
    //            span.className="";
    //            span.innerHTML = "输入正确的QQ号码";
    //        }
    //    }
    //

    //    //第二种 onblur事件不会冒泡  所以以事件委托的方式  操作失败
    //    container.onblur = function (event) {
    //
    //        //获取兼容性的事件对象
    //        event = event || window.event;
    //
    //        //获取兼容性的事件源对象
    //        var obj = event.target || event.srcElement;
    //
    //        //判断是否是一个input标签
    //        if (obj.type.toLowerCase() === "text") {
    //            var span = inp1.nextElementSibling || inp1.nextSibling;
    //            if (obj.value.length != 0) {
    //                if (/^[1-9][0-9]{4,}$/.test(obj.value)) {
    //                    span.className = "right";
    //                    span.innerHTML = "恭喜你,输入正确!";
    //                } else {
    //                    span.className = "wrong";
    //                    span.innerHTML = "对不起，输入错误！";
    //                }
    //            } else {
    //                span.className = "";
    //                span.innerHTML = "输入正确的QQ号码";
    //            }
    //        }
    //    }

    //第三种 使用函数封装的方法

    //使用这个方法
    //inp1
    addEventBlur("inp1", function () {
        var span = this.nextElementSibling || this.nextSibling;
        if (this.value.length != 0) {
            if (/^[1-9][0-9]{4,}$/.test(this.value)) {
                addClass(span, "right");
                addInnerHtml(span, "恭喜你,输入QQ号码正确!");
//                span.className = "right";
//                span.innerHTML = "恭喜你,输入正确!";
            } else {
//                span.className = "wrong";
//                span.innerHTML = "对不起，输入错误！";
                addClass(span, "wrong");
                addInnerHtml(span, "对不起，输入QQ号码错误！");
            }
        } else {
//            span.className = "";
//            span.innerHTML = "输入正确的QQ号码";
            addClass(span, "");
            addInnerHtml(span, "输入正确的QQ号码");
        }
    });
    //inp2
    addEventBlur("inp2", function () {
        var span = this.nextElementSibling || this.nextSibling;
        if (this.value.length != 0) {
            if (/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)) {
                addClass(span, "right");
                addInnerHtml(span, "恭喜你,输入手机号正确!");
            } else {
                addClass(span, "wrong");
                addInnerHtml(span, "对不起，输入手机号错误！");
            }
        } else {
            addClass(span, "");
            addInnerHtml(span, "输入正确的手机号");
        }
    });
    //inp3
    addEventBlur("inp3", function () {
        var span = this.nextElementSibling || this.nextSibling;
        if (this.value.length != 0) {
            if (/^[\w\-\.]+\@[\w]+\.[\w]{2,4}$/.test(this.value)) {
                addClass(span, "right");
                addInnerHtml(span, "恭喜你,输入邮箱正确!");
            } else {
                addClass(span, "wrong");
                addInnerHtml(span, "对不起，输入邮箱错误！");
            }
        } else {
            addClass(span, "");
            addInnerHtml(span, "输入正确的邮箱");
        }
    });
    //inp4
    addEventBlur("inp4", function () {
        var span = this.nextElementSibling || this.nextSibling;
        if (this.value.length != 0) {
            if (/^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/.test(this.value)) {
                addClass(span, "right");
                addInnerHtml(span, "恭喜你,输入座机正确!");
            } else {
                addClass(span, "wrong");
                addInnerHtml(span, "对不起，输入座机错误！");
            }
        } else {
            addClass(span, "");
            addInnerHtml(span, "输入正确的座机");
        }
    });
    //inp5
    addEventBlur("inp5", function () {
        var span = this.nextElementSibling || this.nextSibling;
        if (this.value.length != 0) {
            if (/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)) {
                addClass(span, "right");
                addInnerHtml(span, "恭喜你,输入账号正确!");
            } else {
                addClass(span, "wrong");
                addInnerHtml(span, "对不起，输入账号错误！");
            }
        } else {
            addClass(span, "");
            addInnerHtml(span, "输入正确的账号");
        }
    });
    //inp6
    addEventBlur("inp6", function () {
        var span = this.nextElementSibling || this.nextSibling;
        if (this.value.length != 0) {
            if (/^[\$a-zA-Z0-9_-]{6,18}$/.test(this.value)) {
                addClass(span, "right");
                addInnerHtml(span, "恭喜你,输入密码正确!");
                calcPwd(password, this.value);

            } else {
                addClass(span, "wrong");
                addInnerHtml(span, "对不起，输入密码错误！");
                calcPwd(password, this.value);
            }
        } else {
            addClass(span, "");
            addInnerHtml(span, "输入正确的密码");
            calcPwd(password, this.value);
        }
    });


    //封装事件绑定
    function addEventBlur(id, fn) {
        document.getElementById(id).onblur = fn;
    }

    //封装类样式添加
    function addClass(element, className) {
        element.className = className;
    }
    //封装提示信息添加
    function addInnerHtml(element, html) {
        element.innerHTML = html;
    }
    //封装计算密码强度的方法
    function calcPwd(element, value) {
        /**
         * 弱 /^([a-z].*[A-Z])|([A-Z].*[a-z])$/
         区分大小写英文字母
         中/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/
         带有字母 和 数字
         强/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/
         字母数字中间 加有下划线（想要什么中括号中加）
         */
        if (value.length >= 6) {
            //高强度
            if (/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(value)) {
                element.className = "pwd str4";
            } //中等强度
            else if (/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(value)) {
                element.className = "pwd str3";
            }//低等强度
            else if (/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(value)) {
                element.className = "pwd str2";
            }//最低强度
            else if (/^[0-9]$/) {
                element.className = "pwd str1";
            }
            else {//未评级
                element.className = "pwd";
            }
        } else {//未评级
            element.className = "pwd";
        }
    }
    //3.书写事件驱动程序



</script>
</body>
</html>

posted @ 2018-06-28 20:13 我叫贾文利阅读(279) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

我叫贾文利

Javascript的正则表达式相关笔记（一）

公告