标签：function false sta 验证 i1 表单 输入框 jquery008 为空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
<style>
.error{
color: red;
}
.hide{
display: none;
}
</style>
</head>
<body style="width: 980px;margin: 0 auto">
<form id="i1" action="jquery004-modal-box.html">
<div><input type="text"/><span class="error hide">输入框不能为空</span></div>
<div><input type="text"/><span class="error hide">输入框不能为空</span></div>
<div><input type="text"/><span class="error hide">输入框不能为空</span></div>
<div><input type="password"/><span class="error hide">输入框不能为空</span></div>
<!-- 为了不跳转，好验证，先绑定button -->
<div><input type="button" value="按 键"/></div>
<div><input type="submit" value="提 交"/></div>
</form>
<script src="jquery3.6.1.js"></script>
<script>
var sta = true;
// $('#i1 :button').click(function (){
$('#i1 :submit').click(function (){
$('#i1 :text,:password').each(function (){
// console.log(this);
if(this.value ==0){
$(this).next().removeClass('hide');
sta = false;
return false;
}else {
$(this).next().addClass('hide');
};
});
return sta;
});
// 直接加span标签，加display:none;效果更好；
// var sta = true;
// $('#i1 :button').click(function (){
// $('i1 .error').remove();
// $('#i1 :text,:password').each(function (){
// // console.log(this);
// if(this.value ==0){
// var s = document.createElement('span');
// $(s).addClass('error');
// s.innerText = '输入框不能为空';
// $(this).after(s);
// sta = false;
// return false;
// };
// });
// return sta;
// });
</script>
</body>
</html>
标签：function,
false,
sta,
验证,
i1,
表单,
输入框,
jquery008,
为空
From： https://www.cnblogs.com/lfyxys/p/16930036.html