JavaScript账号密码验证问题：提交按钮无响应及规则修正需求

嘿，我看了你的代码，发现好几个关键问题导致点击Submit没反应，而且验证规则也没正确实现。咱们一步步把这些问题解决掉：

主要问题排查与修复 #

1. HTML输入框的类型与属性错误 #

你把user id、密码、用户名的输入框都写成了type="label"，这完全不对！label是标签元素，输入框应该用对应的类型：

• User ID 和 用户名用 type="text"
• 密码用 type="password"（这样输入内容会隐藏）
  另外，多个输入框重复用了name="id"，这会导致JS获取元素混乱，每个输入框的id和name应该唯一，方便JS定位。

2. JavaScript函数定义与元素获取错误 #

• 你写的fonk()语法错误，正确的函数定义应该是function fonk(event) {...}
• 你用document.getElementById("userid")获取元素，但HTML里的user id输入框没有id属性，所以要给它加上id="userid"，同理密码框加id="password"，用户名加id="username"
• 验证时要取输入框的value的长度，而不是元素本身的length，而且你的条件语法错误（|| >12是无效写法），还要符合需求的7-12字符规则。

3. 表单默认提交行为的处理 #

如果验证不通过，需要阻止表单的默认提交行为，不然页面会直接刷新，你看不到alert提示。可以通过event.preventDefault()来实现。

4. 用户名的字符验证需求 #

用户名仅允许包含字符（字母），可以用正则表达式/^[A-Za-z]+$/来验证，确保输入的全是字母。

修复后的完整代码 #

HTML部分 #

<fieldset style="width:20%;">
  <legend>JavaScript</legend>
  <form id="form">
    <table align="center">
      <tr>
        <td><label>User ID</label></td>
        <td><input type="text" name="userid" id="userid"></td>
      </tr>
      <tr>
        <td><label>Password</label></td>
        <td><input type="password" name="password" id="password"></td>
      </tr>
      <tr>
        <td><label>Username</label></td>
        <td><input type="text" name="username" id="username"></td>
      </tr>
      <tr>
        <td><label>Email</label></td>
        <td><input type="email" name="email"></td>
      </tr>
      <tr>
        <td><label>Sex</label></td>
        <td>
          <input type="radio" name="sex" value="male">Male 
          <input type="radio" name="sex" value="female">Female
        </td>
      </tr>
      <tr>
        <td><label>About</label></td>
        <td><textarea name="about"></textarea></td>
      </tr>
      <tr>
        <td><button type="submit" onclick="fonk(event)">Submit</button></td>
        <td><button type="reset">Reset</button></td>
      </tr>
    </table>
  </form>
</fieldset>

JavaScript部分 #

function fonk(event) {
  // 获取各个输入框元素
  const userIdInput = document.getElementById("userid");
  const passwordInput = document.getElementById("password");
  const usernameInput = document.getElementById("username");

  // 获取输入值并去除前后空格
  const userId = userIdInput.value.trim();
  const password = passwordInput.value.trim();
  const username = usernameInput.value.trim();

  // 验证User ID长度（7-12字符）
  if (userId.length < 7 || userId.length > 12) {
    alert("User ID must be 7-12 characters long.");
    event.preventDefault(); // 阻止表单提交
    return;
  }

  // 验证密码长度（7-12字符）
  if (password.length < 7 || password.length > 12) {
    alert("Password must be 7-12 characters long.");
    event.preventDefault();
    return;
  }

  // 验证用户名仅包含字母
  const usernameRegex = /^[A-Za-z]+$/;
  if (!usernameRegex.test(username)) {
    alert("Username can only contain letters.");
    event.preventDefault();
    return;
  }

  // 如果所有验证通过，表单会正常提交
}

额外说明 #

• 我去掉了HTML里多余的<br>标签，表格布局里用<tr>就足够了，<br>会导致布局混乱
• 给单选框加上了value属性，这样表单提交时能获取到选中的性别值
• 给输入值加了trim()，避免用户输入的前后空格被算入长度

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