使用正则表达式进行多输入验证

Question

我有一个用户必须填写详细信息的网络表单。我正在使用 Javascript 和 html 来使用正则表达式进行多个输入验证。我有下面的 javascript + html 代码的一部分。变量 a-g 是每个所需输入字段的正则表达式。

我创建了一个名为 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>

我希望整个 Web 表单能够在我不满足 if 语句的条件下为我提供完整的警报列表。相反，我的代码根本没有运行。

Answer 1

您的代码的意图是正确的。未显示警报的原因：

• var e 中的语法错误。注意缺少的括号对。应该是/0[0-1]1([0-9]){2}/;
• .test() 使用不正确。请参考w3schools tutorial how to use test。基本上，test() 是 javascript 中 Regexp 对象中的一个方法。所以它应该像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>

Answer 2

你有一些错误：

• 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>