Jquery搜索框输入字数限制，弹出提示，以及一个页面多个搜索框怎么判断对应的搜索框

最近在制作网页搜索框遇到了相关问题，大概需求是搜索输入框，如果不填文字点提交，提示“请输入内容”，如果输入的字数小于xx个，提示“字数不能少于xx个”，如果输入的字数大于xxx个，提示“字数不能超过xxx个”，另外一个页面两个搜索框，form的信息都是一样时第二个搜索框提示不出错，以下是具体代码。

 其中使用了layer.msg的弹窗效果，需要引入相关js。

html部分：

头部需要引入的js
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>

第一个输入框，位于header里
        <div class="search">
            <form action="index.php" method="get" name="searchform" id="searchform">
                <input name="keyword" id="keyword" class="input_text" value="" placeholder="输入关键字进行搜索" type="text">
                <input class="input_submit" value="" type="submit">
            </form>
        </div>


第二个输入框，在main里
                <div class="search search-list">
                    <form action="index.php" method="get" name="searchform" id="searchform">
                        <input name="keyword" id="keyword" class="input_text" value="" placeholder="输入关键字进行搜索" type="text">
                        <input class="input_submit" value="" type="submit">
                    </form>
                </div>

js代码部分：

    // 判断搜索框中输入的字数
    $(".input_submit").on("click", function(e) {
        e.preventDefault(); // 阻止默认的表单提交行为

        // 获取当前form元素
        var form = $(this).closest("form");
        // 获取当前form元素中name为keyword的input元素的值并计算长度
        var val = form.find("input[name='keyword']").val();
        if (val.trim() === "") {
            // 如果输入框的值为空，则弹出提示框
            layer.msg("请输入内容", {time: 1500});
            return;
        }

        var len = 0;
        for (var i = 0; i < val.length; i++) {
            var charCode = val.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) {
                len += 1;
            } else {
                len += 2;
            }
        }
        // 判断长度是否符合要求
        if (len < 2) {
            // 弹出提示框
            layer.msg("字数不能少于" + 2 + "个", {time: 1500}); // 1.5秒后自动关闭提示框
        } else if (len >= 12) {
            // 弹出提示框
            layer.msg("字数不能超过" + 12 + "个", {time: 1500}); // 1.5秒后自动关闭提示框
        } else {
            // 如果长度符合要求，则提交表单
            $("form").submit();
        }
    });

另外，判断输入内容为空，也可以使用html5表单自带的 setCustomValidity 来实现提示信息，样式比较固定，具体可以百度。