javascript - 我有很多重复的 JavaScript 代码，希望得到帮助来清理它

Question

我创建了正则表达式，将通过内联验证对包含姓名、电子邮件、地址等的通用表单进行验证。

每个输入都有一个模糊函数，该函数的执行取决于所调用的正则表达式，但在每个模糊函数内，需要发生以下一些事情:

-如果未输入任何内容，则不执行任何操作

-如果输入的值对应于必要的正则表达式并且正确，则显示复选标记

-如果输入的值不对应于必要的正则表达式，则显示错误并显示红色 X

请查看每个 if、else if 和 else 中重复使用相同代码的代码。有没有办法可以创建变量或函数，这样我就不必继续重复代码？

下面是我目前拥有的一些代码。它工作得很好，我只是觉得有一种更简单/更干净的方法来执行它，这样它就不会那么重复了。我对 javascript 很陌生，所以任何事情都会受到极大的赞赏!

//validate name
function validateName(name) { 
  var reName = /^[^0-9!@#$%^&*()]+$/
return reName.test(name);
};

//validate address
function validateLetterNum(letnum) {
  var reAddress = /^[a-zA-Z\s\d\/.]*\d[a-zA-Z\s\d\/.]*$/
return reAddress.test(letnum);
};



//name validation (first and last)
$(".validName").blur(function(){
  var name = $(this).val();
  var nameCount = name.length;
  console.log(name + " " + nameCount);
    if (nameCount === 0 || nameCount == " "){
      console.log("nothing was entered");
      $(this).parent().find(".error").hide();
    }
    else if (validateName(name) && nameCount >= 2){
      console.log("good!");
        // return correct;
        $(this).parent().find(".error").fadeOut();
        $(this).parent().find(".correct").fadeIn();
        $(this).parent().find(".incorrect").hide();  
    } else {
      console.log("NOT good");
        $(this).parent().find(".error").show();
        $(this).parent().find(".correct").hide();
        $(this).parent().find(".incorrect").fadeIn();
    }
});

//address validation
$(".validLetNum").blur(function(){
  var letnum = $(this).val();
  var letnumCount = letnum.length;
    if (letnumCount === 0 || letnumCount == " "){
      console.log("nothing was entered");
      $(this).parent().find(".error").hide();
    }
    else if (validateLetterNum(letnum)) {
      console.log("letnum is good!");
      $(this).parent().find(".error").hide();
      $(this).parent().find(".correct").fadeIn();
      $(this).parent().find(".incorrect").hide();
    } else {
        console.log("letnum is NOT good");
        $(this).parent().find(".error").show();
        $(this).parent().find(".correct").hide();
        $(this).parent().find(".incorrect").fadeIn();
    }
});

Answer 1

放入一个函数并以此和 ['fadeOut', 'fadeIn', 'hide'] 为例调用它(仅当顺序固定时才有效)

function foo(t, fn) {
    $(t).parent().find(".error")[fn[0]]();     //.fadeOut();
    $(t).parent().find(".correct")[fn[1]]();   //.fadeIn();
    $(t).parent().find(".incorrect")[fn[2]](); //.hide();
}

另一种解决方案是使用此对象和一个对象来调用 { '.error': 'fadeOut', '. Correct': 'fadeIn', '.in Correct': 'hide' }

function foo(t, o) {
    var i;
    for (i in o) {
        $(t).parent().find(i)[o[i]]();
    }
}

您的示例，其中替换的部件作为注释

//name validation (first and last)
$(".validName").blur(function () {
    var name = $(this).val();
    var nameCount = name.length;
    console.log(name + " " + nameCount);
    if (nameCount === 0 || nameCount == " ") {
        console.log("nothing was entered");
        $(this).parent().find(".error").hide();
    }
    else if (validateName(name) && nameCount >= 2) {
        console.log("good!");
        // return correct;
        foo(this, { '.error': 'fadeOut', '.correct': 'fadeIn', '.incorrect': 'hide' });
        //$(this).parent().find(".error").fadeOut();
        //$(this).parent().find(".correct").fadeIn();
        //$(this).parent().find(".incorrect").hide();
    } else {
        console.log("NOT good");
        foo(this, { '.error': 'show', '.correct': 'hide', '.incorrect': 'fadeIn' });
        //$(this).parent().find(".error").show();
        //$(this).parent().find(".correct").hide();
        //$(this).parent().find(".incorrect").fadeIn();
    }
});

//address validation
$(".validLetNum").blur(function () {
    var letnum = $(this).val();
    var letnumCount = letnum.length;
    if (letnumCount === 0 || letnumCount == " ") {
        console.log("nothing was entered");
        $(this).parent().find(".error").hide();
    }
    else if (validateLetterNum(letnum)) {
        console.log("letnum is good!");
        foo(this, { '.error': 'hide', '.correct': 'fadeIn', '.incorrect': 'hide' });
        //$(this).parent().find(".error").hide();
        //$(this).parent().find(".correct").fadeIn();
        //$(this).parent().find(".incorrect").hide();
    } else {
        console.log("letnum is NOT good");
        foo(this, { '.error': 'show', '.correct': 'hide', '.incorrect': 'fadeIn' });
        //$(this).parent().find(".error").show();
        //$(this).parent().find(".correct").hide();
        //$(this).parent().find(".incorrect").fadeIn();
    }
});

function foo(t, o) { //change function name to an appropriate name
    var i;
    for (i in o) {
        $(t).parent().find(i)[o[i]]();
    }
}