JavaScript表单验证实战：从基础校验到多元素处理
作者：纸飞机时间：2026-10-23 10:20:13浏览：68
本文详解JavaScript在表单验证中的应用，涵盖从最简单的必填项空白检查到复杂的密码一致性校验。通过注册按钮点击事件与表单提交事件两种绑定方式，演示如何获取用户输入并返回验证结果。此外，文章进一步讲解如何处理input、textarea、checkbox、radio及select等多种表单元素，包括错误次数统计与按钮锁定机制，帮助开发者构建健壮的前端交互系统。
JavaScript在前端开发中的核心职责之一是实现表单数据的合法性校验。
基础表单验证：必填项与事件绑定
1最简单的表单验证-禁止空白的必填项目
1.1最简单的HTML结构
构建Web应用时，用户注册模块是最基础的交互环节，也是系统数据收集的起点。
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单列表的html结构</title>
</head>
<body>
<form method="post" action="">
账户:<input type="text" name=""/><br/><br/>
密码:<input type="password" name=""/><br/><br/>
确认:<input type="password" name=""/><br/><br/>
<input type="submit" value="注册" />
</form>
</body>
</html>
1.2绑定验证功能
当用户点击“注册”按钮时，我们需要通过为该按钮添加onclick事件属性来触发验证逻辑，具体调用eg.regCheck()函数。
示例如下：
注册事件
<!DOCTYPE html>
<html>
<!--绑定验证功能，注册事件-->
<head>
<meta charset="utf-8">
<title>简单列表的html结构</title>
</head>
<body>
<form method="post" action="">
账户:<input type="text" name=""/><br/><br/>
密码:<input type="password" name=""/><br/><br/>
确认:<input type="password" name=""/><br/><br/>
<input type="submit"
value="注册"
onclick="return eg.regCheck();"/>
</form>
<script >
//声明一个对象,当做命名空间来使用
var eg = {};
eg.regCheck = function(){
}
</script>
</body>
</html>
在eg.regCheck()函数中，我们需要执行具体的验证行为：首先通过input标签的id属性获取用户输入的账户信息，随后进行逻辑判断，最终返回验证结果（true或false）。
示例如下：
给表单添加验证功能
<!DOCTYPE html>
<html>
<!--给表单添加验证功能-->
<head>
<meta charset="utf-8">
<title>简单列表的html结构</title>
</head>
<body>
<form method="post" action="">
账户:<input type="text" name="" id="userid"/><br/><br/>
密码:<input type="password" name="" id="userpwd"/><br/><br/>
确认:<input type="password" name="" id="userpwd2"/><br/><br/>
<input type="submit"
value="注册"
onclick="return eg.regCheck();"/>
</form>
<script >
//声明一个对象,当做命名空间来使用
//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率
var eg = {};
eg.$ = function(id){
return document.getElementById(id);
};
eg.regCheck = function(){
var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
if(uid.value == ''){
alert('账户不能为空!');
//返回false就会阻止表单form提交
return false;
}
if(upwd.value == ''){
alert('密码不能为空!');
//返回false就会阻止表单form提交
return false;
}
if(upwd.value != upwd2.value){
alert('两次输入密码不相同!');
//返回false就会阻止表单form提交
return false;
}
return true;
};
</script>
</body>
</html>
1.3绑定验证的另一种方式
除了直接在注册按钮的onclick事件中调用验证函数外，还可以利用form标签的onsubmit事件属性来实现同样的调用效果。
示例如下：
form表单绑定验证完整范例
<!DOCTYPE html>
<html>
<!--
绑定验证的另一种方式,form表单绑定验证完整示例
-->
<head>
<meta charset="utf-8">
<title>简单列表的html结构</title>
</head>
<body>
<form method="post" action="" onsubmit="return eg.regCheck();">
账户:<input type="text" name="" id="userid"/><br/><br/>
密码:<input type="password" name="" id="userpwd"/><br/><br/>
确认:<input type="password" name="" id="userpwd2"/><br/><br/>
<input type="submit"
value="注册"
/>
</form>
<script>
//声明一个对象,当做命名空间来使用
//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率
var eg = {};
eg.$ = function(id){
return document.getElementById(id);
};
eg.regCheck = function () {
var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
if(uid.value == ''){
alert('账户不能为空!');
//返回false就会阻止表单form提交
return false;
}
if(upwd.value == ''){
alert('密码不能为空!');
//返回false就会阻止表单form提交
return false;
}
if(upwd.value != upwd2.value){
alert('两次输入密码不相同!');
//返回false就会阻止表单form提交
return false;
}
return true;
};
</script>
</body>
</html>
复杂表单元素处理与错误统计机制
2,处理各种类型的表单元素
2.1，input,textarea,hidden和button
在基础注册表单中增加“简介”字段，该字段允许为空，但字符长度不得超过60个。同时，系统需统计用户输入错误的次数，一旦错误次数超过3次，则锁定“注册”按钮，需执行“解锁”操作后方可重新使用。
示例如下：
处理各种类型表单一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>处理各种类型表单一</title>
</head>
<body>
<form method="post" action="" onsubmit="return eg.regCheck();">
账户:<input type="text" name="" id="userid"/><br/><br/>
密码:<input type="password" name="" id="userpwd"/><br/><br/>
确认:<input type="password" name="" id="userpwd2"/><br/><br/>
简介:
<textarea name="" rows="4" cols="18" id="about">
</textarea><br/><br/>
<input type="submit"
value="注册" id="regBtn"
/>
<input type="button" value="解锁" onclick="eg.unlock"
style="display: none;" id="regUnlock">
</form>
<script>
//声明一个对象,当做命名空间来使用
//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率
var eg = {};
eg.$ = function(id){
return document.getElementById(id);
};
//主要的验证方法
eg.regCheck = function () {
var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
//value是元素自带属性
if(uid.value == ''){
alert('账户不能为空!');
eg.err();
return false;
}
if(upwd.value == ''){
alert('密码不能为空!');
eg.err();
return false;
}
if(upwd.value != upwd2.value){
alert('两次输入密码不相同!');
eg.err();
return false;
}
//新增部分
var about = eg.$("about");
//value是字符串类型的属性
if (about.value.length>60){
alert("简介太长!");
eg.err();
return false;
}
//返回true就会提交表单
return true;
};
//出错时记录错误次数
eg.err = function () {
var el = eg.$("errnum");
var old = el.value;
//把字符串转换为整数+1,并保存起来
el.value = parseInt(old)+1;
//用来检查是否应该锁定
eg.lock();
};
//通过次数判断是否要锁定
eg.lock = function(){
var err = eg.$("errnum");
if (parseInt(err.value)>2){
eg.$("regBtn").disabled = true;
//根据业务需求,输错3次就锁定
eg.$("regUnlock").style.display="block";
//同时显示解锁按钮
}
};
eg.unlock = function(){
eg.$("regBtn").disabled = false;
//根据业务需求，解锁就是让用户可以重新注册
eg.$("regUnlock").style.display="none";
//元素所有样式都挂载到style属性下
}
</script>
</body>
</html>为了实现错误统计功能，可以将统计结果存储在后台系统中，用于分析用户错误率及常见出错字段。由于这些信息无需展示给用户，可以选择使用type属性为hidden的input元素来存储这些隐藏的状态数据。
2.2checkbox,radio和select
此类元素主要用于获取用户的性别、年龄及兴趣爱好等选项信息。
示例如下：
处理各种类型表单二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>处理各种类型表单二</title>
</head>
<body>
<form method="post" action="" onsubmit="return eg.regCheck();">
账户:<input type="text" name="" id="userid"/><br/><br/>
密码:<input type="password" name="" id="userpwd"/><br/><br/>
确认:<input type="password" name="" id="userpwd2"/><br/><br/>
简介:
<textarea name="" rows="4" cols="18" id="about">
</textarea><br/><br/>
<input type="submit"
value="注册" id="regBtn"
/>
<input type="button" value="解锁" onclick="eg.unlock"
style="display: none;" id="regUnlock">
</form>
<script>
//声明一个对象,当做命名空间来使用
//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率
var eg = {};
eg.$ = function(id){
return document.getElementById(id);
};
//主要的验证方法
eg.regCheck = function () {
var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
//value是元素自带属性
if(uid.value == ''){
alert('账户不能为空!');
eg.err();
return false;
}
if(upwd.value == ''){
alert('密码不能为空!');
eg.err();
return false;
}
if(upwd.value != upwd2.value){
alert('两次输入密码不相同!');
eg.err();
return false;
}
//新增部分
var about = eg.$("about");
//value是字符串类型的属性
if (about.value.length>60){
alert("简介太长!");
eg.err();
return false;
}
//返回true就会提交表单
return true;
};
//出错时记录错误次数
eg.err = function () {
var el = eg.$("errnum");
var old = el.value;
//把字符串转换为整数+1,并保存起来
el.value = parseInt(old)+1;
//用来检查是否应该锁定
eg.lock();
};
//通过次数判断是否要锁定
eg.lock = function(){
var err = eg.$("errnum");
if (parseInt(err.value)>2){
eg.$("regBtn").disabled = true;
//根据业务需求,输错3次就锁定
eg.$("regUnlock").style.display="block";
//同时显示解锁按钮
}
};
eg.unlock = function(){
eg.$("regBtn").disabled = false;
//根据业务需求，解锁就是让用户可以重新注册
eg.$("regUnlock").style.display="none";
//元素所有样式都挂载到style属性下
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28