问题
我在为 Parsley.js 插件创建自定义验证器时遇到问题。我想要做的是测试一个值与正则表达式。具体来说,我正在尝试验证密码值是否至少包含一个大写字母和一个小写字母。验证代码抛出错误,但在满足条件时不返回 true。
HTML
<form name="Form" id="signupform" method="post" action="#" data-parsley-validate data-parsley-excluded="input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden">
<label for="password1">New Password <span class="req">*</span></label>
<input name="password" id="password1" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspannewpassinput" data-parsley-required-message="Please enter your new password." data-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$" data-parsley-required/>
<span class="errorspannewpassinput"></span>
<label for="confirm_password1">Confirm Password <span class="req">* </span></label>
<input name="Password_2" id="password2" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspanconfirmnewpassinput" data-parsley-required-message="Please re-enter your new password." data-parsley-equalto="#password1" data-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$" data-parsley-required />
<span class="errorspanconfirmnewpassinput"></span>
<input type="submit" name="submitinfo" id="submitsignup" data-theme="b" style="width:100%;" alt="Sign Up Now" value="Submit Account Request" />
</form>
jQuery
$(function() {
// Set variables
var pmixedCase = 'Y';
var mixedCase = $('.mixedcase');
var passwordField = $('#password1, #password2');
var passwordFieldErrors = $('.errorspannewpassinput, .errorspanconfirmnewpassinput');
// Assemble list of visible password requirements
// Mixed Case
if (pmixedCase === 'Y') {
mixedCase.show();
} else {
mixedCase.hide();
}
// Custom Validators
window.Parsley.addValidator('mixedcase', {
requirementType: 'regexp',
validateString: function(value, requirement) {
return requirement.test(value);
},
messages: {
en: 'Your password must contain at least (1) lowercase and (1) uppercase letter.'
}
});
});
我在下面包含了一个 JSFiddle。
最佳答案
您面临的问题是您的 JsFiddle 使用的是 Parsley 2.1.2,而文档已更新为 Parsley 2.2.0。
如果您查看 Javascript 控制台,您会看到一个错误:
Uncaught TypeError: window.Parsley.addValidator is not a function
这意味着您正在使用的版本尚未更新(以前的版本使用 window.ParsleyValidator.addValidator
)。因此,如果您只需将 Parsley.js 更新为正确的版本,您的代码就可以正常工作。 See this fiddle .
但是,有一种更简单的方法可以完成您的需要(即,无需自定义验证器)。您可以使用内置模式 ( data-parsley-pattern
)。例如:
<form name="Form" id="signupform" method="post" data-parsley-validate data-parsley-excluded="input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden">
<label for="password1">New Password <span class="req">*</span></label>
<input name="password" id="password1" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspannewpassinput" data-parsley-required-message="Please enter your new password." data-parsley-pattern="(?=.*[a-z])(?=.*[A-Z]).*" data-parsley-pattern-message="Your password must contain at least (1) lowercase and (1) uppercase letter." data-parsley-required />
<span class="errorspannewpassinput"></span>
<label for="confirm_password1">Confirm Password <span class="req">*</span></label>
<input name="Password_2" id="password2" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspanconfirmnewpassinput" data-parsley-required-message="Please re-enter your new password." data-parsley-equalto="#password1" data-parsley-pattern="(?=.*[a-z])(?=.*[A-Z]).*" data-parsley-required data-parsley-pattern-message="Your password must contain at least (1) lowercase and (1) uppercase letter."/>
<span class="errorspanconfirmnewpassinput"></span>
<input type="submit" name="submitinfo" id="submitsignup" data-theme="b" style="width:100%;" alt="Sign Up Now" value="Submit Account Request" />
</form>
我改变了什么:
为
data- 替换了
在两个输入上。data-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$"
parsley-pattern="(?=.*[a-z])(?=.*[A-Z]).*"根据 Marc-André Lafortune的评论我删除了开头的
^
和结尾的$
,因为模式现在已锚定。- 在两个输入上添加了
data-parsley-pattern-message="您的密码必须至少包含 (1) 个小写字母和 (1) 个大写字母。"
。
JsFiddle available here .
关于javascript - Parsley.js 中的自定义正则表达式验证器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33289509/