JavaScript表单验证的三种实现方式详解

作者：异步漫步时间：2026-10-29 05:24:53浏览：649

本文通过三个完整实例，详细解析了JavaScript实现表单验证的三种常见模式：传统弹窗式验证、输入框旁实时提示验证以及基于onblur事件的失焦触发验证。每种方式均涵盖邮箱格式、密码长度、一致性校验及姓名非数字限制，帮助开发者根据实际需求选择最合适的交互方案。

本文通过具体实例，详细解析了使用JavaScript进行表单验证的多种实现方案，旨在为开发者提供实用的参考代码。

传统弹窗式表单验证

第一种方案采用传统的弹窗提示方式进行验证。

具体实现代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<script type="text/javascript">
  
function $(id) {
return document.getElementById(id);
   }  
     
function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;
         
if(email == "") {
alert("Email值不能为空");
$("email").focus();
return false;
       }  
         
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
alert("邮箱格式不正确,必须包含@和.");
$("email").focus();
return false;
       }  
         
if(password == "") {
alert("密码不能为空");
$("password").focus();
return false;
       }  
         
if(password.length < 6) {
alert("密码长度必须大于或者等于6");
$("password").focus();
return false;
       }  
         
if(repassword != password) {
alert("两次输入的密码不一致");
$("repassword").focus();
return false;
       }  
         
if(name == "") {
alert("姓名不能为空");
$("name").focus();
return false;
       }  
         
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
alert('姓名中不能包含数字');
$("name").focus();
return false;
           }  
       }  
   }  
</script>
</head>
<body>
<form name="login_form" method="post" onsubmit="return check()">
<div>
Email:<input type="text" name="email" id="email"/>
</div>
<div>
密码:<input type="password" name="password" id="password" />
</div>
<div>
重输密码:<input type="password" name="repassword" id="repassword" />
</div>
<div>
姓名：<input type="text" name="name" id="name" />
</div>
<div>
<input type="submit" value="注册" />
</div>
</form>
</body>
</html>

输入框旁提示信息的表单验证

第二种方案在输入框后方增加提示信息区域，实现更友好的交互体验。

具体实现代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<script type="text/javascript">
  
function $(id) {
return document.getElementById(id);
   }  
     
function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;
           
$("emailinfo").innerHTML = "";
$("passwordinfo").innerHTML = "";
$("repasswordinfo").innerHTML = "";
$("nameinfo").innerHTML = "";
         
if(email == "") {
$("emailinfo").innerHTML = "Email值不能为空";
$("email").focus();
return false;
       }  
         
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
$("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和.";
$("email").focus();
return false;
       }  
         
if(password == "") {
$("passwordinfo").innerHTML = "密码不能为空";
$("password").focus();
return false;
       }  
         
if(password.length < 6) {
$("passwordinfo").innerHTML = "密码长度必须大于或者等于6";
$("password").focus();
return false;
       }  
         
if(repassword != password) {
$("repasswordinfo").innerHTML = "两次输入的密码不一致";
$("repassword").focus();
return false;
       }  
         
if(name == "") {
$("nameinfo").innerHTML = "姓名不能为空";
$("name").focus();
return false;
       }  
         
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含数字';
$("name").focus();
return false;
           }  
       }  
   }  
</script>
</head>
<body>
<form name="login_form" method="post" onsubmit="return check()">
<div>
Email:<input type="text" name="email" id="email"/><span id="emailinfo"></span>
</div>
<div>
密码:<input type="password" name="password" id="password" /><span id="passwordinfo"></span>
</div>
<div>
重输密码:<input type="password" name="repassword" id="repassword" /><span id="repasswordinfo"></span>
</div>
<div>
姓名：<input type="text" name="name" id="name" /><span id="nameinfo"></span>
</div>
<div>
<input type="submit" value="注册" />
</div>
</form>
</body>
</html>

运行效果如下图所示：

传统弹窗式表单验证

基于失焦事件的表单验证

第三种方案通过监听输入框的onblur事件，在用户离开焦点时即时触发校验函数。

具体实现代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
   }  
     
function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;
           
$("emailinfo").innerHTML = "";
$("passwordinfo").innerHTML = "";
$("repasswordinfo").innerHTML = "";
$("nameinfo").innerHTML = "";
         
if(email == "") {
$("emailinfo").innerHTML = "Email值不能为空";
return false;
       }  
         
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
$("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和.";
return false;
       }  
         
if(password == "") {
$("passwordinfo").innerHTML = "密码不能为空";
return false;
       }  
         
if(password.length < 6) {
$("passwordinfo").innerHTML = "密码长度必须大于或者等于6";
return false;
       }  
         
if(repassword != password) {
$("repasswordinfo").innerHTML = "两次输入的密码不一致";
return false;
       }  
         
if(name == "") {
$("nameinfo").innerHTML = "姓名不能为空";
return false;
       }  
         
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含数字';
return false;
           }  
       }  
   }  
     
function checkEmail() { //校验Email
$('emailinfo').innerHTML = "";
var email = $('email').value;
if(email == "") {
$('emailinfo').innerHTML = "Email值不能为空";
return false;
       }  
         
if(email.indexOf('@') == -1 || email.indexOf('.') == -1) {
$('emailinfo').innerHTML = "Email必须包含@和.";
return false;
       }  
   }  
     
function checkPassword() { //校验密码
$('passwordinfo').innerHTML = "";
var password = $('password').value;
if(password == "") {
$("passwordinfo").innerHTML = "密码不能为空";
return false;
      }  
     
if(password.length < 6) {
$("passwordinfo").innerHTML = "密码长度必须大于或者等于6";
return false;
      }  
   }  
     
function checkRepassword() { //校验重新输入的密码
$('repassword').innerHTML = "";
var repassword = $('repassword').value;
if(repassword != password) {
$("repasswordinfo").innerHTML = "两次输入的密码不一致";
return false;
       }  
   }  
     
function checkName() { //校验姓名
$('nameinfo').innerHTML = "";
var name = $('name').value;
if(name == "") {
$("nameinfo").innerHTML = "姓名不能为空";
return false;
       }  
         
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含数字';
return false;
           }  
       }  
   }  
</script>
</head>
<body>
<form name="login_form" method="post" onsubmit="return check()">
<div>
Email:<input type="text" name="email" id="email" onblur="checkEmail();"/><span id="emailinfo"></span>
</div>
<div>
密码:<input type="password" name="password" id="password" onblur="checkPassword();"/><span id="passwordinfo"></span>
</div>
<div>
重输密码:<input type="password" name="repassword" id="repassword" onblur="checkRepassword();"/><span id="repasswordinfo"></span>
</div>
<div>
姓名：<input type="text" name="name" id="name" onblur="checkName();"/><span id="nameinfo"></span>
</div>
<div>
<input type="submit" value="注册" />
</div>
</form>
</body>
</html>

运行效果如下图所示：

传统弹窗式表单验证

希望本文所述对大家的javascript程序设计有所帮助。

作者最新文章

D3.js 比例尺与坐标轴的配置详解

2026-11-05 16:54:46

JavaScript怎么遍历对象的Symbol键和不可枚举属性

2026-11-05 13:13:39

封装一个健壮的JS字符串判空工具函数

2026-11-05 12:16:14

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

2026-11-05 11:22:29

JavaScript立即执行函数(IIFE)是什么及基本语法

2026-11-05 10:51:19