当前位置:Gxlcms > JavaScript > jquery.validate分组验证代码

jquery.validate分组验证代码

时间:2021-07-01 10:21:17 帮助过:2人阅读

如下所示:

第一步填写基本信息,

第二步填写教育信息

要求我们每一步操作都要进行验证,这样我们可以用以下方式进行验证:
代码如下:

  1. <br><script type="text/javascript" language="javascript" src="/Scripts/jquery-1.4.1.min.js"></script> <br><script type="text/javascript" language="javascript" src="/Scripts/jquery.validate.min.js"></script> <br><h2> <br>ValidateStep</h2> <br><form action="" id="registerForm" method="post"> <br><div class="step1 validationGroup" style="display: block;"> <br><p> <br>基本情况</p> <br><table border="0" cellpadding="0" cellspacing="0"> <br><tr> <br><td> <br>姓名:<input type="text" id="name" class="required" /> <br></td> <br></tr> <br><tr> <br><td> <br>年龄:<input type="text" id="age" class="required number" /> <br></td> <br></tr> <br><tr> <br><td> <br><input type="button" class="next" value="下一步" /> <br></td> <br></tr> <br></table> <br></div> <br><div class="step2 validationGroup" style="display: none"> <br><p> <br>教育背景</p> <br><table border="0" cellpadding="0" cellspacing="0"> <br><tr> <br><td> <br>毕业学校:<input type="text" id="school" class="required" /> <br></td> <br></tr> <br><tr> <br><td> <br>专业:<input type="text" id="major" class="required" /> <br></td> <br></tr> <br><tr> <br><td> <br><input type="submit" value="提交" /> <br></td> <br></tr> <br></table> <br></div> <br></form> <br><script language="javascript" type="text/javascript"> <br>function InitValidationGroup() { <br>$('.validationGroup .next').click(function (evt) { <br>if (IsValidated($(this).closest(".validationGroup"))) { <br>$(".step1").hide(); <br>$(".step2").show(); <br>} <br>else { <br>evt.preventDefault(); <br>} <br>}); <br>$('.step1 :text').keydown(function (evt) { <br>if (evt.keyCode == 13) { <br>var $nextInput = $(this).nextAll(':input:first'); <br>if ($nextInput.is(':submit')) { <br>Validate(evt); <br>} <br>else { <br>evt.preventDefault(); <br>$nextInput.focus(); <br>} <br>} <br>}); <br>} <br>function IsValidated(group) { <br>var isValid = true; <br>group.find(':input').each(function (i, item) { <br>if (!$(item).valid()) <br>isValid = false; <br>}); <br>return isValid; <br>} <br>$(document).ready(function () { <br>InitValidationGroup(); <br>var validator = $("#registerForm").validate(); <br>}); <br></script> <br><p></p>

人气教程排行