表格和验证

#前端学习


简介

在将用户输入的表单数据提交到服务器之前,确保以正确的格式填写所有必需的表单控件非常重要。此客户端表单验证有助于确保输入的数据符合各种表单控件中规定的要求。

前提 计算机知识,对 HTML、CSS 和 JavaScript 有一定的理解。
目的 了解什么是客户端表单验证,为什么它很重要,以及如何应用各种技术来实现它。

客户端验证是一种初始检查,也是良好用户体验的一个重要特征。在客户端捕获无效数据后提醒用户,用户可以立即修改无效数据。如果无效数据到达服务器后再被拒绝,然后返回客户端提醒用户修改他们的数据,则会有明显的延迟。

但是,也不应该将客户端验证视为全面的安全措施!

因为客户端验证太容易绕过,因此恶意用户仍然可以轻松地将不良数据发送到服务器,所以应该始终在服务器端和客户端对任何表单提交的数据执行验证,包括安全检查。


什么是表单验证?

当用户在网站注册账户的时候,如果没有按照网站预期的格式输入数据时,往往会收到反馈。比如收到如下提醒:

以上提醒就属于表单验证。

当用户输入数据时,浏览器(和 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>

image from clipboard

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>

image from clipboard

示例二:字段范围验证

<!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> 

image from clipboard

客户端验证往往可以在很少或没有 JavaScript 的情况下完成。HTML 验证比 JavaScript 更快,但比 JavaScript 验证的可定制性差。通常建议使用强大的 HTML 功能开始表单,然后根据需要使用 JavaScript 增强用户体验。

使用内置表单验证

表单控件最重要的功能之一是能够在不依赖 JavaScript 的情况下验证大多数用户数据。这是通过在表单元素上使用 validation 属性来完成的。

如果表单字段中输入的数据遵循了应用于该字段的属性指定的所有规则,则认为该数据有效,否则被视为无效。

当元素有效时,以下情况为 true:

当元素无效时,以下情况为 true:

练习