本文详细介绍使用JavaScript进行表单校验的方法，涵盖文本框与下拉框的验证逻辑、onblur与onchange事件的应用，以及如何通过onsubmit事件返回值正确阻止非法提交。针对校验后提示未清除、断点输入误报等常见问题提供解决方案，并附带完整的HTML与JS示例代码。
文本框与下拉框校验逻辑
文本框校验
以下是针对文本框进行校验的具体操作步骤。
第一步，获取待校验文本框的value属性值。
第二步，针对获取到的value值设定判定条件，通过if语句或switch语句执行逻辑判断。
第三步，若输入值满足预设条件，则判定校验通过，函数返回true。
第四步，若输入值不满足条件，则返回false，并在页面上替换显示相应的校验提示信息。
第五步，表单需收集所有单项验证的返回值，进行逻辑运算（如与运算），并将最终结果作为参数传递给form标签的onsubmit事件处理函数。
第六步，在input元素中调用具体的校验函数，此处建议采用onblur事件来触发校验逻辑。
下拉框校验
下拉框的校验逻辑与文本框略有差异。由于下拉框中option的返回值对应value属性，需通过select元素的name或id获取用户的选择值。因此，在校验函数中，应通过id定位select元素并获取其value值，进而根据该value是否为空或包含非法值进行判断。其余处理步骤与文本框校验保持一致。
表单校验的界面样式效果如下所示。
常见校验问题与解决方案
常见问题与解决方案
- 问题一：校验表单时出现错误提示，但表单依然能够提交？
- 原因分析：onsubmit事件作为提交动作，其默认参数值为true。前文提到，若满足条件需返回true，否则返回false。每一项校验函数都必须返回布尔类型的值。只有当所有单项校验全部通过时，才能正常提交表单；只要有一项不满足条件，表单即应被阻止提交并提示重新输入。因此，必须对每一项校验函数的返回值执行逻辑运算（如逻辑与），若全为真，则最终返回给onsubmit的值为true；否则返回false。当onsubmit接收到的参数为false时，表单提交将被阻止，从而实现校验失败时的拦截功能。
- 问题二：初始输入错误内容后，修改为正确内容，但错误提示仍未消失？
- 原因分析：当校验返回值为true（即校验通过）时，需将显示提示信息的DOM元素内容清空。具体操作为：document.getElementById(“对应ID”).innerHTML=”“; 从而移除之前的错误提示。
- onchange和onblur事件均可用于触发校验，且两者都会在失去焦点时执行校验逻辑。但需注意，使用onblur触发校验时，若用户进行间断性输入（如输入一半后暂停），可能会因中间状态不符合要求而误报错误提示。
- 此外，表单校验的JavaScript代码段不应等待页面完全加载完成后才加载，而应在DOM元素就绪后即可执行相关绑定或逻辑，以确保交互的即时性。
完整代码示例
代码实现部分
以下是完整的程序源码示例。
<script>
function validateUsername(){
var input = document.myform.userName.value;
if(input == “”||input == null) {
document.myform.userName.focus();
document.getElementById(“uname”).innerHTML=”用户名不能为空!”;
return false;
}
else if(input.length>5 || input.length<2){
document.getElementById(“uname”).innerHTML= “用户名在2~5位”;
document.myform.userName.focus();
return false;
}
else{
document.getElementById(“uname”).innerHTML=”“;
return true;
}
}
function validatePassword(){
var password = document.myform.password.value;
if(password == “”||password == null) {
document.getElementById(“upss”).innerHTML = “密码不能为空!”;
document.myform.password.focus();
return false;
}
else if(password.length>12 || password.length<6){
document.getElementById(“upss”).innerHTML= “密码在6~12位”;
document.myform.password.focus();
return false;
}
else{
document.getElementById(“upss”).innerHTML= “”;
return true;
}
}
function validatePasswordAgain(){
var psw = document.myform.psw.value;
var password = document.myform.password.value;
if(psw!=password){
document.getElementById(“upssa”).innerHTML=”两次密码输入不同”;
return false;
}else{
document.getElementById(“upssa”).innerHTML = “”;
return true;
}
}
function validateGroup(){
var select = document.getElementById(“select”);
if(select.value == “NONE”){
document.getElementById(“groupID”).innerHTML=”请选择分组!”;
return false;
}else {
document.getElementById(“groupID”).innerHTML=”“;
return true;
}
}
function validateForm(){
var flag = validateUsername()&&validatePassword()&&validatePasswordAgain()&&validateGroup();
if(flag){
return true;
}else return false;
}```html
<div class="warp">
<h1>新用户注册</h1>
<form action="/myproject/admin/addUser" name="myform" onsubmit="return validateForm()">
<div class="form-warp">
<ul>
<li>用户名称：<input class="input" type="text" name="userName" placeholder="请输入..." onblur="validateUsername()"/></li>
<li>密 码：<input class="input" type="password" name="password" id="password" placeholder="请输入..." onblur="validatePassword()"/></li>
<li>确认密码：<input class="input" type="password" name="psw" id="psw" placeholder="请输入..." onblur="validatePasswordAgain()"/></li>
<li>真实姓名：<input class="input" type="text" name="realName" placeholder="请输入..."/></li>
<li>分 组：<select name="group.id" id="select" onblur="validateGroup()">
<option value="NONE">请选择...</option>
<#list groups as group>
<option value="${group.id}">${group.name}</option>
</#list>
</select>
</li>
<li><input type="submit" value="提交" id="button"/></li>
</ul>
<ul class="validate">
<li id="uname"></li>
<li id="upss"></li>
<li id="upssa"></li>
<li id="groupID"></li>
</ul>
</div>
</form>
</div>
“`总结
以上内容介绍了使用JavaScript实现表单校验的核心功能，希望能对读者有所帮助。如有任何疑问，欢迎留言交流，小编会及时回复。同时感谢大家对本网站的支持！