Проверка нескольких входов с регулярным выражением

Question

У меня есть веб-форма, в которой пользователь должен заполнить детали.Я использую Javascript и HTML, чтобы сделать несколько проверок ввода с помощью регулярных выражений.У меня есть часть кода JavaScript + HTML ниже.Переменные ag являются регулярными выражениями каждого необходимого поля ввода.

Я создал пустой массив с именем Err_arr для хранения ошибок, которые удовлетворяют условиям (например, если пользователь ничего не вводит / если пользователь не выполняеттребуемый формат ввода) Сообщение об ошибке будет помещено в массив.Последний оператор if будет использоваться для проверки, не является ли массив пустым, поэтому он будет печатать все сообщения об ошибках в несколько строк в зависимости от условий.

function validateForm() {
  var cname = document.getElementById("cname").value;
  var odate = document.getElementById("odate").value;
  var cno = document.getElementById("cno").value;
  var ccn = document.getElementById("ccn").value;
  var expm = document.getElementById("expm").value;
  var expy = document.getElementById("expy").value;
  var cvv = document.getElementById("cvv").value;

  var Err_Arr = [];
  var a = /^(\w\w+)\s(\w+)$/;
  var b = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
  var c = /[0-9]{8}/;
  var d = /[0-9]{16}/;
  var e = /0[0-1]1[0-9]){2}/;
  var f = /[0-9]{4}/;
  var g = /[0-9]{3}/;

  if (cname == null || cname == "") {
    Err_Arr.push("Please Enter Info - Customer Name");
  }
  if (odate == null || odate == "") {
    Err_Arr.push("Please Enter Info - Order Date");
  }
  if (cno == null || cno == "") {
    Err_Arr.push("Please Enter Info - Contact No");
  }
  if (ccn == null || ccn == "") {
    Err_Arr.push("Please Enter Info - Credit Card Number");
  }
  if (expm == null || expm == "") {
    Err_Arr.push("Please Enter Info - Expiry Month");
  }
  if (expy == null || expy == "") {
    Err_Arr.push("Please Enter Info - Expiry Year");
  }
  if (cvv == null || cvv == "") {
    Err_Arr.push("Please Enter Info - CVV No");
  }
  if (cname.test(a) == false) {
    Err_Arr.push("Enter correct input");
  }

  if (odate.test(b) == false) {
    Err_Arr.push("Enter correct input");
  }

  if (cno.test(c) == false) {
    Err_Arr.push("Enter correct input");
  }

  if (ccn.test(d) == false) {
    Err_Arr.push("Enter correct input");
  }

  if (expm.test(e) == false) {
    Err_Arr.push("Enter correct input");
  }

  if (expy.test(f) == false) {
    Err_Arr.push("Enter correct input");
  }

  if (cvv.test(g) == false) {
     Err_Arr.push("Enter correct input");
  }

  if (Err_Arr.length > 0) {
       alert(Err_Arr.join("\n"));
  }

}

<h2>Part 3 - Javascript with Alert Box</h2>
<form method="get" onsubmit="return validateForm()" name="form1">
  Customer name: <input id="cname" type="text" name="cname" autocomplete="off"> <br \> Order date: <input id="odate" type="text" name="odate" autocomplete="off"> <br \> Contact number: (e.g. 98765432) <input id="cno" type="text" name="cno" autocomplete="off">  <br \> Credit card number: (e.g. 123456789) <input id="ccn" type="text" name="ccn" autocomplete="off"> <br \> Expiry date - month part (mm): <input id="expm" type="text" name="expm" autocomplete="off"> <br \> Expiry date - year part (yyyy): <input id="expy"
    type="text" name="expy" autocomplete="off"> <br \> CVV Number (e.g. 123): <input id="cvv" type="text" name="cvv" autocomplete="off"> <br \>
  <input type="submit" value="Submit">
</form>

