JQueryの検索ボックスの入力語数制限、ポップアッププロンプト、ページ内に複数の検索ボックスがある場合に対応する検索ボックスを判断する方法

最近、Web ページの検索ボックスを作成するときに、関連する問題が発生しました。一般的な要件は、入力ボックスを検索することです。テキストを入力せずに送信をクリックすると、「内容を入力してください」というプロンプトが表示されます。入力した単語数が xx 未満の場合は、「単語数は xx 未満にすることはできません」というプロンプトが表示され、入力した単語数が xxx より大きい場合は、「単語数は xxx を超えることはできません」というプロンプトが表示されます。検索ボックスが 2 つあり、フォームの情報が同じである場合、2 番目の検索ボックスの情報が同じ場合、プロンプトは正しく表示されます。具体的なコードは次のとおりです。

 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を利用してプロンプト情報を実現することもできますが、スタイルは比較的固定されており、詳細はBaiduを参照してください。