Question

我正在使用这个fancy sliding box并且在验证时遇到了一些问题。它有默认验证，用于检查字段是否为空，但我想添加更多验证，如两个特定字段是否相等或者特定字段的长度是否在所需长度内。我编辑了代码，但遇到的问题是，当前一个导航字段有任何错误时，它也为下一个导航添加了错误类，尽管它已正确填充。 /> 这是我的代码（注意我不太了解jquery）：

function validateStep(step) {
     if(step == fieldsetCount) return;

     var error = 1;
     var hasError = false;      

    $('#formElem').children(':nthchild('+parseInt(step)+')')
        .find(':input:not(button)')
        .each(function() {
            var $this = $(this);
            var valueLength = jQuery.trim($this.val()).length;

            //i don't know how to generate a specific field value using this keyword
            var pas=$('#myPassword').val().length;
            var pas1=$('#myPassword').val();
            var pas2=$('#VerifyPassword').val();

            var pin1=$('#mPin').val();
            var pin2=$('#vVPin').val();
            var pas_ok=1;

            if(pas1 != pas2 || pin1 ! =pin2 || pas < 5 ) {
                pas_ok=0;
            }

            if(valueLength == '' || pas_ok==0) {
                hasError = true;
                $this.css('background-color','#FFEDEF');
            } else {
                $this.css('background-color','#FFFFFF');
            }
    });

    var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
    $link.parent().find('.error,.checked').remove();

    var valclass = 'checked';

    if(hasError) {
        error = -1;
        valclass = 'error';
    }

    $('<span class="'+valclass+'"></span>').insertAfter($link);

    return error;
}

这是我的表格：

<div id="steps"> 
    <form id="formElem" name="formElem" action="" method="post" >
        <fieldset class="step">
            <legend>Account</legend>
            <p> 
                <label for="password">Password</label>
                <input type="password" name="myPassword" id="myPassword" value="<?=$myPassword;?>" AUTOCOMPLETE=OFF  />
            </p>
            <p> 
                <label for="password"> Verify Password</label>
                <input type="password" name="VerifyPassword" id="VerifyPassword" value="<?=$VerifyPassword;?>" />
            </p>
            <p> 
                <label for="password"> Your Personal Pin </label>
                <input type="pin" name="mPin" id="mPin" value="<?=$mPin;?>" />
            </p>
            <p> 
                <label for="password"> Verify Personal Pin </label>
                <input type="pin" name="vVPin" id="vVPin" value="<?=$vVPin;?>" />
            </p>        
        </fieldset>
    </form>        
</div>

Answer 1

您正在做的是再次检查每个周期的所有输入字段。 .each()一次为您提供一个输入。您想要做的是通过输入相应的id区分它们，然后运行检查。以下代码检查所有4个输入字段的长度，如果长度为零，则将其标记为红色;如果是两个验证输入字段，则还检查它们是否与其原始输入字段相同。代码未经测试，但您应该明白这一点。

$('#formElem').children(':nthchild('+parseInt(step)+')')
    .find(':input:not(button)')
    .each(function() {
        var $this = $(this);
        var value = $this.val();
        var valueLength = jQuery.trim(value).length;

        var pas_ok = 1;
        var id = $this.attr("id");
        if (id === 'VerifyPassword') {
            var password = $('#myPassword').val();
            var vPassword = value;
            if (password !== vPassword)
                pas_ok = 0;
        } else if (id === 'vVPin') {
            var pin = $('#mPin').val()
            var vPin = value;
            if (pin !== vPin || pin.length < 5)
                pas_ok = 0;
        }

        if(valueLength === 0 || pas_ok === 0) {
            hasError = true;
            $this.css('background-color','#FFEDEF');
        } else {
            $this.css('background-color','#FFFFFF');
        }
    });

旁注：如果您在javascript中比较某些内容，请始终使用===代替==。

花式滑动形式，更多验证

1 个答案: