使用 JavaScript/jQuery 验证文本答案

【问题标题】：Validate the text with JavaScript/jQuery使用 JavaScript/jQuery 验证文本
【发布时间】：2014-05-05 06:12:00
【问题描述】：

在输入输入时，我想逐个字符地验证文本，例如文本是：The Quick Brown Fox

我想逐个字符匹配

like：最初，文本框为空：

我按下

T => 好的

h => 好的

a => 不行（文中不会写）

e => 好的

等等

我已经写了这个 jquery regex 表达式。但是，它不起作用，因为它正在比较整个文本。

$("#text").on("keypress", function(e) {
    if (!(/^The Quick Brown Fox$/i.test($(this).val()+String.fromCharCode(e.keyCode)))) {
        return false;
    }
}

【问题讨论】：

您正在检查每个按键，而您的正则表达式匹配整个字符串。输入整个字符串后检查。
您在测试时专门添加了整个字符串 ($(this).val()+)。
为什么不改用lookupString.indexOf($(this).val()) !== -1？

标签： javascript jquery regex

【解决方案1】：

你可以试试

$("#text").on("keypress", function(e) {

    var myText = ($(this).val()+String.fromCharCode(e.keyCode));

    if ('The Quick Brown Fox'.indexOf(myText) != 0) {
        return false;
    }

});

这是sample fiddle。

【讨论】：

【解决方案2】：

正则表达式不是做这种事情的最佳选择。

最好设置一个字符串并逐个遍历字符，直到找到不匹配。

检查字符串，从头开始，每次按下一个键。这会吸引人们粘贴到input。

【讨论】：

【解决方案3】：

当您的正则表达式匹配整个字符串时，您正在检查每个按键。输入整个字符串后检查。

$("#text").on("blur", function(e) {
    if (!(/^The Quick Brown Fox$/i.test($(this).val()))) {
        return false;
    }
}

【讨论】：

但是，我想在打字时检查.. 不是在打字后。

【解决方案4】：

也许您可以逐个字符循环比较并进行处理。

HTML： 输入正确的文本：

JQUERY 代码：

    var txt = "The Quick Brown Fox";
    var index = 0;
    $("#text").on("keyup", function (e) {
          var st = $('#text').val();
          while (index < st.length) {
              if (txt[index] === st[index]) index++;
              else {
                  $(this).val(st.substr(0, index));
                  break;
              }
          }
    });

现场演示： http://jsfiddle.net/dreamweiver/2dadL/21/

快乐编码:)

【讨论】：