HTML5表单验证
HTML5引入了表单验证API，可以通过设置<input>元素的required, pattern, min和max等属性来实现表单验证。当表单提交时，如果输入不满足这些约束条件，浏览器将显示一个警告，并阻止表单的提交。
以下是一个简单的HTML5表单验证示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Form Validation Example</title>
</head>
<body>
<form action="/submit-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required pattern="[A-Za-z]{3,15}">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="120" required>
<input type="submit" value="Submit">
</form>
</body>
</html>在这个例子中，每个输入字段都被标记为required，这意味着它们在表单提交时不能为空。pattern属性用于username，用于指定一个正则表达式，输入的用户名必须匹配这个模式（这里是3到15个字母的字符串）。email输入被标记为email类型，自动验证输入的格式是否为有效的电子邮件地址。number类型的输入通过min和max属性限定了年龄的范围。
如果输入不满足这些约束条件，浏览器将显示一个警告，并阻止表单的提交。
评论已关闭