HTML---表单验证

作者：System 时间：2024年08月21日分类：所有,html 字数：1103

在HTML中，可以使用内置的表单验证功能来确保用户输入的数据是有效的。这些功能可以通过HTML表单元素的属性来实现，例如 required, pattern, min, max, 和 type 等。

以下是一个简单的HTML表单，包含了一些常见的验证：




<!DOCTYPE html>
<html>
<head>
<title>表单验证示例</title>
</head>
<body>
 
<h2>注册表单</h2>
 
<form action="/submit_form" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>
  <br><br>
 
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email" required>
  <br><br>
 
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" pattern="[a-zA-Z0-9]{8,}" title="密码至少8个字符，不包含特殊字符">
  <br><br>
 
  <label for="age">年龄:</label>
  <input type="number" id="age" name="age" min="18" max="120">
  <br><br>
 
  <input type="submit" value="提交">
</form>
 
</body>
</html>

在这个例子中：

用户名和电子邮件字段被标记为 required，这意味着这些字段在表单提交前必须填写。
密码字段使用 pattern 属性来定义一个正则表达式，用于验证密码必须包含至少8个字符。
年龄字段使用 min 和 max 属性限制了可接受的数字范围。
提交按钮将表单数据发送到服务器的 /submit_form 路径。

这些验证都是在客户端进行的，如果浏览器支持HTML5验证，这些验证会在用户尝试提交表单之前触发。如果数据不符合验证条件，浏览器会显示一个警告，并阻止表单的提交。

HTML---表单验证

评论已关闭

推荐阅读