[英]Custom Regex Validator in Parsley.js
問題
我在為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控制台,將會看到錯誤:
未捕獲的TypeError:window.Parsley.addValidator不是函數
這意味着您正在使用的版本尚未更新(以前的版本使用window.ParsleyValidator.addValidator
)。 因此,如果您只是將Parsley.js更新到正確的版本,則代碼將起作用。 看到這個小提琴 。
但是,有一種更簡單的方法來完成您需要的操作(即沒有自定義驗證器)。 您可以使用內置的Pattern( 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="^(?=.*[az])(?=.*[AZ]).*$"
為data-parsley-pattern="(?=.*[az])(?=.*[AZ]).*"
在兩個輸入上。
根據Marc-AndréLafortune的評論,我刪除了開頭的^
和結尾的$
,因為這些模式現在已錨定。
data-parsley-pattern-message="Your password must contain at least (1) lowercase and (1) uppercase letter."
在兩個輸入上。 JsFiddle 在這里可用 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.