网页制作之JavaScript正则

最新推荐文章于 2024-10-07 13:46:17 发布

原创最新推荐文章于 2024-10-07 13:46:17 发布 · 172 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #正则表达式

网页制作专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了正则表达式的应用技巧，包括如何判断字符串是否符合特定格式，以及如何从字符串中提取所需信息。通过实例演示了不同正则模式的作用，如单一匹配、全局搜索和多行匹配，同时介绍了登录注册验证中的前后端实现方法。

test 判断字符串是否符合规定的正则

    rep = /\d+/;
    rep.test("asgdgsahiu526")
    #   true

    rep = /^\d+$/;
    rep.test("agduya6768bhjsadgiak");
    #   false

exec 获取字符串中符合规定的正则

    rep = /\d+/;
    var str = "ashda 312 bdhsah_398";
    rep.exec(str);
    #   312
    rep = /\bhello(\w*)\b/;
    var str = "ada hellohi adsad";
    rep.exec(str);
    #   ["hellohi","hi"]

    rep = /\bhello(\w*)\b/g;    全局搜索模式
    var str = "ada hellohi adsad hello! hello";
    rep.exec(str);
    #   ["hellohi","hi"]
    #   ["hello",""]
    #   ["hello",""]
    #   null

多行匹配

   默认就是多行匹配
   ^(开始符)+内容+$(终止符)
   rep = /\bhello(\w*)\b/g;    全局搜索模式
   var str = "ada hellohi adsad\n hellowe asdha hell";
   rep.exec(str);
   #   ["hellohi","hi"]
   #   null
   rep = /\bhello(\w*)\b/gm;    全局搜索模式+多行匹配
   var str = "ada hellohi adsad\n hellowe asdha hell";
   rep.exec(str);
   #   ["hellohi","hi"]
   #   ["hellowe","we"]
   #   null

登录注册验证

1.  先验知识
    默认事件先执行
        CheckBox
    自定义先执行
        a
        submit
        。。。

    <form>
        <input type="text"/>
        <input type="password"/>
        <input type="submit"/>
    <!--        创建一个CheckBox，初始状态checked为false-->
        <input type="checkbox"/>
    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 自定义一个点击事件，点击的时候向console发送当前的checked状态
        $(":checkbox").click(function () {
            // 获取checked当前状态
            var v = $(this).prop("checked");
            // 发送到console
            console.log(v);
        })
        $(":submit").click(function () {
            $(":text,:password").each(function () {
                // ...
                return false;
            });
            return false;
        });
    </script>
2.  验证
    前端：JS验证
    <form>
        <input type="submit"/>
    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(":submit").click(function () {
            $(":text,:password").each(function () {
                // ...
                return false;
            });
            return false;
        });
    </script>
    后端：Python实现
    业务处理
    。。。