Question

我有一个Web表单，用户必须在其中填写详细信息。我使用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>

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

2 个答案: