在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