[英]jQuery Validate - Fire custom 'addMethod' on focus / keypress
我為jQuery Validate創建了兩個自定義驗證方法。 一種用於密碼強度測試。 我希望在首先關注輸入時觸發此操作,因此它可以在用戶類型提供實時反饋時進行驗證,僅在表單提交時有效。
編輯:驗證僅在提交表單時運行,我希望它在用戶鍵入密碼時運行,以便他們獲得有關密碼強度的實時反饋。
理想情況下,我只希望此實時驗證在選定字段上起作用。 也就是說,在提交表單之前,該帳戶的電子郵件地址不應該這樣操作,否則在輸入完該表單之前,它將不斷提醒他們其地址無效。 但是,如果僅當將其應用於所有元素時才起作用,那么我將接受這種形式的表單。
因此,是否可以在提交表單之前在焦點/鍵上調用jQuery Validate附加方法?
這是我要調用的新方法。
$.validator.addMethod('passwordStrength', function(password, element, param) {
// add our password test to
if (typeof zxcvbn === 'function') {
var passwordMeter = $('#' + $(element).attr('id') + 'meter');
var passwordMeterStrength = passwordMeter.find('.strength');
var passwordMeterTrack = passwordMeter.find('.track');
var passwordMeterBar = passwordMeterTrack.children();
var strengthValues = ['Very weak', 'Weak', 'Average', 'Good', 'Strong'];
//passwordMeter
// get values of the other inputs in this form
var otherinputs = [];
if (param) {
for (var input in param['user_inputs']) {
// get the value and add it to an array
otherinputs.push($(param['user_inputs'][input]).val());
}
}
// run the test!
var strength = testPasswordStrength(password, otherinputs);
// show the strength of the password
passwordMeterStrength.text(strengthValues[strength.score]);
// change the class of our bar. nice browsers will animate this in CSS!
passwordMeterBar.removeClass().addClass('bar strength' + strength.score);
// we must be two or better
if (strength.score > 1) {
return true;
} else {
return false;
}
} else {
console.error('strength test is not loaded');
}
}, '');
我最終將方法的主要工作移到了由我的方法調用的單獨函數中。 然后,我將該功能綁定到密碼輸入。 我選擇input
事件是因為它會在按鍵和更改時觸發-它非常靈活,但經常被遺忘。
$.validator.addMethod('passwordStrength', function(password, element, param) {
return passwordStrength(password, element, param);
}, '');
passwordEl.on('input', passwordStrength());
passwordStrength
與我的問題相同。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.