如何在input事件中获取多表单值并存储最新数据到数组（凭证校验）

核心问题在于你每次输入字符时都往数组里追加值，导致数组积累了大量输入过程中的中间值。正确的做法是不要在输入事件中操作数组，而是在需要验证/提交的时机，一次性收集所有输入的最新值。

优化方案： #

• 移除输入事件里的arr.push()操作，仅保留输入值的实时显示（调试用）
• 新增验证触发点（比如按钮），在用户触发验证时，一次性获取所有输入框的最新值，整理成数组或对象（推荐用对象，因为凭证是键值对，更易维护）
• 用整理好的最新数据发起Ajax验证

修改后的代码示例： #

HTML（新增验证按钮）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input name="host" id="host" required placeholder="主机地址">
<input name="db" id="db" required placeholder="数据库名">
<input name="user" id="user" required placeholder="用户名">
<input name="pass" id="pass" required placeholder="密码">
<button id="verify-btn">验证凭证</button>

<br/>
Host
<div id="host_r"></div>
DB
<div id="db_r"></div>
User
<div id="user_r"></div>
Pass
<div id="pass_r"></div>
最新凭证数据
<div id="array"></div>

JavaScript

// 输入事件仅用于实时显示调试，不再操作数组
$("#host").on("input", function() {
   $("#host_r").text($(this).val());
});

$("#db").on("input", function() {
   $("#db_r").text($(this).val());
});

$("#user").on("input", function() {
   $("#user_r").text($(this).val());
});

$("#pass").on("input", function() {
   $("#pass_r").text($(this).val());
});

// 验证按钮点击时，收集最新值
$("#verify-btn").on("click", function() {
    // 方式1：用数组存储（按顺序）
    const credentialsArray = [
        $("#host").val(),
        $("#db").val(),
        $("#user").val(),
        $("#pass").val()
    ];
    
    // 方式2：用对象存储（更清晰，推荐）
    const credentialsObj = {
        host: $("#host").val(),
        db: $("#db").val(),
        user: $("#user").val(),
        pass: $("#pass").val()
    };

    // 调试显示最新数据
    $("#array").text(JSON.stringify(credentialsObj));
    console.log("最新凭证数据：", credentialsObj);

    // 这里发起Ajax请求验证
    // $.ajax({
    //     url: "你的验证接口地址",
    //     method: "POST",
    //     data: credentialsObj,
    //     success: function(response) {
    //         // 处理验证结果
    //     },
    //     error: function(err) {
    //         // 处理错误
    //     }
    // });
});

为什么这样更合理： #

1. 数组/对象里只会保留用户输入的最终有效值，不会有输入过程中的冗余数据
2. 用对象存储凭证更直观，后续Ajax提交时可以直接把对象作为请求数据，无需额外处理
3. 逻辑更清晰：输入事件只负责实时反馈，验证操作统一在触发点执行

内容的提问来源于stack exchange，提问作者Pelin