Question

我正在使用parsleyjs验证密码字段。密码有三个要求，因此有三条验证消息：

密码至少需要8个字符
需要一个特殊字符
需要一个号码

当验证成功返回时，我不希望删除邮件，但要留在原位并以可视方式设置邮件样式，在这种情况下使用绿色复选标记（默认情况下邮件有红色错误）图标）。所以基本上想要添加一个类或删除并将消息保存在DOM中。

作为一个例子，当插入一个整数时，验证可能如下所示：

是否可以使用parsley来阻止默认行为（删除消息）并将成功的类添加到相应的错误消息（而不仅仅是错误列表容器）？

这是我到目前为止的一个codepen demo

$(function() {
    $('.form').parsley();
});

window.Parsley.addValidator('number', {
    validateString: (value) => {
        const format = /\d/;
        return format.test(value);
    },
    messages: {
        en: 'One number is required'
    }
});

window.Parsley.addValidator('specialChar', {
    validateString: (value) => {
        const format = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/;
        return format.test(value);
    },
    messages: {
        en: 'One special character is required'
    }
});

Answer 1

我想出了解决问题的解决方案，但效果很好。

您可以在 Codepen Link 上对其进行测试。

<强> HTML

<form class="form">
    <label for="password-01">Password:</label>
  <input class="password" id="password-01" type="password" required 
data-parsley-class-handler=".errors"
data-parsley-errors-container=".errors"
data-parsley-special-char="" data-parsley-number="" minlength="8" data-parsley-validation-threshold="0" data-parsley-trigger="keyup" data-parsley-priority-enabled="false"/>
    <input type="submit" value="Submit" />
</form>
<div class="feedback">
    <div class="success"></div>
    <div class="errors"></div>
</div>

<强> CSS

body {
    font-family: sans-serif;
}

.form {
    padding: 1rem;
    background: lightgrey;
}

label {
    display: block;
    margin-bottom: .2rem;
}

.feedback {
    margin-top: 1rem;
    border: 1px solid gray;
    padding: 2rem;
}

.parsley-errors-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.parsley-errors-list li {
    color: red;
}

.success {
    color: green;
}

<强>的Javascript

$(function() {
    $('.form').parsley();   

    window.Parsley.addValidator('number', {
        validateString: (value) => {
            const format = /\d/;
            return format.test(value);
        },
        messages: {
            en: 'No number'
        }
    });

    window.Parsley.addValidator('specialChar', {
        validateString: (value) => {
            const format = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/;
            return format.test(value);
        },
        messages: {
            en: 'No special character'
        }
    });

    $('.password').on('keyup', function() {

        $('.success').html(""); // clear success div

            // check numbers success
            if (window.Parsley._validatorRegistry.validators.number.validateString($('.password').val())){      
                $('.success').append( window.Parsley._validatorRegistry.validators.number.messages.en +"<br>");
            }


            // check specialChar success
            if (window.Parsley._validatorRegistry.validators.specialChar.validateString($('.password').val())){     
                $('.success').append( window.Parsley._validatorRegistry.validators.specialChar.messages.en +"<br>");
            }

        var length = $('.password').val().length;

            // check if input is empty
            if (length > 0){
                    $('.success').append("This value is required.<br>");
            }

            // check minlength success  
            var minlength = $('.password').attr("minlength");
            if (length >= minlength){
                $('.success').append("This value is too short. It should have "+minlength+" characters or more.<br>");
            }



    });

});

HTML中的更改：

我做的是我为绿色消息（success div）添加了一个div，红色消息（errors div）的div，并将反馈div重新排列为：

<div class="feedback">
    <div class="success"></div>
    <div class="errors"></div>
</div>

同样在输入属性中我替换了它：

data-parsley-class-handler=".feedback"
data-parsley-errors-container=".feedback"

用这个：

data-parsley-class-handler=".errors"
data-parsley-errors-container=".errors"

CSS的变化：

我将此CSS部分重命名为.parsley-errors-list .success：.success。

Javascript的变化：

在javascript中，我添加了函数window.Parsley.on('field:validate', function() {...});，该函数在检查验证程序之前触发（请参阅事件列表下的here）。在那里我添加了4个if语句，用于检查numbers验证器是否正确，specialChar验证器是否正确，输入是否为空以及输入的长度是否大于或等于MINLENGTH个。如果其中任何一个为真，则相应的消息将添加到div success，其中文本的颜色为绿色。在添加这些之前，会清除success div（$('.success').html("");），以便更新绿色消息。