Я ожидаю, что вся веб-форма выдаст мне полный список предупреждений в условиях, которые я не выполнил для операторов if.Вместо этого мой код вообще не работает.

Answer 1

У вас есть ошибки:

• недопустимое регулярное выражение для e, поскольку оно содержит несбалансированные скобки
• Строки не имеют test метода; регулярные выражения делают
• В предложении для номера кредитной карты в вашем HTML не будет указано соответствующее регулярное выражение (для этого требуется 16 цифр)

Есть также несколько более коротких способов сделать что-то:

if (cname == null || cname == "")

может быть просто:

if (!cname)

Что еще более важно, у вас много повторений кода. Этого можно избежать, выполнив все в цикле:

function validateForm() {
    var validations = [
        { input: "cname", regex: /^(\w\w+)\s(\w+)$/, name: "Customer name" },
        { input: "odate", regex: /^(0?[1-9]|[12]\d|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/, name: "Order date" },
        { input: "cno", regex: /^\d{8}$/, name: "Contact No" },
        { input: "ccn", regex: /^\d{16}$/, name: "Credit Card Number" },
        { input: "expm", regex: /^0?[1-9]|1[012]$/, name: "Expiry Month" }, // Correct regex
        { input: "expy", regex: /^\d{4}$/, name: "Expiry Year" },
        { input: "cvv", regex: /^\d{3}$/, name: "CVV No" }
    ];

    var errors = validations.map(({input, regex, name}) => {
        var value = document.getElementById(input).value;
        if (!value) return "Please Enter Info - " + name;
        if (!regex.test(value)) return "Enter correct input - " + name;
    }).filter(Boolean);
    if (errors.length) {
       alert(errors.join("\n"));
       return false;
    }
    return true;
}

<h2>Part 3 - Javascript with Alert Box</h2>
<form method="get" onsubmit="return validateForm()" name="form1">
  Customer name: <input id="cname" type="text" name="cname" autocomplete="off"> <br \> 
  Order date: <input id="odate" type="text" name="odate" autocomplete="off"> <br \> 
  Contact number: (e.g. 98765432) <input id="cno" type="text" name="cno" autocomplete="off">  <br \> 
  Credit card number: (e.g. 1234567890123456) <input id="ccn" type="text" name="ccn" autocomplete="off"> <br \> 
  Expiry date - month part (mm): <input id="expm" type="text" name="expm" autocomplete="off"> <br \> 
  Expiry date - year part (yyyy): <input id="expy"  type="text" name="expy" autocomplete="off"> <br \> 
  CVV Number (e.g. 123): <input id="cvv" type="text" name="cvv" autocomplete="off"> <br \>
  <input type="submit" value="Submit">
</form>

Answer 2

Цель вашего кода правильная.Причина, по которой оповещения не отображаются:

• Синтаксическая ошибка в var e.обратите внимание на отсутствующую пару скобок.должно быть /0[0-1]1([0-9]){2}/;
• .test() используется неправильно.пожалуйста, обратитесь к учебнику w3schools, чтобы использовать тест .По сути, test() - это метод объекта Regexp в javascript.Таким образом, это должно быть похоже на regexObject.test(yourString)

Исправление всего, что, скорее всего, сделает ваш код работающим без проблем.

function validateForm() {
        var cname = document.getElementById("cname").value;

        var Err_Arr = [];
        var a = new RegExp(/^(\w\w+)\s(\w+)$/);

        if (cname == null || cname == "") {
          Err_Arr.push("Please Enter Info - Customer Name");
        }

        if (!a.test(cname)) {
          Err_Arr.push("Enter correct input");
        }

        if (Err_Arr.length > 0) {
             alert(Err_Arr.join("\n"));
        }
      }

<h2>Part 3 - Javascript with Alert Box</h2>
<form method="get" onsubmit="return validateForm()" name="form1">
  Customer name:<input id="cname" type="text" name="cname" autocomplete="off"> <br \> 
  <input type="submit" value="Submit">
</form>