Question

我创建了正则表达式，这些正则表达式将通过内联验证来验证具有名称，电子邮件，地址等的通用表单。

每个输入都有一个模糊函数，根据正在调用的正则表达式执行，但在每个模糊函数中，需要执行以下操作：

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

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

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

请参阅每个if中的代码，否则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', '.incorrect': '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]]();
    }
}

我有很多重复的JavaScript代码，并希望帮助清理它

1 个答案: