JavaScript中,当用户表单填写不正确,如果通过JavaScript阻止用户提交表单?
用户提交表单会触发onsubmit事件,我们可以为onsubmit事件编写监听函数,当在onsubmit监听函数中检查到表单填写不正确,就return false,阻止表单的提交。若填写正确,就return true,提交表单。
举个简单的例子:
当我们按下提交按键时,若检测到用户没有填写邮箱,则阻止用户提交并提示填写邮箱地址!
首先,我们要编写onload的处理函数,并不是onsubmit,而是onload事件哦!
// 当网页加载完毕会触发onload事件。
window.onload = function() {
prepareEventHandlers(); //在该函数中处理onsubmit事件。
};
先处理onload事件是因为我们要在onsubmit事件处理函数中要引用网页中的表单元素,这样能确保页面已经完全加载后才对表单中的元素进行访问。
然后在prepareEventHandlers函数中添加onsubmit处理代码:
function prepareEventHandlers() {
document.getElementById("frmContact").onsubmit = function() {
// 如果没有邮箱,阻止表单提交。
if (document.getElementById("email").value == "") {
document.getElementById("errorMessage").innerHTML = "请至少填写邮箱地址!";
// 阻止表单提交
return false;
} else {
// 允许表单提交
document.getElementById("errorMessage").innerHTML = "";
return true;
}
};
}
在处理onsubmit的匿名函数中,首先用if语句判断email元素的value属性是否为空。即判断用户是否填写了邮箱。
若用户没有填写邮箱则设置errorMessage的文本,提示用户填写邮箱,并返回false,表示阻止表单的提交。若用户填写了邮箱则清空errorMessage文本并返回true,表示允许表单的提交。推荐你去一个教程网站-秒秒学上看下JavaScript的课程,讲解的还不错。