如何在父函数中联接函数/侦听器

Question

How would I go about combining these scripts under one function/listener so that they do not interfere with one another.  The submit-button fadein/fadeout function should only fire if all inputs are valid or at least one input is invalid.

当代码触发审查提交按钮的淡入/淡出时，它们在第一次触发任何侦听器后中断，根据单个输入值进行切换，而不是考虑所有输入的状态。

I am unsure of how to create a universal function that validates each input without using things such as 
$('#review-username')

我也不确定从哪里开始弄清楚如何将特定的验证效果应用于特定的输入(电子邮件、用户名和密码(。 我在下面编写的每个脚本都独立工作，问题是当所有脚本都在同一页面上时，审阅提交按钮淡入/淡出效果会中断。

验证脚本 1

$('#review-username').on('input', function() {
$('#review-username').addClass('review-invalid');     
if (!/^[A-Za-z0-9]*$/g.test(this.value)) {       
this.focus();
return false; 
this.setCustomValidity('Invalid Characters, Please Use Only AlphaNumeric Characters');
$('#review-username').removeClass('review-valid'); 
$('#review-username').addClass('review-invalid');        
}
if(this.value.length >= 5) {
$('#review-submit-button').fadeIn(2250);   
this.setCustomValidity('');
$('#review-username').addClass('review-valid');
$('#review-username').removeClass('review-invalid'); 
$('#review-submit-button').removeClass('preventclick');
}

if(this.value.length < 5) {
$('#review-submit-button').fadeOut(1250);     
$('#review-username').removeClass('review-valid'); 
$('#review-username').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}

if(this.value.length > 16) {
$('#review-submit-button').fadeOut(1250);     
$('#review-username').removeClass('review-valid'); 
$('#review-username').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
});

验证脚本 2

$('#review-jobtitle').on('keyup', function(k) {
var val = $(this).val();
if (val.match(/[^a-zA-Zs]/g)) {
$(this).val(val.replace(/[^a-zA-Zs]/g, ''));
}
});

$('#review-jobtitle').on('input', function() {   
$('#review-jobtitle').addClass('review-valid');  
$('#review-jobtitle').addClass('invalid');
if (!/^[a-zA-Zs]*$/g.test(this.value)) {
$('#review-jobtitle').removeClass('review-invalid');
$('#review-jobtitle').addClass('review-valid');
}else{           
if(this.value.length >= 3) {
$('#review-submit-button').fadeIn(2250);
$('#review-jobtitle').removeClass('review-invalid');
$('#review-jobtitle').addClass('review-valid');
$('#review-submit-button').removeClass('preventclick');
}else{
$('#review-jobtitle').removeClass('review-valid');
$('#review-jobtitle').addClass('review-invalid');
}
}
if(this.value.length < 3) {
$('#review-submit-button').fadeOut(1250);
$('#review-jobtitle').removeClass('review-valid');
$('#review-jobtitle').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}else{
$('#jreview-obtitle').removeClass('review-invalid');
$('#review-jobtitle').addClass('review-valid');
}
if(this.value.length > 32) {
$('#review-submit-button').fadeOut(1250);
$('#review-jobtitle').removeClass('review-valid');
$('#review-jobtitle').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
});

验证脚本 3

$('#review-email').on('input', function() {
$('#review-email').addClass('review-invalid');     
if(this.value.length >= 6) {
var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;  
if(this.value.match(mailformat))  
{  
$('#review-submit-button').fadeIn(2250);
$('#review-email').removeClass('review-invalid');
$('#review-email').addClass('review-valid');
$('#review-submit-button').removeClass('preventclick');
}else{
$('#review-submit-button').fadeOut(1250);
$('#review-email').removeClass('review-valid');
$('#review-email').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
}
if(this.value.length < 6) {
$('#review-submit-button').fadeOut(1250);
$('#review-email').removeClass('review-valid');
$('#review-email').addClass('invalid');
$('#review-submit-button').addClass('preventclick');
}
if(this.value.length > 64) {
$('#review-submit-button').fadeOut(1250);
$('#review-email').removeClass('review-valid');
$('#review-email').addClass('review-invalid');
$('#review-submit-button').addClass('preventclick');
}
});

Answer 1

您可以创建一个额外的函数来确定提交按钮的状态，并从各个处理程序调用它。

function determineButtonState(){
var bothInputsAreValid = // logic for validation
if(bothInputsAreValid) // handle case for valid inputs
else // handle case for invalid inputs
}
$('#review-email').on('input', function() {
...
determineButtonState()
})

一般来说，这是一个很好的方法。将常见的代码块重构为单个可重用的源。我不会清理你所有的代码，并告诉你到底需要做什么，但这种方法应该能满足你的需求。