问题
我在为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。
答案 0 :(得分:5)
您面临的问题是您的JsFiddle正在使用Parsley 2.1.2,而文档已经更新为Parsley 2.2.0。
如果你看一下Javascript控制台,你会看到一个错误:
未捕获的TypeError:window.Parsley.addValidator不是函数
这意味着您使用的版本尚未更新(之前的版本使用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-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$"
data-parsley-pattern="(?=.*[a-z])(?=.*[A-Z]).*"
。
根据Marc-André Lafortune的评论,我在开始时删除了^
,在结尾处删除了$
,因为模式现已停止。
data-parsley-pattern-message="Your password must contain at least (1) lowercase and (1) uppercase letter."
。JsFiddle available here。