表单提交后输入值重置且console.log无输出问题排查求助

问题原因 #

核心原因 #

你没有阻止表单提交的默认行为：浏览器触发表单submit事件后，默认会执行提交数据、刷新页面的操作，你的校验逻辑还没执行完成，页面就已经重载，因此不会保留控制台打印的内容，已填写的表单内容也会被重置。

其他代码错误 #

还有几处代码问题会导致逻辑运行异常：

• 邮箱正则规则写法错误：你写的/^[/w]+@[a-zA-Z]+?\.[a-zA-Z]{2,3}$/中匹配字母数字下划线的标识写反了斜杠，/w要改成\w才能正常匹配
• checkPass函数中直接使用了errorPassLen、errorPassFormat变量，没有提前通过document.getElementById()获取对应DOM节点，运行到这里会抛出未定义错误，打断后续逻辑执行
• 没有根据校验结果控制表单是否可以提交，就算校验出错表单也会继续执行提交逻辑

修复方案 #

1. 在validateLogin函数第一行添加event.preventDefault()阻止默认提交刷新行为
2. 修正正则写法，提前获取密码相关错误提示的DOM节点
3. 增加校验结果返回值，控制校验通过后再执行后续登录/提交逻辑

修正后参考代码 #

document.getElementById("login-form").addEventListener("submit",validateLogin,false);

function validateLogin(event){
    // 阻止默认提交刷新行为
    event.preventDefault();
    var elements = event.currentTarget;
    var emailValue = elements[0].value;
    var passValue = elements[1].value;

    const emailValid = checkEmail(emailValue);
    const passValid = checkPass(passValue);

    // 如果校验都通过，可以在这里执行后续登录逻辑，或者调用form.submit()手动提交
    if(emailValid && passValid) {
        console.log('校验通过，可执行提交操作');
        // elements.submit();
    }
}


function checkEmail(emailValue){
    // 修正正则的斜杠方向
    var regex_email = /^\w+@[a-zA-Z]+?\.[a-zA-Z]{2,3}$/;
    var index = emailValue.search(regex_email);
    var errorEmail = document.getElementById("errorEmail");
    var valid = true;

    console.log('Hanee');
    if(index != 0){
        errorEmail.style.display = 'inline';
        valid = false;
    } else {
        errorEmail.style.display = 'none';
    }
    return valid;
}

function checkPass(passValue){
    var password = document.getElementById("password");
    // 提前获取错误提示DOM
    var errorPassLen = document.getElementById("errorPassLen");
    var errorPassFormat = document.getElementById("errorPassFormat");
    var regex_pass = /^\S+$/; // 修正正则，匹配无空格的内容
    var valid = true;

    var index = passValue.search(regex_pass);

    if(passValue.length < 6){
        console.log('password is invalid. Minimum length is 6');
        errorPassLen.style.display = 'inline';
        valid = false;
    } else {
        errorPassLen.style.display = 'none';
    }

    if(index != 0){
        console.log('password is invalid. Please make sure there is no spaces in between');
        errorPassFormat.style.display = 'inline';
        valid = false;
    } else {
        errorPassFormat.style.display = 'none';
    }
    return valid;
}

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