使用JavaScript实现动态表单验证（上）

<form id="loginForm">  
    <label for="username">用户名:</label>  
    <input type="text" id="username" name="username" required>  
    <br>  
    <label for="password">密码:</label>  
    <input type="password" id="password" name="password" required>  
    <br>  
    <input type="submit" value="登录">  
</form>

document.getElementById('loginForm').addEventListener('submit', function(event) {  
    event.preventDefault(); // 阻止表单的默认提交行为  
    var username = document.getElementById('username').value;  
    var password = document.getElementById('password').value;  
    var errorMessages = []; // 用于存储错误消息的数组  
    if (username === '') {  
        errorMessages.push('请输入用户名');  
    }  
    if (password === '') {  
        errorMessages.push('请输入密码');  
    }  
    if (password.length < 8) { // 检查密码长度是否在合理范围内  
        errorMessages.push('密码长度应至少为8个字符');  
    }  
    if (errorMessages.length > 0) { // 如果存在错误消息，则显示它们并阻止表单提交  
        var errorContainer = document.getElementById('errorContainer');  
        errorContainer.innerHTML = ''; // 清空之前的错误消息  
        for (var i = 0; i < errorMessages.length; i++) {  
            var errorMessage = document.createElement('p'); // 创建一个新的段落元素来显示错误消息  
            errorMessage.textContent = errorMessages[i]; // 设置错误消息的文本内容为数组中的值  
            errorContainer.appendChild(errorMessage); // 将新的段落元素添加到错误容器中  
        }  
    } else { // 如果所有验证都通过，则提交表单  
        this.submit(); // 注意：这会再次触发submit事件，因此需要再次调用event.preventDefault()来阻止无限循环。这可以通过在事件监听器中设置一个标志变量来实现。例如，在事件监听器中设置一个名为'submitted'的标志变量，并检查它是否已经设置。如果已经设置，则不再调用event.preventDefault()。如果没有设置，则设置它并提交表单。这样做可以避免无限循环的问题。然后，在提交表单后，可以将标志变量重置为false，以便下次提交时再次检查它。这样，只有在第一次提交时才会触发验证过程，而后续的提交则不会。这是一个重要的细节，因为它可以避免无限循环的问题并提高用户体验。通过这种方式，我们可以确保只有当用户成功通过验证时才会提交表单，而不会出现无限循环的情况。

<button id="checkFormBtn">检查表单</button>

document.getElementById('checkFormBtn').addEventListener('click', function() {  
    var form = document.getElementById('loginForm');  
    var isValid = true;  
    var errorMessages = [];  
    // 检查用户名和密码字段  
    var username = form.elements['username'].value;  
    var password = form.elements['password'].value;  
    if (username === '') {  
        errorMessages.push('请输入用户名');  
        isValid = false;  
    }  
    if (password === '') {  
        errorMessages.push('请输入密码');  
        isValid = false;  
    }  
    if (password.length < 8) {  
        errorMessages.push('密码长度应至少为8个字符');  
        isValid = false;  
    }  
    // 显示检查结果  
    if (isValid) {  
        alert('表单验证成功！');  
    } else {  
        displayErrorMessages(errorMessages);  
    }  
});