jquery.validate分组验证

雨点打透心脏的1/2处 2021-12-01 16:56 294阅读 0赞

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

第一步填写基本信息，

![2011031321525525.jpg][]

第二步填写教育信息

![2011031321530913.jpg][]

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

<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方法，很简单吧。

转载于:https://www.cnblogs.com/wangjq/archive/2011/03/13/1983024.html

[2011031321525525.jpg]: /images/20211201/000a373de23c43bd86d51ae6bc1c71a7.png
[2011031321530913.jpg]: /images/20211201/99f08ddb452b4ebcb35955ca3b4418cb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，294人围观）

还没有评论，来说两句吧...

相关阅读

相关基于分组码的消息验证码的程序实现

目录摘要 I 1 绪论 1 1.1 课题研究背景和意义 1 1.2 课题研究现状 1 2 CBC MAC的特征和基本工作原理 2 2.1 CBC

桃扇骨/ 2024年03月31日 08:25/ 0 赞/ 101 阅读

相关实现Java后端数据校验--@Validated分组验证和嵌套验证

最近在使用中遇到了一种情况：如果是保存按钮，保存内容的表单中的某些字段，如果填了，则不能超过50个字符，没填的话则跳过验证。如果是提交按钮，则必须校验不能为空，且也不能

￡神魔★判官ぃ/ 2024年03月30日 15:04/ 0 赞/ 90 阅读

相关【springboot】springboot validation 参数验证、分组验证及全局统一异常处理

一、jar包添加下面其中之一即可 <dependency> <groupId>org.hibernate.validator</groupId

约定不等于承诺〃/ 2022年12月04日 01:11/ 0 赞/ 395 阅读

相关 JAVA参数验证 Validation(二)分组校验&自定义校验

有些时候一个对象会在多个场景使用，不同场景对该对象中的参数校验需求不同，即有些场景不对参数进行校验。比如注册时，我们要填写出生日期参数，但是登录时并不需要该参数这里可

秒速五厘米/ 2022年06月07日 23:57/ 0 赞/ 490 阅读

相关 springboot 异常处理（输入参数验证，加上分组第二版）

目的：在一个表中，添加或更新不同的字段（一个表中多次插入，要分组进行判断）一、定义分组接口 public interface First {

落日映苍穹つ/ 2022年05月24日 01:58/ 0 赞/ 227 阅读

相关 SpringMVC 之validator分组验证

一、什么是数据校验？　　　　　　这个比较好理解，就是用来验证客户输入的数据是否合法，比如客户登录时，用户名不能为空，或者不能超出指定长度等要求，这就叫做数据校验。　　　

深碍√TFBOYSˉ_/ 2022年05月09日 03:52/ 0 赞/ 293 阅读

相关数据库の数据分组（分组函数、对查询结果分组）

分组函数的使用为了进一步方便用户，增强检索功能，SQL提供了许多分组函数，也叫聚集函数，主要包括：表3-10 分组函数

客官°小女子只卖身不卖艺/ 2022年02月20日 08:01/ 0 赞/ 479 阅读

相关 JQueryValidate添加自定义方法校验密码

代码如下: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

青旅半醒/ 2021年12月15日 05:11/ 0 赞/ 1022 阅读

相关 jquery.validate分组验证

在很多时候，我们都不是一步就将所有信息填写完整，然后提交。而是分步进行填写表单，如下所示：第一步填写基本信息， ![2011031321525525.jpg][] 第二

雨点打透心脏的1/2处/ 2021年12月01日 16:56/ 0 赞/ 295 阅读

相关 Storm核心概念与验证——并行度与流式分组

Storm核心概念之并行度 ![Storm笔记整理（四）：Storm核心概念与验证——并行度与流式分组][Storm_Storm] Work 1个worker进程

青旅半醒/ 2021年11月22日 23:42/ 0 赞/ 314 阅读