Posted in Javascript onMarch 17, 2011
如下所示:
第一步填写基本信息,
第二步填写教育信息
要求我们每一步操作都要进行验证,这样我们可以用以下方式进行验证:
<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>
jquery.validate分组验证代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@