JavaScript - 表单验证：初学者指南

你好，有抱负的程序员们！今天，我们将深入了解JavaScript表单验证的精彩世界。作为一个教编程多年的老师，我可以告诉你，这是你最实用和重要的技能之一。那么，让我们开始吧！

JavaScript - Validations

什么是表单验证？

在跳入代码之前，让我们了解一下表单验证是什么以及为什么它很重要。想象一下，你正在填写一个在线订购披萨的表单。你不会希望意外地订购1000个披萨而不是1个，对吧？这就是表单验证的作用所在——它检查用户输入的数据以确保其正确且格式正确。

基本表单验证

1. 检查字段是否为空

让我们从最基本的验证开始——检查一个字段是否为空。以下是一个简单示例：

function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("名称必须填写");
return false;
}
}

在这段代码中：

我们从名为 "myForm" 的表单中获取名为 "fname" 的字段的值。
如果该值为空（空字符串），我们显示一个警告并返回 false，这阻止了表单的提交。

2. 验证数字输入

现在，让我们确保一个字段只包含数字：

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("输入无效");
return false;
}
}

这里发生了什么：

我们获取 ID 为 "myNumber" 的输入字段的值。
我们使用 isNaN() 来检查它是否不是数字。
我们还检查这个数字是否在1到100之间。
如果这些条件中的任何一个为真，我们显示一个警告并返回 false。

数据格式验证

1. 邮箱验证

最常见的验证之一是检查邮箱地址是否格式正确。以下是如何做到这一点：

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("请输入有效的邮箱地址");
return false;
}
}

这可能看起来有点吓人，但让我们分解一下：

我们使用一个正则表达式（regex）来检查邮箱格式。
正则表达式检查以下内容：
一些不是空格或 @ 的字符 ([^\s@]+)
后跟一个 @ 符号
再后跟更多不是空格或 @ 的字符
然后是一个点
最后是更多不是空格或 @ 的字符

2. 日期验证

让我们验证一个日期，确保其格式为 MM/DD/YYYY：

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("请输入有效的日期格式 MM/DD/YYYY");
return false;
}
}

这个正则表达式更复杂，但它检查以下内容：

它检查：
月份（01-12）
后跟一个 /
日期（01-31）
另一个 /
一个四位数的年份

请记住，这检查格式，但不检查日期是否有效（比如2月30日）。

将所有内容组合在一起

现在我们已经看到了单独的验证，让我们将它们组合到一个表单中：

<form name="myForm" onsubmit="return validateForm()">
姓名: <input type="text" name="fname"><br>
年龄: <input type="text" id="myNumber"><br>
邮箱: <input type="text" id="myEmail"><br>
日期: <input type="text" id="myDate"><br>
<input type="submit" value="提交">
</form>

<script>
function validateForm() {
if (!validateName() || !validateNumber() || !validateEmail() || !validateDate()) {
return false;
}
return true;
}

function validateName() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("名称必须填写");
return false;
}
return true;
}

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("年龄必须是1到100之间的数字");
return false;
}
return true;
}

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("请输入有效的邮箱地址");
return false;
}
return true;
}

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("请输入有效的日期格式 MM/DD/YYYY");
return false;
}
return true;
}
</script>

在这个完整的示例中：

我们有一个包含姓名、年龄、邮箱和日期字段的表单。
表单的 onsubmit 事件调用 validateForm()。
validateForm() 调用我们所有的单独验证函数。
如果任何验证失败，表单提交将被阻止。

结论

恭喜你！你刚刚学习了JavaScript表单验证的基础。记住，验证不仅仅是为了防止错误——它是为了创造更好的用户体验。在你继续编程之旅时，你会发现更多的方式来增强你的表单并使它们更加用户友好。

下面是一个总结我们所涵盖的验证方法的表格：

方法	目的	示例
空字段检查	确保必填字段被填写	`if (x == "")`
数字验证	检查输入是否为数字并在范围内	`if (isNaN(x) \|\| x < 1 \|\| x > 100)`
邮箱验证	验证邮箱格式	`if (!regex.test(email))`
日期格式验证	检查日期是否为正确格式	`if (!regex.test(date))`

继续练习，很快你将成为表单验证的专家！记住，每个伟大的程序员都是从你现在的地方开始的。快乐编码！

Credits: Image by storyset