跳到正文Week 4 Pre-class: Form Validation · Jimmy Huang's Blog1. What is form validation in modern web application?
Overview
表单验证是 Web 开发者必不可少的工具，它可以确保用户数据的准确性和正确处理。它有助于防止数据输入过程中出现错误，并确保使用正确的信息完成交易，从而提升用户体验。此外，表单验证对于安全性至关重要，因为它可以阻止恶意用户向应用程序提交有害数据
Why do we need form validation?
我们希望以正确的格式收集准确的数据。如果用户数据存储错误、不准确或缺失，我们的应用程序将无法正常运行。
我们优先保护用户的数据。通过要求安全的密码，我们能够帮助保护用户的账户信息。
我们同样需要保护我们的系统。恶意用户可能利用未受保护的表单来破坏我们的应用程序。
2. Server-Side Validation 服务器端验证
服务器端验证是指数据从浏览器发送到服务器后，由服务器进行验证。
例如：信用卡表单可以接受用户输入，然后将数据发送到服务器，以验证信用卡是否有效以及账户余额是否足够完成交易。
优点：
动态验证：服务器端验证更灵活，因为它可以访问数据库并执行复杂的验证逻辑。
一致性与兼容性：与客户端验证不同，服务器端验证能够在不同设备、浏览器和网站上保持一致。
更高的安全性：它能阻止无效或恶意数据进入数据库，从而提高安全性。
缺点：
👉 因此，绝不能只依赖服务器端验证，我们还需要在客户端加入验证。
3. Client-Side Validation 客户端验证
客户端验证是在数据发送到服务器之前，在浏览器中进行检查。
这种验证确保用户提交的数据符合表单控件指定的所有要求。
例如：注册表单可能要求用户填写个人信息和简短自我介绍。
优点：
快速反馈：验证在用户电脑上完成，可即时反馈，无需刷新页面。
数据准确性：能及时发现错误输入并提醒用户，确保收集到的数据准确。
改善用户体验：即时反馈能显著提升用户体验。
减少服务器负担：只接受有效数据，降低了服务器负载并减少带宽消耗。
缺点：
3.1 HTML Built-in form validation
HTML 内置表单验证使用 HTML 表单验证功能。此类验证通常不需要太多 JavaScript 代码。内置表单验证的性能优于 JavaScript，但其可定制性不如 JavaScript 验证。
必填字段（Requiring an Input）
当某个输入框必须填写才能提交表单时，可以在<input>元素中添加required 属性
设置最小值与最大值（Specifying Minimum and Maximum Values）
在数字输入框中，开发者可以使用 min 和 max 属性，限制用户输入或选择的数值范围。
指定数据类型（Indicating Type）
通过 type 属性 可以指定用户需要输入的数据类型，例如邮箱、数字、文本或密码
text：普通文本
email：邮箱地址
number：数字
password：密码
限制文本长度（Constraining Text Length）
开发者可以使用 minlength 和 maxlength 属性，设置用户输入的最少和最多字符数
匹配文本模式（Matching Text Pattern）
最后，开发者可以通过 pattern 属性 设置正则表达式（regex），要求用户输入必须符合设定的规则。只有当输入与正则匹配时，表单才会通过验证。
3.2 JavaScript validation
JavaScript 验证使用 JavaScript 编写。此验证完全可自定义，但您需要自行创建（或使用库）。
除了之前提到的 必填字段（required） 和 正则表达式（pattern） 等 HTML 内置验证方式，我们还可以通过 JavaScript 实现更灵活的表单验证，从而提升用户体验并确保数据完整性。
Example
1. 监听表单提交事件 (Event Listener for Form Submission)
这行代码为表单添加了一个提交事件的监听器。
当用户点击提交按钮时，监听器中的函数会被执行。
2. 初始化验证状态 (Initial Validation State)
3. 验证必填字段 (Validating the Required Field: Name)
4. 验证人数范围 (Validating the Number of Guests)
获取 guests 字段，并将输入值转换为整数。
如果人数小于 2 或大于 10，则提示错误。
5. 验证年龄输入 (Validating the Age Input)
检查 age 是否为空，或输入的值是否为数字。
如果无效，则提示输入有效的年龄。
6. 验证简介长度 (Validating the Bio Length)
7. 验证电话号码格式 (Validating the Phone Number Pattern)
8. 阻止提交无效表单 (Preventing Form Submission if Invalid)
Summary
通过 JavaScript，我们可以实现 必填验证、数值范围验证、数值有效性检查、文本长度限制、正则模式匹配 等功能。这比仅依赖 HTML 的验证更灵活，能显著提升用户体验。
<form>
<label for="name">Name<label>
<input id="name" required>
</form>
<form>
<label for="guests">Number of guests<label>
<input id="guests" min="2" max="10" required>
</form>
<form>
<label for="age">Age<label>
<input id="age" type="number" required>
</form>
<form>
<textarea>Introduce yourself in less than 250 characters...</textarea>
<input type="text" minlength="50" maxlength="250" required>
</form>
<form>
<label for="telephone">Enter your phone number<label>
<input id="telephone" type="number" pattern="[0-9] {10}"/>
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Form Validation</title>
</head>
<body>
<form id="combinedForm">
<label for="name">Name:</label>
<input id="name" type="text">
<br>
<label for="guests">Number of guests:</label>
<input id="guests" type="number">
<br>
<label for="age">Age:</label>
<input id="age" type="number">
<br>
<label for="bio">Introduce yourself in less than 250 characters:</label>
<textarea id="bio"></textarea>
<br>
<label for="telephone">Enter your phone number:</label>
<input id="telephone" type="text">
<br>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('combinedForm').addEventListener('submit',
function(event) {
let formIsValid = true;
// Validate required field
const nameField = document.getElementById('name');
if (nameField.value.trim() === '') {
alert('Name is required');
formIsValid = false;
}
// Validate number range
const guestsField = document.getElementById('guests');
const guestsMin = 2;
const guestsMax = 10;
const guestsValue = parseInt(guestsField.value);
if (guestsValue < guestsMin || guestsValue > guestsMax) {
alert(`Number of guests must be between ${guestsMin} and ${guestsMax}`);
formIsValid = false;
}
// Validate input type
const ageField = document.getElementById('age');
if (isNaN(ageField.value) || ageField.value.trim() === '') {
alert('Please enter a valid age');
formIsValid = false;
}
// Validate text length
const bioField = document.getElementById('bio');
const bioMinLength = 50;
const bioMaxLength = 250;
const bioLength = bioField.value.length;
if (bioLength < bioMinLength || bioLength > bioMaxLength) {
alert(`Bio must be between ${bioMinLength} and ${bioMaxLength} characters`);
formIsValid = false;
}
// Validate pattern
const phoneField = document.getElementById('telephone');
const phonePattern = /^\d{10}$/;
if (!phonePattern.test(phoneField.value)) {
alert('Please enter a valid 10-digit phone number');
formIsValid = false;
}
if (!formIsValid) {
event.preventDefault();
}
});
</script>
</body>
</html>
document.getElementById('combinedForm').addEventListener('submit', function(event) {
// 验证逻辑写在这里
});
const nameField = document.getElementById('name');
if (nameField.value.trim() === '') {
alert('Name is required');
formIsValid = false;
}
const guestsField = document.getElementById('guests');
const guestsMin = 2;
const guestsMax = 10;
const guestsValue = parseInt(guestsField.value);
if (guestsValue < guestsMin || guestsValue > guestsMax) {
alert(`Number of guests must be between ${guestsMin} and ${guestsMax}`);
formIsValid = false;
}
const ageField = document.getElementById('age');
if (isNaN(ageField.value) || ageField.value.trim() === '') {
alert('Please enter a valid age');
formIsValid = false;
}
const bioField = document.getElementById('bio');
const bioMinLength = 50;
const bioMaxLength = 250;
const bioLength = bioField.value.length;
if (bioLength < bioMinLength || bioLength > bioMaxLength) {
alert(`Bio must be between ${bioMinLength} and ${bioMaxLength} characters`);
formIsValid = false;
}
const phoneField = document.getElementById('telephone');
const phonePattern = /^\d{10}$/;
if (!phonePattern.test(phoneField.value)) {
alert('Please enter a valid 10-digit phone number');
formIsValid = false;
}
if (!formIsValid) {
event.preventDefault();
}