输入时输入文本验证？ [关闭]答案

【问题标题】：Input text validation while input? [closed]输入时输入文本验证？ [关闭]
【发布时间】：2020-09-16 11:12:14
【问题描述】：

在我的 html 页面中，我希望用户在 input type=text 中按特定顺序添加一个字符串。

如果我在输入标签中使用模式，那么在提交表单时会弹出错误，我在输入时想要它。

需要的模式是4Letters and then 4Numbers No white Space No Special Character Allowed

我在后端使用的模式是^[A-Z]{4}[0-9]{4}$

我怎样才能做到这一点？

编辑

致版主： 我从来没有说过错误是因为拼写错误。我在哪里提到过？结束的问题没有提供解决方案，无论您应该阅读该主题的人。

我没有接受答案，因为它们没有按预期工作。正在研究解决方案。

需要再次打开此线程。谢谢

【问题讨论】：

你交换了图案中的字母和数字，试试pattern="\d{4}[A-Za-z]{4}"
如果模式不匹配，我想在绑定时禁止我该怎么做？
@ChandraShekharAazad 你想禁止什么？一个按钮？
不，让我试着解释一下：文本输入中的用户正在输入字符串，（主要问题中提到了字符串的格式/模式），在uer输入4字母后，用户需要输入4number 但如果用户输入字母，则输入文本不应允许该字母。以及我在打字时想要的所有这些。
@ChandraShekharAazad 然后你应该实现 javascript，如果它位于第 4 位或更高位置，则删除该字母

标签： javascript html regex

【解决方案1】：

我尝试在输入更改上添加一个函数调用，所以当用户输入时，它会测试用户输入是否与模式匹配。 p>

注意

模式：^[0-9]{4}[A-Z]{4}$ 匹配这样的字符串1234ABCD
要更改模式，我们需要进行 3 次更改
1. 在HTML输入字段中，我们需要更新模式
2. 在JStestText我们需要更新字符串
  - testText 包含，完全匹配模式的示例字符串
3. （可选）根据需求我们可以更新textElem.innerHTML的值。

const textElem = document.querySelector(".text__error");

function checkText(event) {
    let testText = "1234ABCD"; // sample string that fully matches the pattern
    const { target } = event;
    if (!target.checkValidity()) {
        const { value } = target;
        testText = value + testText.slice(value.length);
        const re = new RegExp(event.target.pattern);
        if (!re.test(testText)) {
            target.value = value.substr(0, value.length - 1);
            if (!target.checkValidity()) {
                textElem.innerHTML = "Invalid, e.g. 1234ABCD ";
            } else {
                textElem.innerHTML = "Valid";
            }
        } else {
            textElem.innerHTML = "";
        }
    } else {
        textElem.innerHTML = "Valid";
    }
}

<form action="">
    <p>Text :
        <input type="text" pattern="^[0-9]{4}[A-Z]{4}$" required oninput="checkText(event)">
        <span class="text__error"></span>
    </p>
    <p>
        <input type="submit" value="Submit">
    </p>
</form>

【讨论】：

【解决方案2】：

有被否决的风险:) 但仍然是我的解决方案。我尝试使用一个正则表达式来解决它，但这不起作用，所以我使用两个正则表达式来检查模式，如果它无效，我将从字符串中删除最后一个元素。

$(document).ready(function() {
  $('#typehere').keyup(function(el) {
    let valid = true;
    let regex = /^\d{0,4}$/;
    let regex1 = /^\d{0,4}[a-zA-Z]{0,4}$/;
    if (this.value.length < 5) {
      valid = regex.test(this.value)
    } else {
      valid = regex1.test(this.value)
    }
    if (!valid) {
      console.log(valid)
      this.value = this.value.substr(0, this.value.length - 1);
    }

  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="text" id="typehere" />

【讨论】：