获取表单输入的值

JavaScript提供了多种方式获取表单值，开发者可根据实际场景选择最适合的方法。

1. 通过表单元素ID获取

使用document.getElementById()或document.forms获取表单，再通过.value获取输入值：

<form id="myForm">
  <input type="text" id="username" name="username" value="John">
  <input type="email" id="email" name="email" value="[email protected]">
  <button type="button" onclick="getFormValues()">获取表单值</button>
</form>

<script>
function getFormValues() {
  let form = document.getElementById("myForm");
  let usernameValue = form.username.value;
  let emailValue = form.email.value;

  console.log("用户名：" + usernameValue);
  console.log("邮箱：" + emailValue);
}
</script>

2. 使用querySelector选择器

通过document.querySelector()精准选择表单元素：

<form>
  <input type="text" id="username" name="username" value="John">
  <input type="email" id="email" name="email" value="[email protected]">
  <button type="button" onclick="getFormValues()">获取表单值</button>
</form>

<script>
function getFormValues() {
  let usernameValue = document.querySelector("#username").value;
  let emailValue = document.querySelector("#email").value;

  console.log("用户名：" + usernameValue);
  console.log("邮箱：" + emailValue);
}
</script>

3. 处理单选按钮和复选框

使用document.querySelectorAll()获取选中状态：

<form>
  <input type="radio" id="male" name="gender" value="male" checked>
  <label for="male">男性</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女性</label>

  <input type="checkbox" id="subscribe" name="subscribe" checked>
  <label for="subscribe">订阅</label>

  <button type="button" onclick="getFormValues()">获取表单值</button>
</form>

<script>
function getFormValues() {
  let genderValue = document.querySelector('input[name="gender"]:checked').value;
  let subscribeValue = document.querySelector("#subscribe").checked;

  console.log("性别：" + genderValue);
  console.log("是否订阅：" + subscribeValue);
}
</script>

表单验证和提交拦截

通过拦截表单提交，可在数据发送到服务器前执行验证逻辑，提升用户体验并确保数据有效性。

使用onsubmit事件

onsubmit事件在表单提交时触发，返回false阻止提交，返回true允许提交：

<form id="myForm" onsubmit="return validateForm()">
  <input type="text" id="username" name="username" required>
  <input type="email" id="email" name="email" required>
  <button type="submit">提交</button>
</form>

<script>
function validateForm() {
  let usernameInput = document.getElementById("username");
  let emailInput = document.getElementById("email");

  let usernameValue = usernameInput.value;
  let emailValue = emailInput.value;

  // 验证用户名
  if (usernameValue.trim() === "") {
    alert("请输入用户名！");
    return false;
  }

  // 验证邮箱
  if (emailValue.trim() === "") {
    alert("请输入邮箱地址！");
    return false;
  }

  // 验证通过，允许提交
  return true;
}
</script>

最佳实践建议

  • 使用HTML5内置验证属性（如required、pattern）作为基础验证
  • JavaScript验证作为补充，处理复杂业务逻辑
  • 验证失败时提供明确的错误提示信息

密码MD5加密实现

前端密码加密可增加传输安全性，但需注意MD5已被认为不够安全。

使用js-md5库

<!DOCTYPE html>
<html>
<head>
  <title>MD5加密示例</title>
</head>
<body>
  <label for="password">密码：</label>
  <input type="password" id="password">
  <button type="button" onclick="encryptPassword()">加密密码</button>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/md5.min.js"></script>
  <script>
    function encryptPassword() {
      let passwordInput = document.getElementById("password");
      let password = passwordInput.value;

      let encryptedPassword = md5(password);

      console.log("原始密码：" + password);
      console.log("加密后的密码：" + encryptedPassword);
    }
  </script>
</body>
</html>

安全提示

加密方式 安全性 适用场景
MD5 较低 仅演示用途
SHA-256 中等 通用加密需求
bcrypt 高 用户密码存储

重要提醒：生产环境中，建议使用更安全的加密算法（如SHA-256、bcrypt），并结合HTTPS传输，确保数据安全。