Есть ли еще более короткий способ написания этого сценария? - PullRequest
Новая
       35

Есть ли еще более короткий способ написания этого сценария?

0 голосов
/ 04 февраля 2019

Я изучаю, как использовать консоль и ScratchPad в 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");

Ответы [ 4 ]

0 голосов
/ 05 февраля 2019

{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"; 
}
0 голосов
/ 04 февраля 2019

Вы можете отделить повторяющийся код и создать общую функцию.Например, добавление стиля повторяется во всех условиях, которые можно заменить общей функцией и классом CSS вместо встроенного стиля 

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}$/;


for (var x = 0; x < 4; x++) {
  let elem = myForm[x];
  let elemValue = myForm[x].value;
  if (x === 2) {
    testCond(elemValue, 'onlyEmail') ? setOutline(elem) : setOutline(elem,
    'outlineCrimson');
  } else if (x === 3) {
    testCond(elemValue, 'textNumbers') ? setOutline(elem) : setOutline(elem, 'outlineCrimson');
  } else {
    testCond(elemValue, 'onlyText') ? setOutline(elem) : setOutline(elem, 'outlineCrimson');
  }
}
// function to test the regex and check the length of value
function testCond(b, a) {
  return elemValue.match(a) && 2 <= elemValue.length ? !0 : !1;
};

// function to set the class, by default it will be setOutline
function setOutline(elem, defClass = 'setOutline') {
  elem.classList.add(defClass)
}

.setOutline {
  outline: unset
}

.outlineCrimson {
  outline: 2px solid crimson;
}
0 голосов
/ 04 февраля 2019

Я не знаю, есть ли более короткий путь, так как у меня нет опыта работы с ScratchPad, но, поскольку вы снова и снова программируете один и тот же шаг, вы можете (если объект 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, представленные здесь функции могут быть неисправныили жене эффективно по времени.

0 голосов
/ 04 февраля 2019

Этот вопрос, вероятно, должен быть на CodeReview .

  • myForm - это коллекция, вероятно, она должна быть во множественном числе.
  • 4 последние строкиочень похоже, они могут быть реорганизованы в функции, принимая форму и регулярное выражение в качестве аргументов.
  • Вы можете заменить троичный оператор на if
  • Вы можете определить классы CSS (correct & incorrect) вместо изменения стиля.
  • Вы можете zip myForms и массив регулярных выражений ([onlyText, onlyText, onlyEmail, textNumbers]), чтобы получить регулярное выражение для каждой формы,и отправьте их в новую функцию.
...