gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 16:01:53 26 4
gpt4 key购买 nike

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

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

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

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

-如果输入的值对应于必要的正则表达式,则显示错误并显示红色 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();
}
});

最佳答案

放入一个函数并以此和 ['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]]();
}
}

关于javascript - 我有很多重复的 JavaScript 代码,希望得到帮助来清理它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31119269/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com