HTML登录表单input标签required属性在Chrome中失效问题求助

问题出在你的登录按钮是<a>标签而非表单的提交按钮——HTML5的required属性只有在表单触发submit事件时才会激活浏览器自带的校验，而<a>标签的点击不会触发表单的提交流程，所以Chrome里的required完全没起作用。再加上你的JS代码没做非空检查，导致空值也能执行后续操作。

下面给你两种可行的解决方案，按需选择：

方案1：修复按钮，利用HTML5原生required校验 #

把<a>标签换成表单专属的<button type="submit">，保留原有样式，同时监听表单的submit事件阻止默认提交（因为你是模拟登录，不需要真的提交到服务器）：

修改后的HTML代码 #

<div ng-app ng-init="checked = false">
<form class="form-signin" name="form" id="loginForm">
<label for="username">Username</label>
<input class="form-styling" id="user" type="text" name="username" required />
<label for="password">Password</label>
<!-- 建议把密码框改成type="password"，更符合登录场景 -->
<input class="form-styling" type="password" name="password" required />
<div class="btn-animate">
<button class="btn-signin" type="submit">Sign in</button>
</div>
</form>
<!-- 用div显示欢迎语更合理，div没有value属性 -->
<div id="txtOutput"></div>
</div>

配套JS代码 #

// 监听表单提交事件
$("#loginForm").submit(function(e) {
  // 阻止表单默认的跳转提交行为
  e.preventDefault();
  
  // 此时required已经校验过输入非空，直接执行你的业务逻辑
  $(".container").toggleClass("state_signed-in");
  sayHi();
});

function sayHi() {
  var txtName = document.getElementById("user");
  var txtOutput = document.getElementById("txtOutput");
  var name = txtName.value.trim();
  // 用textContent设置div内容，替代无效的value属性
  txtOutput.textContent = "Hi there, " + name + "!";
}

这样修改后，点击按钮会自动触发浏览器的required校验：如果输入框为空，Chrome会弹出原生提示，且不会执行后续的切换样式和欢迎语逻辑，完全符合你的需求。

方案2：纯JS手动实现空值拦截（保留标签） #

如果坚持要用<a>标签，就在点击事件里手动检查两个输入框的内容：

修改后的HTML按钮部分 #

<div class="btn-animate">
<!-- 用href="javascript:void(0)"避免页面跳转 -->
<a class="btn-signin" href="javascript:void(0)" onClick="handleLogin()">Sign in</a>
</div>

配套JS代码 #

function handleLogin() {
  // 获取用户名和密码输入框
  var usernameInput = document.getElementById("user");
  var passwordInput = document.querySelector('input[name="password"]');
  
  // 去除首尾空格，避免用户输入空白字符绕过校验
  var username = usernameInput.value.trim();
  var password = passwordInput.value.trim();
  
  // 检查是否为空
  if (!username || !password) {
    // 自定义提示，也可以改成页面内的提示元素
    alert("请输入用户名和密码！");
    // 自动聚焦到空的输入框，提升用户体验
    !username ? usernameInput.focus() : passwordInput.focus();
    return; // 终止后续操作
  }
  
  // 输入非空，执行登录后的逻辑
  $(".container").toggleClass("state_signed-in");
  sayHi();
}

function sayHi() {
  var txtName = document.getElementById("user");
  var txtOutput = document.getElementById("txtOutput");
  var name = txtName.value.trim();
  txtOutput.textContent = "Hi there, " + name + "!";
}

这种方式完全脱离HTML5的required，纯手动校验空值，灵活性更高，适合需要自定义提示样式的场景。

小建议 #

1. 密码输入框建议用type="password"，避免输入内容明文显示；
2. 显示欢迎语的元素优先用<div>/<p>，这类元素没有value属性，用textContent设置内容更规范；
3. 校验时记得去除输入内容的首尾空格，防止用户输入空白字符绕过校验。

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