[学习交流] 【黑马程序员济南】前端与移动开发笔记事件特效：day05

【黑马程序员济南】前端与移动开发就业班笔记事件特效：Day05

正则的使用
正则简介

[JavaScript] 纯文本查看 复制代码

        /**
         *@author 传智播客
         */
    //通过构造函数创建
    var regEx = new RegExp(/\d/);//\d预定义类 表示数字 digit 数字
    regEx.test("1");//可以判断传入的字符串是否符合规则 符合要求返回true不符合返回false
    console.log(regEx.test("1"));//true
    console.log(regEx.test("a"));//false 匹配数字 字母不行
    console.log(regEx.test("a1"));//true 只要有我想要的就可以
    //字面量
    var regEx2 = /\d/;
    //如果这个规则只是使用一次
    console.log(/\d/.test("1"));

预定义类

[^\n\r] 除了换行和回车之外的任意字符

\d [0-9] 数字字符

\D [^0-9] 非数字字符

\s [\f\r\n\t\v] 不可见字符

\S [^\f\r\n\t\v] 可见字符

\w [a-zA-Z0-9_] 单词字符(所有的字母数字和_)

\W [^a-zA-Z0-9_] 非单词字符

[JavaScript] 纯文本查看 复制代码

        /**
         *@author 传智播客
         */
    console.log(/\d/.test("1"));//true
    console.log(/\d/.test("a"));//false
    console.log(/\s/.test("a"));//false
    console.log(/\s/.test(" "));//true
    console.log(/\w/.test("a"));//true
    console.log(/\w/.test("1"));//true
    console.log(/\w/.test("_"));//true
    console.log(/\w/.test("中"));//false单词字符 指的是 英文字母 数字 下划线

基础语法补充

[JavaScript] 纯文本查看 复制代码

        /**
         *@author 传智播客
         */
    //| 表示或 或的优先级最低 () 可以提升优先级
    console.log(/foot|boot/.test("foot"));//true
    console.log(/foot|boot/.test("boot"));//true
    console.log(/(foot)|(boot)/.test("boot"));//true
    console.log(/f|boot/.test("boot"));//true
    console.log(/(f|b)oot/.test("boot"));//true
    console.log(/a1|b1|c1/.test("boot"));//false
    console.log(/a|b|c1/.test("boot"));//true
    console.log(/(a|b|c)1/.test("boot"));//false
    console.log(/[abc]1/.test("boot"));//false

字符类

[JavaScript] 纯文本查看 复制代码

        /**
         *@author 传智播客
         */
    console.log("------简单类------");
    console.log(/[abc]/.test("a"));
    console.log(/[abc]/.test("b"));
    console.log(/[abc]/.test("c"));
    console.log(/[abc]/.test("d"));//false a或者b或者c都可以 其他的不行
    console.log(/[abc]/.test("da"));//true 只要有我想要的就可以
    console.log("------负向类------");
    console.log(/[^abc]/.test("a"));//不能是a或b或c
    console.log(/[^abc]/.test("b"));//不能是a或b或c
    console.log(/[^abc]/.test("c"));//不能是a或b或c
    console.log(/[^abc]/.test("d"));//true 不能是a或b或c d可以
    console.log(/[^abc]/.test("da"));//true 只要有我想要的就可以
    console.log("------范围类------");
    console.log(/[abcdefghi]/.test("a"));
    console.log(/[a-i]/.test("a"));
    console.log(/[a-z]/.test("a"));//所有小写字母
    console.log(/[A-Z]/.test("a"));//所有大写字母
    console.log(/[0-9]/.test("a"));//所有数字
    console.log("------组合类------");
    console.log(/[a-zA-Z0-9]/.test(""));//表示所有的大小写字母还有数字
    console.log(/[a-kA-N0-5]/.test(""));//组合类中的范围随意

边界

