JavaScript中实现preventDefault后，联系表单仍随机提交问题求助

核心问题根源 #

1. 重复ID导致DOM元素获取异常
   HTML中每个输入框都重复定义了id属性（例如id="form-name"出现两次），浏览器解析时只会识别第一个ID，可能导致JS无法正确获取输入框的值。

2. 验证逻辑语法错误
   手机号验证条件中phone.value.trim !== ""缺少函数调用括号，实际是在判断trim函数的引用是否为空字符串，这个条件永远为true，即使手机号为空也会被判定为有效。

3. 异步请求未等待完成就跳转
   emailjs.send是异步操作，直接在其后执行window.location会导致页面跳转中断请求，可能出现数据未发送成功的情况。

4. 验证逻辑冗余且不一致
   提交判断时重复编写了验证规则，和前面的字段状态更新逻辑分开，容易出现规则不一致导致的验证漏洞。

5. 事件覆盖不全
   仅监听按钮的click事件，未监听表单的submit事件，用户通过回车提交表单时可能绕过验证逻辑。

修复后的完整代码 #

HTML（修复重复ID）

<form class="registration-form">
   <div class="form-group mb-3">
      <label class="sr-only" for="form-name">First name</label>
      <input type="text" name="form-name" id="form-name" placeholder="Your Full Name"
         class="form-name form-control-lg form-control">
      <div class="valid-feedback valid-invalid">Valid</div>
      <div class="invalid-feedback valid-invalid">Please Enter a valid Name</div>
   </div>
   <div class="form-group mb-3">
      <label class="sr-only" for="form-email">Email</label>
      <input type="text" name="form-email" id="form-email" placeholder="Email Address"
         class="form-email form-control-lg form-control">
      <div class="valid-feedback valid-invalid">Valid.</div>
      <div class="invalid-feedback valid-invalid">Please Enter a valid Email Address</div>
   </div>
   <div class="form-group mb-3">
      <label class="sr-only" for="form-phone">Phone</label>
      <input type="text" name="form-phone" id="form-phone" placeholder="Mobile Number"
         class="form-phone form-control-lg form-control">
      <div class="valid-feedback valid-invalid">Valid.</div>
      <div class="invalid-feedback valid-invalid">Please Enter a valid Phone Number</div>
   </div>
   <button type="submit" id="formSubmit"
      class="btn btn-primary btn-lg btn-block mt-2 shadow-lg">Submit
   Now</button>
</form>

JavaScript（修复验证逻辑、异步顺序、事件监听）

document.addEventListener("DOMContentLoaded", function () {
    emailjs.init("ignore");

    const form = document.querySelector(".registration-form");
    const nameInput = document.getElementById("form-name");
    const emailInput = document.getElementById("form-email");
    const phoneInput = document.getElementById("form-phone");

    // 表单提交事件监听（覆盖按钮点击和回车提交）
    form.addEventListener("submit", function (e) {
        e.preventDefault();
        
        const name = nameInput.value.trim();
        const email = emailInput.value.trim().toLowerCase();
        const phone = phoneInput.value.trim();
        
        // 定义验证结果变量
        let isNameValid = false;
        let isEmailValid = false;
        let isPhoneValid = false;

        // 姓名验证
        if (name === "") {
            nameInput.classList.remove("is-valid");
            nameInput.classList.add("is-invalid");
        } else {
            nameInput.classList.remove("is-invalid");
            nameInput.classList.add("is-valid");
            isNameValid = true;
        }

        // 邮箱验证
        const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if (email && emailRegex.test(email)) {
            emailInput.classList.remove("is-invalid");
            emailInput.classList.add("is-valid");
            isEmailValid = true;
        } else {
            emailInput.classList.remove("is-valid");
            emailInput.classList.add("is-invalid");
        }

        // 手机号验证（修复trim调用）
        const phoneRegex = /^(0|91)?[6-9][0-9]{9}$/;
        if (phone && phoneRegex.test(phone)) {
            phoneInput.classList.remove("is-invalid");
            phoneInput.classList.add("is-valid");
            isPhoneValid = true;
        } else {
            phoneInput.classList.remove("is-valid");
            phoneInput.classList.add("is-invalid");
        }

        // 所有验证通过后发送数据
        if (isNameValid && isEmailValid && isPhoneValid) {
            const data = { name, email, phone };
            emailjs.send("ignore", "ignore", data)
                .then(function (res) {
                    // 异步请求完成后再跳转
                    window.location = "https://example.com";
                })
                .catch(function(err) {
                    // 可添加错误处理逻辑
                    console.error("发送失败:", err);
                });
        }
    });
});

额外优化建议 #

• 将正则表达式提取为常量，避免重复定义，提升可维护性。
• 添加错误捕获逻辑，在emailjs.send失败时提示用户，避免静默失败。
• 可以添加表单重置逻辑，在验证通过或用户修正错误时优化交互体验。

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