点击登录按钮时自定义input:valid为false的提示并禁用默认提示

核心思路 #

• 禁用浏览器默认表单验证：给<form>添加novalidate属性，阻止浏览器自动弹出默认提示
• 手动触发验证逻辑：监听登录按钮点击事件，手动检查输入框的验证状态
• 自定义提示文本：根据输入框的具体错误类型，显示对应的自定义提示

具体实现步骤 #

1. HTML结构 #

<form id="loginForm" novalidate>
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" id="username" required>
    <span class="error-message" id="usernameError"></span>
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" id="password" required minlength="6">
    <span class="error-message" id="passwordError"></span>
  </div>
  <button type="submit" id="loginBtn">登录</button>
</form>

• novalidate：直接禁用浏览器默认验证行为
• 每个输入框对应一个专门显示自定义提示的<span>元素
• 保留原生验证属性（required、minlength等），用于后续JS判断验证状态

2. JavaScript逻辑 #

const loginForm = document.getElementById('loginForm');
const loginBtn = document.getElementById('loginBtn');
const username = document.getElementById('username');
const password = document.getElementById('password');
const usernameError = document.getElementById('usernameError');
const passwordError = document.getElementById('passwordError');

loginBtn.addEventListener('click', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 先清空所有错误提示
  usernameError.textContent = '';
  passwordError.textContent = '';
  
  // 检查用户名验证状态
  if (!username.validity.valid) {
    if (username.validity.valueMissing) {
      usernameError.textContent = '请输入用户名';
    }
    // 可扩展其他错误类型判断，比如格式不匹配（patternMismatch）
  }
  
  // 检查密码验证状态
  if (!password.validity.valid) {
    if (password.validity.valueMissing) {
      passwordError.textContent = '请输入密码';
    } else if (password.validity.tooShort) {
      passwordError.textContent = `密码长度不能少于${password.minLength}位`;
    }
  }
  
  // 所有输入验证通过后，再执行登录逻辑
  if (loginForm.checkValidity()) {
    // 这里填写实际登录提交代码，比如 loginForm.submit();
    console.log('验证通过，执行登录');
  }
});

• validity对象：原生提供的验证状态对象，包含valueMissing（未填必填项）、tooShort（长度不足）等多种错误类型
• checkValidity()：检查整个表单所有输入是否通过验证，返回布尔值
• 针对不同错误类型设置对应自定义提示，精准反馈问题

3. 踩坑说明 #

• 你之前用的required="123"是错误用法：required是布尔属性，只要标签上存在该属性就表示必填，赋值不会起任何作用
• aria-describedby仅用于辅助技术（如屏幕阅读器）关联错误信息，本身不会自动显示提示文本，必须配合JS控制提示元素的显示/隐藏

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