黑马程序员技术交流社区

标题: 【黑马程序员济南】 前端与移动开发笔记事件特效：day05 [打印本页]

---

作者: 小鲁哥哥    时间: 2017-10-23 16:50
标题: 【黑马程序员济南】 前端与移动开发笔记事件特效：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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2