JavaScript实现表单阻断提交--高效高可用超详细

在web开发共，我们有验证表单的业务，用户的输入符合我们的要求，就可以提交，用户的输入不符合要求，就阻止用户提交，这样能够更好的提高用户体验，减轻服务器的压力。前台能完成的事情，就在前台完成。

效果图：

 

一、如何阻断提交（写给新手）

html中，我们有了type为“submit”的提交按钮，当我们点击它时，表单就会提交到action所指向的地址。

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

JavaScript中，我们写了该表单的提交事件 validateForm()，并判断当我们的输入为null或者空字符串时，返回false，这时，表单就不会提交到后台了。

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

二、如何阻断多个输入

在上边的例子中，我们只阻断了一个输入框，可在实际的业务中，我们有很多需要阻断的地方，例如下边的登录框