使用Map函数验证多步骤表单输入，为空/无效时添加边框

原代码问题分析 #

1. map函数误用：map是用来生成新数组的工具，不适合做遍历操作，遍历元素应该用each。
2. 事件绑定位置错误：把click事件绑定放在map的else分支里，会导致每个输入项都绑定一次点击事件，触发时多次执行切换逻辑。
3. 验证逻辑时机不对：原代码页面加载时就执行了验证，而不是点击「下一步」时才触发验证。
4. 错误提示样式不符合预期：你设置的width:10px不是标记无效输入的合理样式，应该用边框样式来提示错误。

修正后的代码实现 #

// 定义步骤相关全局变量（如果之前没定义）
var now = 0;
var divs = $(".step-div"); // 假设你的步骤容器统一用这个类名

// 给下一步按钮绑定点击事件，只绑定一次
$(".next").click(function() {
    var isValid = true;
    // 动态获取当前步骤容器，不用写死step1
    var currentStep = $("#step" + (now + 1));
    
    // 遍历当前步骤的所有输入项
    currentStep.find(":input").each(function() {
        var input = $(this);
        // 先清空之前的错误样式
        input.removeClass("invalid-input");
        
        // 验证输入是否为空（可扩展格式验证）
        if (input.val().trim() === '') {
            isValid = false;
            // 添加错误边框样式
            input.addClass("invalid-input");
        }
    });
    
    // 只有全部验证通过才切换步骤
    if (isValid) {
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).show();
    }
});

配套CSS样式 #

.invalid-input {
    border: 2px solid #ff4444 !important; /* 红色边框标记无效输入 */
}

扩展说明 #

• 要是需要验证输入格式（比如邮箱、手机号），可以在if条件里加正则判断，示例：

  // 邮箱格式验证
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (input.attr("type") === "email" && !emailRegex.test(input.val().trim())) {
      isValid = false;
      input.addClass("invalid-input");
  }
  

• trim()用来去除输入内容的前后空格，避免用户只输入空格被误判为有效内容。

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