我正在使用parsleyjs验证密码字段。密码有三个要求,因此有三条验证消息:
当验证成功返回时,我不希望删除邮件,但要留在原位并以可视方式设置邮件样式,在这种情况下使用绿色复选标记(默认情况下邮件有红色错误)图标)。所以基本上想要添加一个类或删除并将消息保存在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'
}
});
答案 0 :(得分:4)
我想出了解决问题的解决方案,但效果很好。
您可以在 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中的消息添加为绿色否则为真或红色。
答案 1 :(得分:0)
是的,您可以在使用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的答案:
答案 2 :(得分:0)
@Thanasis答案还可以,但我想建议更短的答案(没有css)。
<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 (;,/,?,:,@,&,=,+,$)</li>
<li id="min8-char">at least 8 chars</li>
</ul>
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;
}
});
}