day16-示例:表单验证
一、前言
之前我们学习了 jQuery事件之阻止事件的发生 ,这个用于表单验证,当我们的用户名,密码输入正确的时候,我们才能跳转,输入错误的时候,就阻止它跳转,那这个怎么实现呢?下面我们就来研究一下。
二、简单的表单验证
2.1、操作的html
<body> <form action="n5.html" method="POST"> <input type="text"/> <input type="submit" value="提交"/> </form> <script src="jquery-1.12.4.js"></script> <script> //js代码 </script> </body>
2.2、表单验证
说明:当我点击提交按钮时,有数据的话,我就跳转,没有数据的话,就停留在当前页面上。
$(":submit").click(function(){ //alert(123); var v = $(this).prev().val(); if(v.length > 0 ){ return true; //不为空,则跳转 }else { return false; //为空,不跳转 } })
三、复杂的表单验证
3.1、操作的html
<head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color: red; } </style> </head> <body> <form id="f1" action="n5.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> <input type="submit" value="提交"/> </form> <script src="jquery-1.12.4.js"></script> <script> //js代码 </script> </body>
3.2、for循环中return的作用
说明:在循环中加 return false,只是终止当前循环,而不是终止整个程序。
$(":submit").click(function(){ var i = 1; $("#f1").find("input[type='text'],input[type='password']").each(function(){ var v = $(this).val(); console.log("第"+i+"次"); if(v.length <= 0 ){ i++; return false; //只是终止当前循环 } }); console.log(1111); return false; })
效果图:
3.3、复杂表单验证
①去掉循环中的return代码
$(":submit").click(function(){ $(".error").remove(); var flag = true; $("#f1").find("input[type='text'],input[type='password']").each(function(){ var v = $(this).val(); //console.log(1); if(v.length <= 0 ){ flag = false; var tag = document.createElement("span"); tag.innerHTML = "必填"; tag.className = "error"; //$(tag).innerHTML("必填"); $(this).after(tag); //return flag; //只是终止当前循环 } }); //console.log(1111); return flag; })
效果图:
因为return终止的是当前循环,你注释掉,所以所有的输入框都验证。
②添加return false代码
$(":submit").click(function(){ $(".error").remove(); var flag = true; $("#f1").find("input[type='text'],input[type='password']").each(function(){ var v = $(this).val(); //console.log(1); if(v.length <= 0 ){ flag = false; var tag = document.createElement("span"); tag.innerHTML = "必填"; tag.className = "error"; //$(tag).innerHTML("必填"); $(this).after(tag); return flag; //只是终止当前循环 } }); //console.log(1111); return flag; })
效果图:
这样的话,就变成一个一个的去验证,因为,你第一为空的话,就已经跳出循环了。