表单验证
HTML5新增有关表单验证的内容:
1. 提供一系列可用于验证的元素或类型, 比如
2. 提供一系列用于验证的属性:
required属性: 验证是否为空
pattern属性: 验证与指定正则表达式是否一致
min属性: 验证是否小于最小值
max属性: 验证是否大于最大值
step属性: 验证是否符合步长
minlength属性: 验证内容的长度是否小于最小长度
axlength属性: 验证并限制内容的长度是否大于最大长度
注意:
验证是在提交表单时进行验证
验证属性一般情况需要与DOM(visibility对象)配合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
</head>
<body>
<form action="#">
<fieldset>
<legend>表单验证</legend>
<input type="text" placeholder="请输入你的用户名" required>
<br>
<input type="text" placeholder="请输入你的地址" pattern="^[a-zA-Z0-9]{6,12}$">
<br>
<input type="password" minlength="4" maxlength="8">
<br>
<input type="number" min="2" max="10" step="2">
<br>
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>