如何根据正则表达式验证 Html TextAreaFor 中的单行

Question

我遇到了以下问题。在我当前的 C#/MVC 项目的网页上，我添加了一些控制元素来填充模型。这些控件元素中有一个文本区域，使用 @Html.TextAreaFor:

设计

<div class="smt-textarea ">
                @Html.LabelFor(m => m.Numbers):
                @Html.TextAreaFor(m => m. Numbers, new
                {
                    @class = "form-control",
                    id = "smt-textarea",
                    rows = 25,
                })

            </div>

用户应在该文本区域中输入一串数字。数字序列遵循特定的模式。该模式稍后在代码隐藏方法中进行评估，这些方法运行良好，并且不属于我这里的问题。

作为一项新功能，在文本区域中输入的数字现在应该根据实际序列中的数字数量进行验证。该规则规定只能在文本区域中输入来自 0-9 的数字。一个数列应恰好由 19 位数字组成。

由于我需要直接访问文本区域，我认为在这种特殊情况下选择 Javascript 可能是个好主意。我应该注意到我对 JS 很陌生，这可能是问题的一部分。尽管如此，基于SO上的一些帖子，我提出了以下初步解决方案。

console.log(textArea.value);
    var reg = /\d{19,19}/;
    let regex = new RegExp(reg);

    if (regex.test(textArea.value)) {
        console.log(regex.test(textArea.value));
        alert("IT'S A MATCH !!!");
    } else {
        alert("SORRY, NO MATCH.");
    }
}

window.onload = function () {
    var textArea = document.getElementById("smt-textarea");
    textArea.onkeyup = function (evt) {
        evt = evt || window.event;

        if (evt.keyCode === 13) {
            validateTextArea(this);
        }
    };
};

不幸的是，该代码似乎验证了整个文本区域，这意味着只要有一个数字序列与模式匹配，我就会得到一个匹配项，例如输入以下内容时

12345
0276114931111401167
skjfsjgrs
ksgfskgjsgjsrgs

skjfsjgrs 和 ksgfskgjsgjsrgs 是有效的，因为它们前面有一个 "valid" 数字序列。我想要完成的是，在按下 <ENTER> 键后，只有文本区域的当前行应该根据示例中概述的正则表达式进行验证。如果当前行不匹配，则应显示一条警告消息。一旦用户更正了 his/her 数字序列，验证应该继续移动到下一行，直到弹出下一个错误。

Answer 1

目前，如果您的文本区域中的字符串包含 19 个数字的序列，您的验证将通过。为了确保每一行都是有效的，你最好使用 ^ 和 $ anchors 从头到尾匹配整个字符串。是这样的： /^(\d{3}\n?)*$/

var textArea = document.getElementById("smt-textarea");
textArea.onkeyup = function(evt) {
  evt = evt || window.event;

  if (evt.keyCode === 13) {
    validateTextArea(this);
  }
};

function validateTextArea(textArea) {
  let regex = new RegExp(/^(\d{19}\n?)*$/);

  if (regex.test(textArea.value)) {
    alert("IT'S A MATCH !!!");
  } else {
    alert("SORRY, NO MATCH.");
  }
}

<textarea name="" id="smt-textarea" rows="25"></textarea>

此外，trim 您的字符串值可能是个好主意，以避免最后出现白色 space 字符的问题。

更新

这是另一个逐行验证的版本：

var textArea = document.getElementById("smt-textarea");
textArea.onkeyup = function(evt) {
  evt = evt || window.event;

  if (evt.keyCode === 13) {
    validateTextArea(this);
  }
};

function validateTextArea(textArea) {
  let lines = textArea.value.trim().split('\n');
  let regex = new RegExp(/^\d{19}$/);
  let invalid = lines.some(function(line, index) {
    let lineInvalid = !regex.test(line);
    if (lineInvalid) {
      alert(`Line ${index+1} is invalid`);
    }

    return lineInvalid;
  });

  console.log(`Text area is ${(invalid ? 'invalid' : 'valid')}`);
}

<textarea name="" id="smt-textarea" rows="25"></textarea>

如何根据正则表达式验证 Html TextAreaFor 中的单行

How to validate single lines in Html TextAreaFor against regular expression(s)

javascript

asp.net-mvc

textarea

asp.net-mvc-5