无需鼠标移动与表单验证，实现表单字段输入联动提示控制

当然可以直接给表单字段绑定专属事件来实现需求，根本用不着onmousemove这种不搭边的事件。针对「用户开始填写字段时错误消息消失，删除内容到空时错误消息重新显示」的需求，推荐用input事件（实时监听内容变化），还可以搭配focus事件优化体验，全程不用触发表单验证。

实现代码示例 #

HTML 部分

<h1>表单字段事件演示</h1>
<div class="form-group">
  <label for="name">姓名</label>
  <input class="form-control" type="text" name="name" id="name" placeholder="请输入姓名">
  <!-- 错误消息元素 -->
  <div id="nameError" class="error-message" style="color: red; display: block;">请输入姓名</div>
</div>

JavaScript 部分

// 获取目标字段和错误消息元素
const nameField = document.getElementById('name');
const nameError = document.getElementById('nameError');

// 定义控制错误消息显示的函数
function toggleErrorMessage() {
  // 字段内容不为空时隐藏错误，为空则显示
  nameError.style.display = nameField.value.trim() !== '' ? 'none' : 'block';
}

// 绑定input事件：内容每有变化就触发判断
nameField.addEventListener('input', toggleErrorMessage);

// 可选：绑定focus事件，用户点击字段时直接隐藏错误
nameField.addEventListener('focus', () => {
  nameError.style.display = 'none';
});

// 页面加载时初始化错误消息状态
toggleErrorMessage();

关键说明 #

• input事件：不管是输入字符、删除内容还是粘贴文本，只要字段内容变了就会触发，能精准控制错误消息的显示状态。
• focus事件：可选添加，用户点击字段准备输入时就把错误消息藏起来，避免影响输入体验。
• 整个逻辑完全不依赖表单验证，只看字段内容是否为空，完全符合你的要求。

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