如何使用Parsleyjs防止从DOM中删除表单验证错误
Ing*_*gvi 6 javascript jquery parsley.js
我正在使用parsleyjs验证密码字段.密码有三个要求,因此有三个验证消息:
- 密码至少需要8个字符
- 需要一个特殊角色
- 一个号码是必需的
当验证返回成功时,我不希望删除该消息,而是留在原位并以可视方式设置消息样式,在这种情况下带有绿色复选标记(默认情况下消息有一个红色错误图标).所以基本上想要添加一个类或删除并保留DOM中的消息.
作为一个例子,当插入一个整数时,验证可能如下所示:
是否可以使用parsley来防止默认行为(删除消息)并将成功的类添加到相应的错误消息(而不仅仅是错误列表容器)？
$(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'
}
});
我为你的问题想出了这个解决方案，效果很好。
您可以在此Codepen 链接上进行测试。
超文本标记语言
<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 的更改：
我所做的是，我为绿色消息添加了一个 div ( successdiv)，为红色消息添加了一个 div ( errorsdiv)，并将反馈 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() {...});在检查验证器之前触发的函数（请参阅此处的事件列表）。在那里我添加了 4 个 if 语句，用于检查numbers验证器是否正确、specialChar验证器是否正确、输入是否不为空以及输入的长度是否大于或等于 minlength。如果其中任何一个为真，则相应的消息将添加到success文本颜色为绿色的 div 中。在添加这些内容之前，先success清除 div ( $('.success').html("");) 以便更新绿色消息。
希望这有帮助。如果您有不明白的地方或者您有不同的需求，请告诉我。
资料来源：
更新
由于你想让消息保持在相同的位置，你可以查看我创建的这个Codepen。我从 html 中删除了errors和div，并在javascript中添加了以下函数：success
$('.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如果相应条件为 true，则将消息添加到绿色的 div 中，否则将消息添加到红色。
| 归档时间： |
|
| 查看次数： |
1061 次 |
| 最近记录： |