动态验证输入值的合法性

最新推荐文章于 2024-07-17 18:42:40 发布

故事不故事

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量171

点赞数

分类专栏： js 文章标签： js html

原创

本文链接：https://blog.csdn.net/weixin_45116533/article/details/102829022

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        username:<input type="text" name="username"><span></span><br>
        <button>提交</button>

        <script type="text/javascript">
            $(function () {
                $(":input[name='username']").on("input", reUsername);
                $("button").on("click",function () {
                    //当所有输入值符合要求时才能提交,不符合不做处理
                    if ($("span").text() === "ok") {
                        alert("提交");
                    }
                });
            });

            function reUsername() {
                var value = $(this).val();
                var re=/[\w]{5,8}/;
                if (value === "") {
                    $(this).next("span").text("");
                } else if (re.test(value)) {
                    $(this).next("span").text("ok");
                } else {
                    $(this).next("span").text("no");
                }
            }
        </script>
    </body>
</html>

这里主要使用了input事件,只有当输入值发生变化时才会调用这个事件的函数js请使用oninput,jq使用on动态绑定input事件

故事不故事

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态验证输入值的合法性

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.4.1.min.js"></scr...
复制链接

扫一扫