JavaScript表单验证问题：提交时错误信息异常显示

你的代码里藏着一个关键bug：在类的构造函数初始化时就直接获取了输入框的初始值，这时候用户还没输入任何内容，this.userName被固定成了空字符串。之后不管用户在输入框里填了什么，提交表单时判断的还是这个最初的空值，所以每次都会触发错误提示。

我们需要把获取输入框值的时机改到表单提交的瞬间，同时替换掉会覆盖整个页面的document.write()，用更友好的方式显示错误提示。下面是修正后的完整代码：

<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=0.1,shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Javascript Form Validation</title>
<style>
.error-text {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="card">
<div class="card-body">
<form method="post" name="myForm" id="myForm">
<div class="form-group">
<label for="exampleInputName1">Full name</label>
<input type="text" class="form-control" name="name" id="exampleInputName1" aria-describedby="nameHelp" placeholder="Enter name">
<!-- 专门用来显示错误的元素 -->
<div id="nameError" class="error-text" style="display: none;"></div>
</div>
<button type="submit" name="login" class="btn btn-primary">Submit</button>
</form>
<script>
class User {
    constructor() {
        // 只获取DOM元素引用，不提前拿值
        this.form = document.getElementById("myForm");
        this.nameInput = document.myForm.name;
        this.errorElement = document.getElementById("nameError");
    }
    submitForm() {
        this.form.onsubmit = (e) => {
            // 先阻止表单默认提交行为，完成验证后再决定是否提交
            e.preventDefault();
            // 每次提交时才获取输入框的当前值，还做了去空格处理
            const userName = this.nameInput.value.trim();
            
            if(userName === "" || userName === null) {
                this.errorElement.textContent = "Name Required";
                this.errorElement.style.display = "block";
                return false;
            } else {
                // 验证通过，隐藏错误提示，再提交表单
                this.errorElement.style.display = "none";
                this.form.submit();
            }
        }
    }
}
let user = new User();
user.submitForm();
</script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

• 延迟获取输入值：把获取输入框内容的操作移到表单提交的回调里，确保每次判断的都是用户当前的输入。
• 替换错误提示方式：用专门的DOM元素显示错误，不会覆盖整个页面，体验更顺畅。
• 解决this指向问题：用箭头函数作为onsubmit的回调，保证函数内部的this能正确指向类实例。
• 拦截默认提交行为：先阻止表单自动提交，验证通过后再手动触发提交逻辑。

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