`

(转)jquery.validate分组验证

阅读更多
http://www.cnblogs.com/wangjq/archive/2011/03/13/1983024.html

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

第一步填写基本信息,



第二步填写教育信息



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


view sourceprint?<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.js

    除了基本的验证规则,jQuery.validate.js还支持自定义规则、异步验证(如检查用户名是否已存在)、分组验证等高级功能。例如,你可以创建一个自定义规则来验证密码强度: ```javascript $.validator.addMethod(...

    jQuery验证控件jquery.validate.js使用说明+中文API

    `自定义验证.js`可能是对`jquery.validate.js`的中文注释或自定义扩展,提供更友好的中文API说明。对于初学者来说,这将有助于更快地理解和使用这个插件。 ### 4. 其他特性 - **错误提示**:`errorPlacement`回调...

    jQuery.validate插件(附代码实例)

    jQuery.validate插件还提供了许多其他高级特性,如自定义验证方法、异步验证、分组验证等。例如,你可以创建一个自定义验证方法来检查用户名是否已被占用: ```javascript $.validator.addMethod("uniqueUsername",...

    jquery.validate.js验证

    `jQuery Validate` 还提供了很多其他功能,如分组验证、远程验证、自定义错误消息定位等。你可以在官方文档中进一步了解并根据实际需求灵活运用。 总之,`jQuery Validate` 是一个强大且灵活的表单验证工具,它使得...

    jquery.validate.js表单验证.pdf

    此外,validate.js还提供了其他高级功能,如分组验证、异步验证、显示错误提示的方式等,可以根据实际需求进行配置和扩展。 总的来说,jQuery validate.js提供了一套完整的表单验证解决方案,它的灵活性和强大的...

    jquery.validate知识要点

    以上是关于`jQuery.validate`插件的一些核心知识点,包括规则的应用、自定义方法的添加、分组验证以及成功和失败样式的控制等。通过这些特性,开发者能够轻松地构建出高效且友好的表单验证系统。在实际项目中,根据...

    jquery.validate分组验证代码

    在“jquery.validate分组验证代码”这个场景中,我们关注的是如何分步验证表单,即在用户填写表单的不同阶段分别进行验证,而不是等到最后一次性检查所有输入。 首先,我们需要引入jQuery库和jQuery Validate插件的...

    jquery.validate例子

    `jQuery Validate`还支持异步验证、自定义验证方法、分组验证等高级功能。这些可以用来创建更复杂的验证场景,比如验证密码强度、手机号码格式等。 在`second.html`文件中,我们可以期待看到一个实际的表单示例,它...

    jquery.validate.js

    validate.js还支持分组验证、禁用验证、动态显示错误消息等功能,可以根据项目的具体需求灵活运用。 七、总结 jQuery validate.js插件以其简洁的API和强大的功能,极大地简化了前端表单验证的过程。理解并熟练掌握...

    jquery validate 最稳定版本

    6. **分组验证** 可以通过`groups`选项将多个字段组合成一组进行验证,确保所有字段都通过验证后才提交表单。 7. **远程验证** 对于需要服务器端验证的场景,可以使用`remote`规则,将数据发送到服务器并等待响应...

    jquery的校验规则(jquery.validate)

    `jQuery Validate` 还提供了许多高级功能,如分组验证、条件验证、错误消息定位等。例如,你可以通过 `groups` 参数将多个字段组合成一组进行验证: ```javascript $("#myForm").validate({ groups: { username...

    jQueryValidate

    - **分组验证**:可以设置一组输入框,当其中任一输入框改变时触发验证。 - **异步验证**:允许进行网络请求验证,例如检查用户名是否已存在。 - **显示和隐藏错误**:可以配置错误消息的显示方式,如是否立即显示,...

    jq.validate文件

    7. **分组验证**:使用`groups`选项,可以将多个输入字段组合在一起进行一次性验证。 ```javascript $("#myForm").validate({ groups: { loginInfo: "username password" }, errorPlacement: function(error, ...

    jquery validate 表单验证

    10. **分组验证**:通过`groups`属性,可以将多个字段作为一组进行验证,这样在其中任何一项未通过验证时,都会显示对应的错误消息。 以上就是jQuery Validate的基本使用和核心概念,通过熟练掌握这些,你可以轻松...

    jquery validate表单验证js

    除了基础的验证功能,jQuery Validate还支持分组验证、异步验证(如检查用户名是否已存在)和自定义验证条件。通过`groups`选项可以对一组关联的输入进行整体验证,而`remote`规则则可以实现异步验证。 总结,...

    jquery-validate 表单验证

    4. **分组验证**:可以对多个表单元素进行分组验证,例如,一组密码输入框要求两次输入必须一致。 5. **插件扩展**:`jQuery Validate` 可以通过添加插件来扩展其功能,如 `additional-methods.js` 文件包含了更多...

    jquery-validate验证框架使用详解

    8. **分组验证**:如果你希望一次性验证多个表单元素,可以使用`groups`选项。例如,将用户名和密码作为一个整体验证: ```javascript $('#myForm').validate({ groups: { loginInfo: "username password" } }...

    jquery-validate验证输入框

    8. **分组验证** 可以对一组输入字段进行一次性验证,例如验证密码与确认密码是否一致: ```javascript rules: { password: { required: true, minlength: 6 }, confirmPassword: { equalTo: "#password" ...

    jquery验证插件Validator

    2. **分组验证**:通过`groups`选项,可以一次性验证多个关联的字段: ```javascript $("#myForm").validate({ groups: { usernameGroup: "username password" } }); ``` 3. **异步验证**:利用`remote`...

Global site tag (gtag.js) - Google Analytics