DOM 验证学习笔记

DOM 验证是指通过 JavaScript 操作文档对象模型（DOM）中的元素和属性，实现表单验证、数据校验等功能。主要用于网页开发中对用户输入的数据进行合法性验证。

1. 表单验证

表单验证是 DOM 验证的重要应用之一，可以通过以下几种方式实现：

1.1 HTML5 验证属性

HTML5 新增了很多验证属性，例如 required、maxlength、min、max 等。这些属性可以在表单元素中设置，浏览器会自动校验用户输入的数据是否合法。例如：

htmlCopy Code
<input type="text" name="username" required maxlength="10">

上面的代码定义了一个文本输入框，要求用户必须输入内容，并且输入长度不超过 10 个字符。

1.2 JavaScript 验证

JavaScript 可以对表单进行更加灵活的验证，例如弹窗提示、动态修改样式、异步校验等。常见的做法是通过监听表单的 submit 事件，在事件处理函数中进行校验。例如：

htmlCopy Code
<form id="myform" onsubmit="return checkForm()">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">提交</button>
</form>

<script>
function checkForm() {
  var username = document.forms["myform"]["username"].value;
  var password = document.forms["myform"]["password"].value;
  if (username == "" || password == "") {
    alert("用户名和密码不能为空！");
    return false;
  }
  return true;
}
</script>

上面的代码定义了一个表单，要求用户输入用户名和密码，点击提交按钮后会触发 checkForm() 函数。该函数通过获取表单元素的值，判断用户名和密码是否为空，如果为空则弹出提示框并返回 false，否则表单提交成功。

2. 数据校验

除了表单验证外，DOM 验证还可以用于数据校验。例如对于一个数字输入框，需要保证用户输入的是一个合法的数字。常见的方式是通过正则表达式进行校验。例如：

htmlCopy Code
<input type="text" name="number" id="number">
<button onclick="checkNumber()">检查</button>

<script>
function checkNumber() {
  var number = document.getElementById("number").value;
  var reg = /^[0-9]+$/;
  if (!reg.test(number)) {
    alert("请输入一个合法的数字！");
  }
}
</script>

上面的代码定义了一个数字输入框和一个检查按钮。按钮点击后会调用 checkNumber() 函数，该函数使用正则表达式判断用户输入的是否为一个合法的数字，如果不是则弹出提示框。

实例演示

下面是一个基于表单验证的实例演示。该实例要求用户输入用户名、密码和确认密码，并且两次输入的密码必须一致。如果校验通过，则弹出提示框并返回 true，否则弹出错误信息并返回 false。

htmlCopy Code
<form onsubmit="return checkForm()">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required><br>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required><br>

  <label for="confirm">确认密码：</label>
  <input type="password" id="confirm" name="confirm" required><br>

  <button type="submit">注册</button>
</form>

<script>
function checkForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var confirm = document.getElementById("confirm").value;

  if (password != confirm) {
    alert("两次输入的密码不一致！");
    return false;
  }

  alert("注册成功！");
  return true;
}
</script>

上述代码实现了一个简单的表单验证功能，通过了这个例子，你可以更好的了解 DOM 验证的基础应用。