带有验证插件问题的“非常简单的内容滑块”。

Posted 2023-05-09

【中文标题】带有验证插件问题的“非常简单的内容滑块”。

【英文标题】："Pretty Simple Content Slider" with Validate Plugin problems.

【发布时间】：2012-10-05 23:00:51

【问题描述】：

所以我正在使用这个 jquery 内容滑块插件：slider。而且我还在使用 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=""   class="bg" />
            <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(...) 可能会混淆验证器的消息。要不要，我真的不知道。我只知道当您不输入正则表达式后的密码时，它不会显示错误消息。我知道密码的正则表达式有效，因为它在其他形式上验证得很好。那么关于什么是错的以及如何解决它的任何想法？谢谢

【问题讨论】：

你有六个"trailing commas of death"。我知道这只是 IE 的问题，但也许你想知道。

【参考方案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() 获取内容不会复制事件，这些是对表单进行验证所必需的。

【讨论】：

出于某种原因，verify_password 输入总是显示Your passwords did not match，即使密码匹配。有什么想法吗？

我想我可能会。看看 verify_password 规则如何匹配 #new_password？如果您更改 equalTo: element + "#new_password"

，这可能会得到解决

它打破了 DOM 规则，即当您的表单被复制时，#change_Pass 和 #new_password 基本上是重复的，但只要您指定唯一标识您的表单和输入的选择器，验证似乎就不会抱怨。跨度>

现在验证从不显示任何内容，就好像它总是相等一样。也许应该是equalTo: "#new_password" + element？

没关系，equalTo: element + "#new_password" 完全错误。这就是我没有测试并试图从臀部回答的结果。

【参考方案2】：

试试这个：

替换这一行：

$('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）存储在一个全局变量中，然后在下一次迭代之前将其附加回原来的位置。

【讨论】：

所以对于问题解决方案你说我应该做var val= $("#change_Pass").validate？如果是这样，那我该怎么办？

@Richard 不，我不是这个意思。