jquery.validate分组验证代码

如下所示：第一步填写基本信息，第二步填写教育信息要求我们每一步操作都要进行验证，这样我们可以用以下方式进行验证：复制代码代码如下: <script type="text/javascript" language="javascript" src="/Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" language="javascript" src="/Scripts/jquery.validate.min.js"></script> <h2> ValidateStep</h2> <form action="" id="registerForm" method="post"> <div class="step1 validationGroup" style="display: block;"> <p> 基本情况</p> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> 姓名：<input type="text" id="name" class="required" /> </td> </tr> <tr> <td> 年龄：<input type="text" id="age" class="required number" /> </td> </tr> <tr> <td> <input type="button" class="next" value="下一步" /> </td> </tr> </table> </div> <div class="step2 validationGroup" style="display: none"> <p> 教育背景</p> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> 毕业学校：<input type="text" id="school" class="required" /> </td> </tr> <tr> <td> 专业：<input type="text" id="major" class="required" /> </td> </tr> <tr> <td> <input type="submit" value="提交" /> </td> </tr> </table> </div> </form> <script language="javascript" type="text/javascript"> function InitValidationGroup() { $('.validationGroup .next').click(function (evt) { if (IsValidated($(this).closest(".validationGroup"))) { $(".step1").hide(); $(".step2").show(); } else { evt.preventDefault(); } }); $('.step1 :text').keydown(function (evt) { if (evt.keyCode == 13) { var $nextInput = $(this).nextAll(':input:first'); if ($nextInput.is(':submit')) { Validate(evt); } else { evt.preventDefault(); $nextInput.focus(); } } }); } function IsValidated(group) { var isValid = true; group.find(':input').each(function (i, item) { if (!$(item).valid()) isValid = false; }); return isValid; } $(document).ready(function () { InitValidationGroup(); var validator = $("#registerForm").validate(); }); </script>

　　推荐阅读

　　基于Jqurey的下拉框改变动态添加和删除表格实现代码

效果图：当下拉框改变的时候，添加一个成人填写信息或儿童填写信息！复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition>>>详细阅读

本文标题：jquery.validate分组验证代码

地址：http://www.17bianji.com/kaifa2/JS/24776.html

1/2 1