禁用表单提交按钮，直到填写完所有输入/文本区域字段，而不使用for循环(无jQuery)

要实现禁用表单提交按钮，直到填写完所有输入/文本区域字段的功能，可以使用JavaScript来监听表单字段的变化，并根据字段的填写情况动态启用或禁用提交按钮。以下是一个详细的解决方案：

基础概念

事件监听：JavaScript可以监听DOM元素的事件，如input事件，当用户在输入框中输入内容时触发。
表单验证：通过检查表单字段的值来确定是否所有字段都已填写。
DOM操作：JavaScript可以修改DOM元素的属性，如disabled属性，来控制按钮的状态。

类型与应用场景

类型：这是一种前端表单验证技术。
应用场景：适用于任何需要用户填写表单的网页应用，如注册页面、登录页面、数据提交表单等。

示例代码

以下是一个完整的示例代码，展示了如何实现这一功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation</title>
    <style>
        .form-group {
            margin-bottom: 15px;
        }
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name">
        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email">
        </div>
        <div class="form-group">
            <label for="message">Message:</label>
            <textarea id="message" name="message"></textarea>
        </div>
        <button type="submit" id="submitBtn" disabled>Submit</button>
    </form>

    <script>
        const form = document.getElementById('myForm');
        const inputs = Array.from(form.querySelectorAll('input, textarea'));
        const submitBtn = document.getElementById('submitBtn');

        function checkFormValidity() {
            const isFormValid = inputs.every(input => input.value.trim() !== '');
            submitBtn.disabled = !isFormValid;
        }

        inputs.forEach(input => {
            input.addEventListener('input', checkFormValidity);
        });

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            if (inputs.every(input => input.value.trim() !== '')) {
                alert('Form submitted successfully!');
                // Here you can add code to handle form submission, e.g., sending data to a server
            } else {
                alert('Please fill out all fields.');
            }
        });
    </script>
</body>
</html>

解释

HTML结构：创建一个包含多个输入字段和一个提交按钮的表单。
JavaScript逻辑：
- 获取表单元素和所有输入字段。
- 定义checkFormValidity函数，检查所有输入字段是否都已填写。
- 为每个输入字段添加input事件监听器，当字段内容变化时调用checkFormValidity函数。
- 在表单提交时，阻止默认行为并进行验证，如果所有字段都已填写，则显示成功消息。