原理:阻止表单提交是通过form的onSubmit方法,返回false控制的。即<form οnsubmit=“reutrn false”></form>
实现:
Step 1:将form的onSubmit方法设置为return 函数(this)
<form method="post" action="LoginServlet" onSubmit="return login(this)">
Step 2:在function login(formvalue)函数中设置一个变量:isSubmit = true
若用户名或密码为空,则使isSubmit = false
Step 3:对isSubmit进行判断,若isSubmit = false,则return false; 阻止表单提交;否则表单正常提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style>
.error{
color : red;
}
</style>
</head>
<body>
<form method="post" action="LoginServlet" onSubmit="return login(this)">
<div class="item">
<label>usename:</label>
<input name="username" type="text"/>
<span id="username-error" class="error"></span>
</div>
<div class="item">
<label>password:</label>
<input name="password" type="password"/>
<span id="password-error" class="error"></span>
</div>
<div>
<input type="submit" value="Login" />
</div>
</form>
<script>
// 现在前端做数据合法性校验,若不通过,则阻止表单提交;否则,表单正常提交
function login(formvalue){
var username = formvalue.username.value;
var password = formvalue.password.value;
var uError = document.getElementById("username-error");
var pError = document.getElementById("password-error");
var isSubmit = true
if("" == username){
isSubmit = false;
uError.innerHTML = "用户名不能为空!"
}
if("" == password){
isSubmit = false;
pError.innerHTML = "密码不能为空!"
}
if(!isSubmit){
// 阻止表单提交
return false;
}
}
</script>
</body>
</html>