表格和验证
简介
在将用户输入的表单数据提交到服务器之前,确保以正确的格式填写所有必需的表单控件非常重要。此客户端表单验证有助于确保输入的数据符合各种表单控件中规定的要求。
前提 | 计算机知识,对 HTML、CSS 和 JavaScript 有一定的理解。 |
---|---|
目的 | 了解什么是客户端表单验证,为什么它很重要,以及如何应用各种技术来实现它。 |
客户端验证是一种初始检查,也是良好用户体验的一个重要特征。在客户端捕获无效数据后提醒用户,用户可以立即修改无效数据。如果无效数据到达服务器后再被拒绝,然后返回客户端提醒用户修改他们的数据,则会有明显的延迟。
但是,也不应该将客户端验证视为全面的安全措施!
因为客户端验证太容易绕过,因此恶意用户仍然可以轻松地将不良数据发送到服务器,所以应该始终在服务器端和客户端对任何表单提交的数据执行验证,包括安全检查。
什么是表单验证?
当用户在网站注册账户的时候,如果没有按照网站预期的格式输入数据时,往往会收到反馈。比如收到如下提醒:
- “此字段为必填字段”(您不能将此字段留空)。
- “请以 xxx-xxxx 格式输入您的电话号码”(需要特定的数据格式才能被视为有效)。
- “请输入有效的电子邮件地址”(您输入的数据格式不正确)。
- “您的密码长度需要介于 8 到 30 个字符之间,并包含一个大写字母、一个符号和一个数字。”(您的数据需要非常特定的数据格式)。
以上提醒就属于表单验证。
当用户输入数据时,浏览器(和 Web 服务器)将检查数据的格式是否正确,以及是否在设置的约束范围内。在浏览器中完成的验证称为客户端验证,而在服务器上完成的验证称为服务器端验证。
如果信息格式正确,应用程序允许将数据提交到服务器,通常还会将数据保存到数据库中。如果信息格式不正确,则会向用户提供一条错误消息,说明需要更正的内容,并让他们重试。
为什么需要表单验证
主要有三个原因:
- 希望以正确的格式获得正确的数据。如果用户的数据以错误的格式存储、不正确或完全遗漏,应用程序将无法正常运行。
- 希望保护用户的数据。通过强制用户输入安全的密码可以更轻松地保护他们的帐户信息。
- 希望保护自己。恶意用户可以通过多种方式滥用未受保护的表单来损坏应用程序。
警告: 永远不要信任从客户端传递到服务器的数据。即使您的表单正确验证并防止客户端上的格式输入错误,恶意用户仍可以更改网络请求。
不同类型的客户端验证
在 Web 上会遇到两种不同类型的客户端验证:HTML 表单验证和 JavaScript 表单验证。
HTML 表单验证
HTML 表单属性可以定义需要哪些表单控件,以及用户输入的数据必须采用哪种格式才能有效。
自动 HTML 表单验证在 Internet Explorer 9 或更早版本中不起作用。
示例:必填字段验证
<!DOCTYPE html>
<html>
<body>
<h2>HTML 验证</h2>
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="提交">
</form>
<p>如果用户点击提交,但未填写文本字段,浏览器将显示一条错误消息。</p>
</body>
</html>
JavaScript 表单验证
通常包括 JavaScript 以增强或自定义 HTML 表单验证。
示例一:必填字段验证
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript 验证</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
姓名: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
示例二:字段范围验证
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 验证</h2>
<p>请输入1~10之间的数字:</p>
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() {
// 获取 id=“numb” 的输入字段的值
let x = document.getElementById("numb").value;
// 如果 x 不是数字或小于 1 或大于 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "输入不合规";
} else {
text = "输入合规";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
客户端验证往往可以在很少或没有 JavaScript 的情况下完成。HTML 验证比 JavaScript 更快,但比 JavaScript 验证的可定制性差。通常建议使用强大的 HTML 功能开始表单,然后根据需要使用 JavaScript 增强用户体验。
使用内置表单验证
表单控件最重要的功能之一是能够在不依赖 JavaScript 的情况下验证大多数用户数据。这是通过在表单元素上使用 validation 属性来完成的。
required
:指定在提交表单之前是否需要填写表单域。minlength
和maxlength
:指定文本数据(字符串)的最小和最大长度。min
、max
和step
:指定数字输入类型的最小值和最大值,以及值的增量或步长(从最小值开始)。type
:指定数据是否需要为数字、电子邮件地址或其他特定预设类型。pattern
:指定一个正则表达式,该表达式定义输入的数据需要遵循的模式。
如果表单字段中输入的数据遵循了应用于该字段的属性指定的所有规则,则认为该数据有效,否则被视为无效。
当元素有效时,以下情况为 true:
- 该元素与
:valid
CSS 伪类匹配,该伪类允许将特定样式应用于有效元素。如果用户已与控件交互,则控件也将匹配:user-valid
,并且可能会匹配其他 UI 伪类,例如:in-range
,具体取决于输入类型和属性。 - 如果用户尝试发送数据,并且没有其他因素组织(例如 JavaScript),浏览器将提交表单。
当元素无效时,以下情况为 true:
- 该元素与
:invalid
CSS 伪类匹配。如果用户已与控件交互,则它还匹配:user-invalid
CSS 伪类。其他 UI 伪类也可能匹配,例如:out-of-range
,具体取决于错误。这些允许将特定样式应用于无效元素。 - 如果用户尝试发送数据,浏览器将阻止表单提交并显示错误消息。错误消息将根据错误类型而有所不同。