有没有写这个剧本的更短的方法是什么？

Question

我一直在学习如何使用控制台和Firefox的暂存器。

我有一个即时通讯基于正则表达式编写验证的一种形式。到目前为止，这不正是我想要它做的。问题是我觉得它的太多了。每个输入需要一个不同的模式，而不是所有都是必需的。

我试图想出一个for循环来处理这一点，但它并没有给我我需要为各个输入控制。有没有写对于只有某些输入回路的方法吗？或者将我必须写一个每正则表达式循环

如果我有什么是做这种正确的方法，有至少写它的一个较短的方法吗？

请记住在这一点上我只是在测试所有的正则表达式，我写他们，因此红色笔画绿色行程。这不是一个确认问题。我只是想知道，而不是写每行一个接一个较短的语法，因为我有大约16投入占。

// grabs the form
var myForm = document.forms["main-contact"]

// regular expressions
var onlyText = /^[A-Za-zÀ-ÖØ-öø-ÿ]+$/;
var textNumbers = /^[A-Za-zÀ-ÖØ-öø-ÿ0-9\s]+$/;
var onlyEmail = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

// Testing value matches the regular expression
myForm[0].value.match(onlyText) && myForm[0].value.length >= 2 ? myForm[0].setAttribute("style","outline: unset") : myForm[0].setAttribute("style","outline: 2px solid crimson");
myForm[1].value.match(onlyText) && myForm[1].value.length >= 2 ? myForm[1].setAttribute("style","outline: unset") : myForm[1].setAttribute("style","outline: 2px solid crimson");
myForm[2].value.match(onlyEmail) && myForm[2].value.length >= 2 ? myForm[2].setAttribute("style","outline: unset") : myForm[2].setAttribute("style","outline: 2px solid crimson");
myForm[3].value.match(textNumbers) && myForm[3].value.length >= 2 ? myForm[3].setAttribute("style","outline: unset") : myForm[3].setAttribute("style","outline: 2px solid crimson");

Answer 1

我不知道是否有一个较短的方式，因为我没有经验与暂存器工作，但因为你是一遍又一遍的硬编码相同的步骤中，您可以（如果myForm的对象范围内）进行布尔函数（也可以设置的值），是这样的：

function matchReg(field, num){
    if (myForm[num].value.match(field) && myForm[num].value.length >= 2){
        //attribute setting can also be done out of function, with boolean value
        myForm[num].setAttribute("style","outline: unset");
        return true;
    } else {
        myForm[num].setAttribute("style","outline: 2px solid crimson");
        return false;
    }
}

并调用它是这样的：

matchReg(onlyText, 0);
matchReg(onlyText, 1);
//etc...

如果这仍然是很多硬编码，你可以写一个数组或一些其他类型的可迭代的对象（如字典，或二维数组），就像这样：

//js 2d array
var toIterate = [
         [onlyText, 0],
         [onlyText, 1],
         [onlyEmail,2],
         //etc....
]
//js dictionary object
var toIterate = {
        0: onlyText,
        1: onlyText,
        2: onlyEmail,
        //etc....
}

并遍历它：

//for the dict:
Object.keys(toIterate).forEach(key => {
    matchReg(toIterate[key],key); 
});
//for the array-object:
for (var i = 0; i < toIterate.length; i++) {
   matchReg(toIterate[i][0],toIterate[i][1])
}

（见于https://stackoverflow.com/a/41550077） 一般来说，有很多方法来解决这个问题，并且每个程序员应该看到的东西是在进行中当有代码非常相似的线条显示出来。通常的做法是把被一遍又一遍地来了再次的代码片段，并设计了一个功能，但我想你已经知道这一点。

另外，从一个Java背景的，这里提出的功能可以是故障或没有时间效率。

Answer 2

{2,}可以被用来代替+匹配2个或更多，和轮廓可以与.style.outline进行设置：

var onlyText = /^[A-Za-zÀ-ÖØ-öø-ÿ]{2,}$/;
var textNumbers = /^[A-Za-zÀ-ÖØ-öø-ÿ0-9\s]{2,}$/;
var onlyEmail = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
var myForm = document.forms["main-contact"]

function setOutline(i, r) { 
  myForm[i].style.outline = r.test(myForm[i].value) ? "unset" : "2px solid crimson"; 
}

setOutline(0, onlyText);
setOutline(1, onlyText);
setOutline(2, onlyEmail);
setOutline(3, textNumbers);

---

替代与环和阵列与正则表达式：

var onlyText = /^[A-Za-zÀ-ÖØ-öø-ÿ]{2,}$/;
var textNumbers = /^[A-Za-zÀ-ÖØ-öø-ÿ0-9\s]{2,}$/;
var onlyEmail = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
var myForm = document.forms["main-contact"]
var patterns = [onlyText, onlyText, onlyEmail, textNumbers];

for (var i = 0; i < 4; ++i) {
  myForm[i].style.outline = patterns[i].test(myForm[i].value) ? "unset" : "2px solid crimson"; 
}