如何用JS实现输入值相同时禁用HTML表单提交按钮的验证器

首先需要给原HTML元素添加标识，方便JavaScript精准获取和操作：

<input type="text" id="input1" value="john">
<input type="text" id="input2" value="john">
<button id="submitBtn">Test</button>

接下来编写原生JavaScript逻辑，实现实时验证：

// 获取页面元素
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const submitBtn = document.getElementById('submitBtn');

// 定义验证函数
function checkInputs() {
    // 对比两个输入框的值（去除首尾空格避免误判）
    const valuesMatch = input1.value.trim() === input2.value.trim();
    // 匹配时禁用按钮，否则启用
    submitBtn.disabled = valuesMatch;
}

// 页面加载完成后先执行一次，处理初始值
checkInputs();

// 给两个输入框绑定输入事件，实时触发验证
input1.addEventListener('input', checkInputs);
input2.addEventListener('input', checkInputs);

核心说明 #

• 绑定input事件确保用户输入时实时更新验证状态
• 用trim()处理输入值，避免空格导致的无效匹配
• 初始化时执行一次验证，保证初始值匹配时按钮默认处于禁用状态

内容的提问来源于stack exchange，提问作者Shafer th