<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="6.html" method="POST">
<input type="text">
<input type="submit" value="提交">
</form>
</body>
</html>
上2圖：點擊提交後跳轉到其他html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="6.html" method="POST">
<input type="text">
<input type="submit" value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
var v = $(this).prev().val(); //獲取輸入框的值
if(v.length > 0){
return true //大於0，就返回true，true的話就會跳轉
}else {
alert('請輸入內容'); //內容不大於0，就alert，且返回false，不跳轉
return false
}
})
</script>
</body>
</html>
上圖：當輸入爲空時，進行alert提示；
上2圖：輸入框中有內容就成功跳轉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1" action="6.html" method="POST">
<div><input name="n1" type="text"></div>
<div><input name="n2" type="password"></div>
<div><input name="n3" type="text"></div>
<div><input name="n4" type="text"></div>
<div><input name="n5" type="text"></div>
<input type="submit" value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if(v.length <=0){
return false;
}
});
alert('內容爲空');
})
</script>
</body>
</html>代碼說明：
點擊submit，關聯input=text和input=password的標籤；通過each循環每個標籤；
獲取輸入框中的值；
如果其中只要有一個input輸入框中的內容<=0，就return false，停止其他input標籤的each循環；
上2圖：return false只停止了each循環，沒有停止整個程序。 所以可以看到循環之外的alert彈框信息； 點擊確定就會提交跳轉頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1" action="6.html" method="POST">
<div><input name="n1" type="text"></div>
<div><input name="n2" type="password"></div>
<div><input name="n3" type="text"></div>
<div><input name="n4" type="text"></div>
<div><input name="n5" type="text"></div>
<input type="submit" value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if(v.length <=0){
return false;
}
});
return false; //這裏return false，就不會提交，不會跳轉頁面
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1" action="6.html" method="POST">
<div><input name="n1" type="text"></div>
<div><input name="n2" type="password"></div>
<div><input name="n3" type="text"></div>
<div><input name="n4" type="text"></div>
<div><input name="n5" type="text"></div>
<input type="submit" value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
var flag = true; //局部變量，默認爲true
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if(v.length <=0){
flag = false; //只要任意一個input爲空，就設置爲false
return false;
}
});
return flag; //如果input都不爲空，return的就是true，就會提交併跳轉頁面。
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1" action="6.html" method="POST">
<div><input name="n1" type="text"></div>
<div><input name="n2" type="password"></div>
<div><input name="n3" type="text"></div>
<div><input name="n4" type="text"></div>
<div><input name="n5" type="text"></div>
<input type="submit" value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if(v.length <=0){
flag = false;
// return false;
}
});
return flag;
})
</script>
</body>
</html>代碼說明：使用return false;任意其中一個input爲空，就會退出循環； 註釋掉return false;的話，即使有input爲空，也會循環所有input纔會退出循環。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1" action="6.html" method="POST">
<div><input name="n1" type="text"></div>
<div><input name="n2" type="password"></div>
<div><input name="n3" type="text"></div>
<div><input name="n4" type="text"></div>
<div><input name="n5" type="text"></div>
<input type="submit" value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if(v.length <=0){
flag = false;
var tag = document.createElement('span'); //創建span標籤
tag.innerHTML = '*必填選項'; //span標籤內容
$(this).after(tag) //將span標籤添加到input後面
// return false;
}
});
return flag;
})
</script>
</body>
</html>
上圖：如果input爲空，則添加span標籤和其內容進行提示；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red; <!--提示內容爲紅色-->
}
</style>
</head>
<body>
<form id="f1" action="6.html" method="POST">
<div><input name="n1" type="text"></div>
<div><input name="n2" type="password"></div>
<div><input name="n3" type="text"></div>
<div><input name="n4" type="text"></div>
<div><input name="n5" type="text"></div>
<input type="submit" value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
$('.error').remove(); //再次提交的時候，要先清空span標籤提示信息
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if(v.length <=0){
flag = false;
var tag = document.createElement('span');
tag.className = 'error';
tag.innerHTML = '*必填選項';
$(this).after(tag)
// return false;
}
});
return flag;
})
</script>
</body>
</html>
上圖：先清空，在添加span標籤； 所有其他未填寫內容的都會被提示； 但如果取消return false;的註釋，那麼這裏只會其中一個input進行提示。
上2圖：所有input不爲空，就會正常跳轉。