[JavaScript] 纯文本查看 复制代码

        /**
         *@author 传智播客
         */
    //只要有我想要的就可以 这种策略在表单验证中是不行的
    console.log(/chuan/.test("chuan"));//true
    console.log(/chuan/.test("chuang"));//true
    console.log(/chuan/.test("achuan"));//true
    console.log("-------------------");
    //^ 表示限制开头
    console.log(/^chuan/.test("chuan"));//true
    console.log(/^chuan/.test("achuan"));//false开头必须是chuan
    console.log(/^chuan/.test("chuang"));//true只限制开头 结尾不管
    console.log("-------------------");
    //$ 表示限制结尾
    console.log(/chuan$/.test("chuan"));//true
    console.log(/chuan$/.test("chuang"));//false结尾必须是chuan
    console.log(/chuan$/.test("achuan"));//true只限制结尾 开头不管
    //^$ 要什么就必须得给我什么 不能多也不能少
    console.log("-------------------");
    console.log(/^chuan$/.test("chuan"));//true
    console.log(/^chuan$/.test("achuan"));//false
    console.log(/^chuan$/.test("chuang"));//false
    console.log(/^chuan$/.test("chuanchuan"));//false

量词

"*" 重复零次或更多 x>=0

"+" 重复一次或更多次 x>=1

"?" 重复零次或一次 x=(0||1)

{n} n次 x=n

{n,} 重复n次或更多 x>=n

{n,m} 重复出现的次数比n多但比m少 n<=x<=m

* {0,}

+ {1,}

? {0,1}

[JavaScript] 纯文本查看 复制代码

    /**
         *@author 传智播客
         */
    console.log(/^a$/.test("a"));
    console.log(/^a$/.test("aa"));
    // "*"        重复零次或更多 x>=0
    console.log("-------*------");
    console.log(/^a*$/.test("a"));//表示a可以出现0次或者多次
    console.log(/^a*$/.test("aaaaaa"));//表示a可以出现0次或者多次
    console.log(/^a*$/.test(""));//表示a可以出现0次或者多次
    console.log(/^a*$/.test("d"));//false a出现多少次都可以 但是没有说可以出现d
    // "+"        重复一次或更多次 x>=1
    console.log("-------+------");
    console.log(/^a+$/.test("a"));
    console.log(/^a+$/.test("aaaaa"));
    console.log(/^a+$/.test(""));//false 一次或者多次 0次不行
    // "?"        重复零次或一次  x=(0||1)
    console.log("-------?------");
    console.log(/^a?$/.test("a"));
    console.log(/^a?$/.test(""));
    console.log(/^a?$/.test("aaaa"));//false 0或者1次 多次不行
    //自定义出现的次数
    console.log("-------{}------");
    console.log(/^a{2}$/.test("aa"));//a可以出现2次 a=2
    console.log(/^a{2,}$/.test("aa"));//a可以出现2次或者更多 a>=2
    console.log(/^a{2,5}$/.test("aa"));//a可以出现2次到5次 a>=2并且<=5
    console.log("-------------");
    console.log(/^a*$/.test("a"));//表示a可以出现0次或者多次
    console.log(/^a{0,}$/.test("a"));//表示a可以出现0次或者多次
    console.log(/^a+$/.test("a"));
    console.log(/^a{1,}$/.test("a"));
    console.log(/^a?$/.test("a"));
    console.log(/^a{0,1}$/.test("a"));

括号总结

{}表示次数

[]表示一个字符的位置

()表示一组

[JavaScript] 纯文本查看 复制代码

    /**
         *@author 传智播客
         */
    //{} 是量词 用来修饰前面内容出现的次数
    console.log(/^a{2}$/.test("aa"));
    //[] 表示一个字符的位置
    console.log(/^[abc]$/.test("c"));
    //() 用来分组 可以提高优先级
    console.log(/^chuan$/.test("chuan"));
    console.log(/^chuan{2}$/.test("chuanchuan"));//false
    console.log(/^chuan{2}$/.test("chuann"));//true
    console.log(/^(chuan){2}$/.test("chuanchuan"));//true

验证座机

验证姓名

完整表单验证

[HTML] 纯文本查看 复制代码

<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>

