在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;
}
}二、如何阻断多个输入
在上边的例子中，我们只阻断了一个输入框，可在实际的业务中，我们有很多需要阻断的地方，例如下边的登录框
当账号格式不正确时，我们需要阻断，当密码格式不正确时我们需要阻断，当验证码不对时我们需要阻断，当为空时我们需要阻断，当...,我们需要判断多种情况，这该怎么高效阻断表单？
该登录框的Html如下
<body onload="createCode()">
<div class="container">
<form id="myform" class="form-signin" method="post" action="UserServlet?a=login" onsubmit="return myform(true)">
<h2 class="form-signin-heading" style="text-align: center;">登录系统</h2>
<input type="text" name="username" class="input-block-level" placeholder="账号">
<input type="password" name="password" class="input-block-level" placeholder="密码">
<input type="text" name="verify" class="input-medium" placeholder="验证码" id="input">
<input type = "button" id="code" onclick="createCode()"/>
<div style="text-align: center;"><button class="btn btn-large btn-primary" type="submit" >登录</button></div>
</form>
</div>
</body>js和css如下
css
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
#code{
font-family:Arial;
font-style:italic;
font-weight:bold;
border:0;
letter-spacing:5px;
font-size:20px;
color:blue;
width:120px;
height: 35px;
background-color: white;
outline:none
}
</style> <script type="text/javascript">
$(function () {
$("input[name='username']").blur(function () {
var name=$(this).val();
var u = new RegExp("^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$");
$(this).next("p").remove();
if (!u.test(name)) {
$(this).after("<p style='color:red'>请输入正确格式的</p>")
return myform(false)
}
})
$("input[name='password']").blur(function () {
var password=$(this).val();
var k = new RegExp("^[a-zA-Z0-9]{4,10}$");
$(this).next("p").remove();
if (!k.test(password)) {
$(this).after("<p style='color:red'>由英文字母和数字组成的4-10位字符</p>")
return myform(false)
}
})
//校验验证码
$("#input").blur(function () {
var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写
$("#code").next("p").remove();
if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
$("#code").after("<p style='color:red'>验证码错误</p>");
createCode();//刷新验证码
document.getElementById("input").value = "";//清空文本框
return myform(false)
}
})
$("#myform").submit(function (e) {
var un=$("input[name='username']").val();
var pa=$("input[name='password']").val();
var ip=$("#input").val();
if (un==""||pa==""||ip=="") {
e.preventDefault();
}
})
if (${!empty i}) {
if (${i==2}) {
$("input[name='username']").after("<p style='color:red'>账户不存在</p>")
return myform(false)
}else if (${i==1}) {
$("input[name='password']").after("<p style='color:red'>密码错误</p>")
return myform(false)
}
}
})
//在全局定义验证码
var code ;
//产生验证码
function createCode(){
code = "";
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("code");
var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
'S','T','U','V','W','X','Y','Z');//随机数
for(var i = 0; i < codeLength; i++) {//循环操作
var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
code += random[index];//根据索引取得随机数加到code上
}
checkCode.value = code;//把code值赋给验证码
}
function myform(flag) {
return flag
}
</script>项目解释：我给表单加了一个提交事件myform(true)。并传参为true，这个事件为js事件，我写在了完成加载事件的外边，在该事件中，直接返回了true。既默认可以提交。
随后，我写了账户的验证方法、密码的验证以及验证码的验证，blur方法，当失去光标时执行函数进行验证。当验证失败时，我在结尾都调用了myform()方法，并且把false传递给该方法，这样表单就阻断了。当任何一个有错误的时候，表单都不会提交。
那么当用户刚进入页面，没有进行任何操作，这时如何阻止他直接点击提交呢？
我在加载完成时里面写了$("#myform").submit()方法，在该方法中，我判断了这三个输入框是不是为空，如果为空，就直接阻断：e.preventDefault();
大家可以看到，阻断表单的方法有两种，一个JS的方法，一个jQuery方法，这里组合来用，效果还不错。
结语：在以上的代码中，我使用了EL表达式，判断密码是否正确，账户是否存在，大家可以自行过滤，只做前台页面可以不用。项目记得要引入JQuery和bootstrap，不然不可用哦
看不懂的同学请自行学习：js正则表达式、jQuery、bootstrap
如果对您有帮助， 可以微信请我吃一根辣条吗？
