学步园

在很多时候，我们都不是一步就将所有信息填写完整，然后提交。而是分步进行填写表单，如下所示：

第一步填写基本信息，

第二步填写教育信息

要求我们每一步操作都要进行验证，这样我们可以用以下方式进行验证：

    <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/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里的valid()和isValid方法，很简单吧。