笔记大全

详解HTML5中表单验证的8种方法介绍

更新时间：2023-12-16

HTML5是一种用于Web开发的标准，它提供了一些用于表单验证的方法，以确保表单提交的数据的正确性和合法性。下面介绍HTML5中的8种表单验证方法。

1. 必填字段验证

使用required属性可以将表单字段设为必填字段。必填字段不能为空，否则提交表单时会显示一条错误信息。下面是一个带有必填字段验证的例子：

<form>
  <label>姓名：
    <input type="text" required>
  </label>
  <input type="submit" value="提交">
</form>

2. 数值范围验证

使用min和max属性可以限制数值的范围。比如，用户在填写年龄时，通常值在0-120之间。下面是一个带有数值范围验证的例子：

<form>
  <label>年龄：
    <input type="number" min="0" max="120">
  </label>
  <input type="submit" value="提交">
</form>

3. 邮箱验证

使用type属性设置input类型为"email"，并在input中添加required属性，以验证输入的邮箱地址格式是否正确。下面是一个带有邮箱验证的例子：

<form>
  <label>邮箱：
    <input type="email" required>
  </label>
  <input type="submit" value="提交">
</form>

4. URL验证

使用type属性设置input类型为"url"，并在input中添加required属性，以验证输入的URL地址格式是否正确。下面是一个带有URL验证的例子：

<form>
  <label>URL：
    <input type="url" required>
  </label>
  <input type="submit" value="提交">
</form>

5. 正则表达式验证

使用pattern属性可以使用正则表达式验证输入的内容。比如，下面的例子是用正则表达式验证电话号码：

<form>
  <label>电话：
    <input type="tel" pattern="\d{3}-\d{8}|\d{4}-\d{7}" required>
  </label>
  <input type="submit" value="提交">
</form>

6. 最小长度和最大长度验证

使用minlength和maxlength属性可以限定用户输入的内容的最小长度和最大长度。下面是一个带有最小长度和最大长度验证的例子：

<form>
  <label>密码：
    <input type="password" minlength="6" maxlength="12" required>
  </label>
  <input type="submit" value="提交">
</form>

7. 自定义验证

如果以上验证不能满足需求，可以使用HTML5的setCustomValidity()方法自己编写验证代码。下面是一个自定义验证的例子：

<form>
  <label>用户名：
    <input type="text" oninvalid="this.setCustomValidity('用户名不能含有空格')" oninput="setCustomValidity('')" required>
  </label>
  <input type="submit" value="提交">
</form>

8. 验证事件

可以使用onblur事件来实现表单实时验证。例如，当用户离开表单字段时，可以检查输入是否符合要求，并实时显示错误信息。下面是一个使用onblur事件的例子：

<form>
  <label>邮箱：
    <input type="email" onblur="checkEmail(this)" required>
  </label>
  <input type="submit" value="提交">
</form>

<script>
function checkEmail(input) {
  if (input.value.indexOf('@') == -1) {
    input.setCustomValidity('请输入合法的邮箱地址');
  } else {
    input.setCustomValidity('');
  }
}
</script>

总之，以上介绍了HTML5中的8种表单验证方法。表单验证对于数据合法性的保障至关重要，我们可以根据实际需求选择适合的验证方法以确保数据的正确性。

c语言编程笔录