本文通过一个注册界面示例，演示如何使用JavaScript实现前端表单验证。重点讲解如何限制用户名和密码的长度、确保两次输入的密码一致，以及在验证失败时定位错误并阻止表单提交。代码中使用了简单的ID获取函数简化DOM操作，并通过return值控制表单的提交行为，适合初学者参考。
JavaScript表单验证示例介绍
许多网页的注册界面通常包含用户名、密码、确认密码输入框以及“注册”按钮。本文将通过一个具体实例，展示如何使用JavaScript实现这一常见功能。
表单验证的具体要求
验证需求如下：
1. 用户名不能为空，且长度不得超过12个字符； 2. 密码不能为空，且长度不得超过15个字符； 3. 密码与确认密码必须完全一致； 4. 若验证失败，需显示具体错误信息，并将光标聚焦至出错字段；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script>
function $(id){
return document.getElementById(id);
}
function test(){
var user_name = $("user_name").value;
var password = $("password").value;
var re_password = $("re_password").value;
if(user_name.length==0){
$("msg").innerHTML = "用户名不能为空！";
$("user_name").focus();
return false;
}
if(user_name.length>12){
$("msg").innerHTML = "用户名不能超过12个字符！";
$("user_name").focus();
return false;
}
if(password.length==0){
$("msg").innerHTML = "密码不能为空！";
$("password").focus();
return false;
}
if(password.length>15){
$("msg").innerHTML = "密码不能超过15个字符！";
$("password").focus();
return false;
}
if(password!=re_password ){
$("msg").innerHTML="错误！密码不一致！";
$("re_password").focus();
return false;
}
console.log("注册成功！");
return true;
}
</script>
</head>
<body>
<br />
<span id="msg" style="color: red;"></span>
<form onsubmit="return test()">
<input placeholder="请输入用户名" id="user_name" /><br />
<input placeholder="请输入密码" type="password" id="password"/><br />
<input placeholder="请再次输入密码" type="password" id="re_password"/><br />
<input type="submit" value="注册" />
</form>
</body>
</html>注意：实现方式并非唯一，此处提供的方案仅供参考。
核心代码实现解析
以下对代码中的关键实现点进行详细解析：
1. （id）的作用类似于C语言中的define,将所使用的功能或语句定义为一个符号或字符串，极大程度的简化代码，你也可以不使用该方法，用document.getElementById()还原（id）的作用类似于C语言中的define,将所使用的功能或语句定义为一个符号或字符串，极大程度的简化代码，你也可以不使用该方法，用document.getElementById()还原()； 2. 定义的对象必须加.value使其为获取的输入的值，而下面聚焦时，需要改用focus； 3. 在每个if语句中，最好再加一个返回值，提高代码的运行效果，innerHTML的作用是在浏览器页面中显示； 4. 在整个函数test()的最后，若return false，则为取消提交，若return true，则为正常提交；
运行效果与交互演示
读者可自行尝试运行代码，部分页面效果如下： 直接运行代码的初始界面如图所示：
当未输入任何值直接点击“注册”按钮时，页面效果如下：
当所有字段均按要求正确输入后，页面会恢复初始状态。这是因为代码中未指定验证成功后的跳转逻辑，开发者可根据实际需求自行添加跳转功能。
以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。