1. jquery方法实现表单验证(return的应用)
如果有输入内容,则返回true,可以正常提交;否则返回false,并且弹出对话框“请输入内容”,后续的提交就终止了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="s15.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;}
else{
alert('请输入内容')
return false;}
})
</script>
</body>
</html>
2. 下面的return false 只是相当于break的作用,如果第1个验证为空的话,则后续的就不再验证了。
这个return false 并没有返回给上面的submit,经测试:此时可以正常提交。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1" action="s15.html" method="POST">
<div><input type="text" name="n1"/></div>
<div><input type="password" name="n2"/></div>
<div><input type="text" name="n3"/></div>
<div><input type="text" name="n4"/></div>
<div><input type="text" name="n5"/></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;//有这句的话,如果第1个有问题的话,后面的就不再验证了。类似于break。
}
})
});
</script>
</body>
</html>
3. 所以我们需要再加一个return false 返回给submit。如下所示:此时达到了效果,只要有一个是空值,则无法提交。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1" action="s15.html" method="POST">
<div><input type="text" name="n1"/></div>
<div><input type="password" name="n2"/></div>
<div><input type="text" name="n3"/></div>
<div><input type="text" name="n4"/></div>
<div><input type="text" name="n5"/></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;//有这句的话,如果第1个有问题的话,后面的就不再验证了。
//类似于break。整个each循环终止了,无法起到提交的作用
}
})
return flag;
});
</script>
</body>
</html>
4. 哪一项为空,则出现哪一项的错误提示:
当点击submit的时候,先把所有的红色错误提示去掉。然后挨个检查,如果哪个标签为空的话,则会加上红色的错误提示样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form id='f1' action="s15.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()
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>
效果:
5.如果加上return false的话,则如前面所说的,一个一个挨个验证,如果第一个出现错误的话,就不再验证后面的了。
5. 上面的input标签渲染完成之后,下面的submit才会生效。但是如果上面有个<img src="......">时,则可能会延迟下面的绑定。
把函数写到下面的函数里面,则会提前加载。如果前面有图片的话,也不用等图片加载完毕再工作。
#当页面框架加载完成之后,自动执行
$(function(){
$(默认要执行的操作)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form id='f1' action="s15.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>
//当页面框架加载完毕后,自动执行
$(function(){
//当页面所有元素完全加载完毕后,才会执行
$(':submit').click(function(){
$('error').remove()
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>