[JavaScript] 纯文本查看 复制代码

    /**
         *@author 传智播客
         */
    //获取输入框
    var inpQQ = document.getElementById("inp1");
    var inpMobile = document.getElementById("inp2");
    var inpEmail = document.getElementById("inp3");
    var inpTel = document.getElementById("inp4");
    var inpName = document.getElementById("inp5");
    //找规律
    //QQ的规律 5到11位 开头是不为0的数字
    var regQQ = /^[1-9]\d{4,10}$/;  //第一位是1-9中的一个后面是数字4-10位
    //手机的规律 11位数字 而且有号段限制 13[0-9] 14[57] 15[0-9] 17[1456789] 18[0-9]
    //var regMobile = /^\d{11}$/;
    var regMobile = /^(13[0-9]|14[57]|15[0-9]|17[1456789]|18[0-9])\d{8}$/;  
    //邮箱的规律
    //var regEmail = /^\w+@\w+\.\w+$/;
    var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //有可能有连接字符(-+.)其后面也是接字母数字下划线，后面加*表示组中有可能是零个
    var regTel = /^0\d{2,3}-\d{7,8}$/;
    var regName = /^[\u4e00-\u9fa5]{2,6}$/;
    //绑定事件
    check(inpQQ, regQQ);
    check(inpMobile, regMobile);
    check(inpEmail, regEmail);
    check(inpTel, regTel);
    check(inpName, regName);

        //每个都需要判断所以封装可以直接对其进行调用，只是以参数的形式表达，在传入对象和正则表达式就可以了。

    function check(inp, regEx) {
        inp.onblur = function () {
            if (regEx.test(this.value)) {
                this.nextSibling.innerHTML = "正确";
                this.nextSibling.className = "right";
            } else {
                this.nextSibling.innerHTML = "错误";
                this.nextSibling.className = "wrong";
            }
        };
    }

封装trim方法

[AppleScript] 纯文本查看 复制代码

        /**
         *@author 传智播客
         */
    //去掉两端的空白符
    var str = "    aa aa    ";
    console.log(str);
    //str = str.replace(/^\s+|\s+$/g, "");
    str = trim(str);
    console.log(str);

    //封装 去掉两端空格的兼容函数
    function trim(str) {
        return str.replace(/^\s+|\s+$/g, "");
    }

递归

[JavaScript] 纯文本查看 复制代码

        /**
         *@author 传智播客
         */
    //求n个数的累加
    //getSum(1) = 1
    //getSum(2) = 2+1
    //getSum(3) = 3+2+1
    //getSum(3) = 3+getSum(2)
    //getSum(n) = n+getSum(n-1)
    function getSum(n) {
        if (n === 1) {
            return 1;
        }
        var sum = n + getSum(n - 1);
        return sum;
    }
    //console.log(getSum(5));

    //求n的阶乘
    //getJC(1) = 1
    //getJC(2) = 2*1
    //getJC(3) = 3*2*1
    //getJC(3) = 3*getJC(2)
    //getJC(n) = n*getJC(n-1)
    function getJC(n) {
        if (n === 1) {
            return 1;
        }
        var jc = n * getJC(n - 1);
        return jc;
    }
    //console.log(getJC(3));
    //求Fibonacci的第n个数1 1 2 3 5 8 13 21...
    //2 = 1 + 1
    //getFib(3) = getFib(1)+getFib(2)
    //3 = 2 + 1
    //getFib(4) = getFib(2)+getFib(3)
    //getFib(n) = getFib(n-2)+getFib(n-1)
    function getFib(n) {
        if (n === 1 || n === 2) {
            return 1;
        }
        var fib = getFib(n - 2) + getFib(n - 1);
        return fib;
    }
    console.log(getFib(12));//144

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友，那就快来吧！
黑马程序员济南中心联系电话：0531-55696830

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【黑马程序员济南】前端与移动开发笔记事件特效：day05

0 个回复

浏览过的版块

黑马骑士勋章

优秀作者

[学习交流] 【黑马程序员济南】 前端与移动开发笔记事件特效：day05

0 个回复

浏览过的版块

黑马骑士勋章

优秀作者

[学习交流] 【黑马程序员济南】前端与移动开发笔记事件特效：day05