希望这有用。如果你有什么不明白或者你想要的不同，请告诉我。

来源：

<强>更新

由于您希望使邮件保持在同一位置，您可以查看我创建的Codepen。我从html中删除了errors和success div，并在 javascript 中添加了以下功能：

$('.password').on('input', function() {

    $('.feedback').html(""); // clear feedback div

    // check numbers success
    if (window.Parsley._validatorRegistry.validators.number.validateString($('.password').val())){      
        $('.feedback').append("<font color='green'>" + window.Parsley._validatorRegistry.validators.number.messages.en +"</font><br>");
    } else {      
        $('.feedback').append("<font color='red'>" + window.Parsley._validatorRegistry.validators.number.messages.en +"</font><br>");
    }   

    // check specialChar success
    if (window.Parsley._validatorRegistry.validators.specialChar.validateString($('.password').val())){     
        $('.feedback').append("<font color='green'>"+ window.Parsley._validatorRegistry.validators.specialChar.messages.en +"</font><br>");
    } else {
        $('.feedback').append("<font color='red'>"+ window.Parsley._validatorRegistry.validators.specialChar.messages.en +"</font><br>");
    }

    var length = $('.password').val().length;

    // check if input is empty
    if (length > 0){
        $('.feedback').append("<font color='green'>This value is required.</font><br>");
    } else {
        $('.feedback').append("<font color='red'>This value is required.</font><br>");
    }

    // check minlength success  
    var minlength = $('.password').attr("minlength");
    if (length >= minlength){
        $('.feedback').append("<font color='green'>This value is too short. It should have "+minlength+" characters or more.</font><br>");
    } else {
        $('.feedback').append("<font color='red'>This value is too short. It should have "+minlength+" characters or more.</font><br>");
    }   

});

使用上述功能，每次更改输入时，feedback div被清除，然后检查4个条件，如果相应的条件，则将feedback div中的消息添加为绿色否则为真或红色。

Answer 2

是的，您可以在使用CSS时添加自定义parsleyjs。请参阅以下内容：

$('form').parsley();

$.listen('parsley:field:error', function(ParsleyField) {
    ParsleyField.$element.prev('i.fa').removeClass('cta-success').addClass('cta-error');
});
$.listen('parsley:field:success', function(ParsleyField) {
    ParsleyField.$element.prev('i.fa').removeClass('cta-error').addClass("cta-success");    
});

您可以在JsFiddle网站上查看工作示例。

您还可以查看codepen.io

上的示例

您还可以通过以下方式查看guillaumepotier的答案：

Parsley.js - Displaying Errors in a Specified Element

Answer 3

@Thanasis答案还可以，但我想建议更短的答案（没有css）。

HTML

<input type="password" 
       data-parsley-number="true" 
       data-parsley-specialchar="true" 
       data-parsley-min8="true" 
       data-parsley-error-message="Password rules are:" 
       data-parsley-required="true">
<ul>
    <li id="number-char">number</li> 
    <li id="special-char">special-char (;,/,?,:,@,&amp;,=,+,$)</li> 
    <li id="min8-char">at least 8 chars</li> 
</ul>

的JavaScript：

if (typeof Parsley !== 'undefined') {

    Parsley.addValidator('specialchar',
        function (value){            
            if (/^[a-zA-Z0-9.]*$/.test(value)==false) {
                jQuery("#special-char").addClass("completed");
                return true;
            }
            else {
                jQuery("#special-char").removeClass("completed");
                return false;
            }
        });    
    Parsley.addValidator('number',
        function (value){            
            if (/[0-9]/.test(value)){
                jQuery("#number-char").addClass("completed");
                return true;
            }
            else{
                jQuery("#number-char").removeClass("completed");
                return false;
            }                
        });  
    Parsley.addValidator('min8',
        function (value){            
            if (value.length >= 8){
                jQuery("#min8-char").addClass("completed");
                return true;
            }
            else{
                jQuery("#min8-char").removeClass("completed");
                return false;
            }                
        });
}

如何使用Parsleyjs防止从DOM中删除表单验证错误

3 个答案:

HTML

的JavaScript：