基于JS Class实现多表单校验时输入字段trim返回空值的修复方法

排查到的核心问题 #

• 变量名大小写不匹配（JS严格区分大小写）
  • validateName方法中，去除首尾空格的输入值存在name_z（小写z）变量里，但正则校验时误用了大写Z开头的name_Z——这个变量从来没被赋值过，正则检测时拿到的是未定义值，永远返回校验不通过，造成“读取到的输入值是空”的错觉。
  • validatePhone方法中，去除首尾空格的输入值存在phone_z变量里，但正则校验时误用了从未定义的phone变量，同样导致校验逻辑永久失效。
• 脚本执行时机过早
  如果初始化校验实例的JS代码写在HTML节点前面，还没等页面渲染出表单、输入框就执行document.querySelector()，拿到的节点引用是null。后续提交表单时读取这个null的value属性，自然读不到正确的输入值。
• 手机号正则写法错误
  原正则中[0|+[0-9]{1,5}的方括号用错了，字符类内部的|会被识别为普通字符，根本无法正确匹配带国际区号的手机号格式。

具体修复步骤 #

1. 修正所有变量名拼写不匹配的问题
   • 将validateName方法中的regName.test(name_Z)改为regName.test(name_z)，和之前定义的trim后变量名完全一致。
   • 将validatePhone方法中的regPhone.test(phone)改为regPhone.test(phone_z)，和之前定义的trim后变量名完全一致。
2. 调整脚本执行时机，保证DOM加载完成后再初始化
   把创建校验实例、绑定提交事件的代码放到DOMContentLoaded事件回调里，或者直接把<script>标签移到</body>结束标签之前，避免拿不到DOM节点引用。
3. 修正手机号正则表达式
   替换原来错误的正则，实现对10位普通手机号、带+国际区号的10-13位手机号的正确匹配：

   const regPhone = /^(?:\+?\d{1,5})?([7-9]\d{9})$/;
   

4. 增加节点判空的容错逻辑，避免null引用导致代码报错。

修复后可直接复用的完整代码 #

class FormValidate {
    constructor(nameField, phoneField, emailField, form) {
        this.nameField = nameField;
        this.phoneField = phoneField;
        this.emailField = emailField;
        this.form = form;
    }

    // 名称字段校验
    validateName(nameField) {
        // 前置判空，避免节点不存在时报错
        if (!nameField) return false;
        // 正则直接匹配3-20位的英文字符+空格，覆盖原长度、字符格式、非空判断
        const regName = /^[a-zA-Z\s]{3,20}$/;
        const trimmedValue = nameField.value.trim();
        return regName.test(trimmedValue);
    }

    // 手机号字段校验
    validatePhone(phoneField) {
        if (!phoneField) return false;
        const trimmedValue = phoneField.value.trim();
        // 匹配带可选国际区号的印度手机号格式
        const regPhone = /^(?:\+?\d{1,5})?([7-9]\d{9})$/;
        // 结合长度校验+正则匹配返回结果
        return trimmedValue.length >= 10 && trimmedValue.length <=13 && regPhone.test(trimmedValue);
    }

    // 为联系我们页面扩展的邮箱校验方法，复用类即可无需重复写逻辑
    validateEmail(emailField) {
        if (!emailField) return false;
        const trimmedValue = emailField.value.trim();
        const regEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regEmail.test(trimmedValue);
    }
}

// DOM完全加载后再初始化校验逻辑
document.addEventListener('DOMContentLoaded', () => {
    // FAQ表单校验实例化
    const faqForm = new FormValidate(
        document.querySelector('#name'),
        document.querySelector('#phone'),
        null, // FAQ表单无邮箱字段，传null即可
        document.querySelector('#faq-form')
    );

    faqForm.form.addEventListener('submit', function(e) {
        const isNameValid = faqForm.validateName(faqForm.nameField);
        const isPhoneValid = faqForm.validatePhone(faqForm.phoneField);
        // 校验不通过则阻止提交
        if (!(isNameValid && isPhoneValid)) {
            e.preventDefault();
        }
    });

    // 联系我们页面的表单直接复用同一个类，实例化时传入对应的DOM节点即可
    // const contactForm = new FormValidate(
    //     document.querySelector('#contact-name'),
    //     document.querySelector('#contact-phone'),
    //     document.querySelector('#contact-email'),
    //     document.querySelector('#contact-form')
    // );
    // contactForm.form.addEventListener('submit', function(e) {
    //     const isNameValid = contactForm.validateName(contactForm.nameField);
    //     const isPhoneValid = contactForm.validatePhone(contactForm.phoneField);
    //     const isEmailValid = contactForm.validateEmail(contactForm.emailField);
    //     if (!(isNameValid && isPhoneValid && isEmailValid)) {
    //         e.preventDefault();
    //     }
    // })
});

原有的HTML表单结构不需要做任何修改，只需保证脚本执行时机符合要求即可正常运行。

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