1

所以我正在使用这个 jquery 内容滑块插件：滑块。而且我还在使用 jquery 验证器插件。所以我在内容滑块上有一个选项卡来更改您的密码。问题是当您没有正确输入内容时，验证器的消息不会出现。这是内容滑块的 jquery：

$(function() {
    var current = 1;

    var iterate     = function(){
        var i = parseInt(current+1);
        var lis = $('#rotmenu').children('li').size();
        if(i>lis) i = 1;
        display($('#rotmenu li:nth-child('+i+')'));
    }
    display($('#rotmenu li:first'));
    var slidetime = setInterval(iterate,90000);

    $('#rotmenu li').bind('click',function(e){
        clearTimeout(slidetime);
        display($(this));
        e.preventDefault();
    });

    function display(elem){
        var $this   = elem;
        var repeat  = false;
        if(current == parseInt($this.index() + 1))
            repeat = true;

        if(!repeat)
            $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
                $(this).animate({'opacity':'0.7'},700);
            });

        current = parseInt($this.index() + 1);

        var elem = $('a',$this);

            elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

        var info_elem = elem.next();
        $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
            $('h1',$(this)).html(info_elem.find('.info_heading').html());
            $(this).animate({'left':'0px'},400,'easeInOutQuad');
        });

        $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
            $('p',$(this)).html(info_elem.find('.info_description').html());
            $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
        })
        $('#rot1').prepend(
        $('<img/>',{
            style   :   'opacity:0',
            className : 'bg'
        }).load(
        function(){
            $(this).animate({'opacity':'1'},600);
            $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                $(this).remove();
            });
        }
    ).attr('src','Images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
    );
    }
});

以及内容滑块的 html

<div id="content">
    <a class="back" href=""></a>

    <div class="rotator">
        <ul id="rotmenu">
            <li>
                <a href="rot2">Password</a>
                <div style="display:none;">
                    <div class="info_image">2.jpg</div>
                    <div class="info_heading"></div>
                    <div class="info_description">
                        <form id="change_Pass" action="" method="post">
                            Current Password<span style="color:red;">*</span><input type="password" id="change_password" name="change_password"><br>
                            New Password<span style="color:red;">*</span><input type="password" id="new_password" name="new_password"><br>
                            Verify Password<span style="color:red;">*</span><input type="password" id="verify_password" name="verify_password"><br>
                            <input type="submit" value="Submit">
                        </form>
                    </div>
                </div>
            </li>
        </ul>
        <div id="rot1">
            <img src="" width="800" height="300" class="bg" alt=""/>
            <div class="heading">
                <!--<h1></h1>-->
            </div>
            <div class="description">
                <p></p>
            </div>    
        </div>
    </div>
</div>

现在这是验证器的 jquery：

jQuery.validator.addMethod("passw", function(value, element) { 
    return this.optional(element) || /^(?=.*[\W])(?=.*[\d])(?=.*[A-Z]).{8,}$/.test(value);
}, jQuery.format("Please enter a valid password"));

$("#change_Pass").validate({
    onkeyup: false,
    errorClass: "req_mess",
    rules: {
        change_password: {
            required: true,
        },
        new_password: {
            required: true,
            passw: true,
        },
        verify_password: {
            required: true,
            equalTo: "#new_password",
        }
    },
    messages: {
        change_password: {
            required: "Please enter your current password",
        },
        new_password: {
            required: "Please enter a new password",
        },
        verify_password: {
            required: "Please enter a password that is a minimum of 8 characters and containers 1 upper case, 1 symbol, and 1 number",
            equalTo: "Your passwords did not match",
        }
    }
});

验证器适用于其他形式没问题，所以我认为这是此内容滑块显示信息的方式，这$('p',$(this)).html(...)可能会混淆验证器的消息。要不要，我真的不知道。我只知道当您不输入正则表达式后的密码时，它不会显示错误消息。我知道密码的正则表达式有效，因为它在其他形式上验证得很好。那么关于什么是错的以及如何解决它的任何想法？谢谢

4

2 回答 2

1

尝试这个：

替换这一行：

$('p',$(this)).html(info_elem.find('.info_description').html());

用这些：

$('p',$(this)).html();
var elements = info_elem.find('.info_description').detach();
$('p',$(this)).append(elements);

您的表单已定义验证选项，并通过验证插件应用事件处理程序。问题是当您的代码仅复制表单的 HTML（作为文本）时。使用 detach() 删除实际的 dom 节点并将这些（完成验证事件）附加到您的滑块。

注意：我首先尝试使用 clone(true) 而不是 detach，但它似乎没有正确复制验证。

编辑：这个的一个问题是，当下一次迭代发生时，分离的表单会丢失，除非它被放回去。一个简单的解决方法是将表单（元素 var）存储在一个全局变量中，并将其附加到下一次迭代之前它来自的位置。

于 2012-10-19T00:39:14.703 回答
1

这可能是一个更容易/更好的解决方法。

在这一行之后：

$('p',$(this)).html(info_elem.find('.info_description').html());

添加这行代码，用于在刚刚添加到上一行滑块的表单上设置验证：

setupPasswordValidate('#rot1 .description #changePass');

因此，您还需要将验证代码放入这样的函数中：

function setupPasswordValidate(selector)
  $(element).validate({
    onkeyup: false,
    errorClass: "req_mess",
    rules: {
        change_password: {
            required: true
        },
        new_password: {
            required: true,
            passw: true
        },
        verify_password: {
            required: true,
            equalTo: selector + " #new_password"
        }
    },
    messages: {
        change_password: {
            required: "Please enter your current password"
        },
        new_password: {
            required: "Please enter a new password"
        },
        verify_password: {
            required: "Please enter a password that is a minimum of 8 characters and containers 1 upper case, 1 symbol, and 1 number",
            equalTo: "Your passwords did not match"
        }
    }
  });
}

html()每次用于复制表单内容时都需要设置表单验证。获取内容html()不会复制事件，这些是对表单进行验证所必需的。

于 2012-10-20T00:32:14.187 回答