原理：阻止表单提交是通过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>
2740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
