layer 小tips 失去焦点正则验证输入框弹出提示批量关闭tips

最新推荐文章于 2022-10-31 13:38:18 发布

安果移不动

最新推荐文章于 2022-10-31 13:38:18 发布

阅读量3.5k

点赞数

分类专栏： # layui

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/86558708

版权

layui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="layui/layui.all.js"></script>
    <script src="static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#text").blur(function () {
                //        创建正则规则
                var reg = /^\d{6,20}$/
                var con = $(this).val();

                //    用正则取匹配内容
                var result = reg.test(con);
                if (result) {
                    layer.tips('用户名符合规范', '#text', {
                        tips: [1, '#3595CC'],
                        time: 4000
                    });
                } else {
                    layer.tips('用户名必须为6-20位的数字', '#text', {
                        tips: [1, '#3595CC'],
                        time: 4000
                    });
                }
            })

        });
    </script>
</head>
<body>
<h1>鼠标出发一下单行文本的失去焦点事件试试</h1>
用户名:<input type="text" class="btn" id="text" value="">

<br><br>
<textarea name="tt" id="tt" cols="30" rows="10"></textarea>
</body>

关闭tips

    <script type="text/javascript">
        $(document).ready(function () {
            var tips;
            $("#price").focus(function () {
                tips = layer.tips($(this).attr('placeholder'), '#price', {
                    tips: [1, '#3595CC'],
                    time: 0
                });
            });

            $("#price").blur(function () {
                layer.close(tips);
            });


        });
    </script>

那么如果批量关闭呢

<script type="text/javascript">
        $(document).ready(function () {
            var tips;
            var node=$(".login_input");
            node.each(function (i) {
                var currentNode=node.eq(i);
                currentNode.focus(function () {
                    tips = layer.tips($(this).attr('placeholder'), currentNode, {
                        tips: [1, '#3595CC'],
                        time: 0
                    });
                });

                currentNode.blur(function () {
                    layer.close(tips);
                });
            })



        });
    </script>