JavaScript 如果文本输入不符合参数，则阻止文本输入

JavaScript Prevent text entry if it does not meet parameters

本文关键字：输入 文本 不符合 如果 JavaScript 参数      更新时间：2023-09-26

在使用JavaScript函数时，如果字符不满足某些参数，我希望防止字符被输入到表单中。我使用的原始 JavaScript 代码是： 

    function validateLetter() {
        var textInput = document.getElementById("letter").value;
        var replacedInput = textInput.replace(/[^A-Za-z]/g, "");
        if(textInput != replacedInput)
            alert("You can only enter letters into this field.");
        document.getElementById("letter").value = replacedInput;
  }

当我在表单中仅使用 1 个输入点时，该函数有效，但是当我尝试在多个输入上使用该函数时，它只会影响表单中的第一个输入点。

在创建可由多个输入框重用的函数时，我得到了以下代码：

function validateLetter(dataEntry){
	try {
	    var textInput = dataEntry.value;
            var replacedInput = textInput.replace(/[^A-Za-z]/g);
            if (textInput != replacedInput)
                throw "You can only enter letters into this field.";
	}
	catch(InputError) {
		window.alert(InputError)
		return false;
	}
	return true;
}

我用来输入信息的表格是：

<form action="validateTheCharacters" enctype="application/x-www-form-urlencoded">
  <p>Enter your mother's maiden name:
    <input type="text" id="letter" name="letter" onkeypress="validateLetter();" />
  </p>
  <p>Enter the city you were born in:
    <input type="text" id="letter" name="letter" onkeypress="validateLetter();" />
  </p>
  <p>Enter the street you grew up on:
    <input type="text" id="letter" name="letter" onkeypress="validateLetter()">
  </p>
</form>

有谁知道翻译第一个函数最后一行的方法：document.getElementById（"letter"）.value = replacementInput;

可以与当前代码重用的内容。

我试过了：dataEntry.value = replacementInput但这似乎根本没有运行/更改功能

问题出在textInput.replace() - 您忘记了第二个参数。所以你需要的不是textInput.replace(/[^A-Za-z]/g);，而是textInput.replace(/[^A-Za-z]/g, "");.

正如MDN网站所指出的：

该 ID 在文档中必须是唯一的，并且通常用于使用 getElementById 检索元素。

在上面的示例中，您在所有输入字段上对 ID 属性使用相同的值。此外，name 属性在表单中应该是唯一的。这里提供的答案更深入地解释了。话虽如此，在下面的示例中，我已经修改了有关上述内容的输入字段。

首先，您提供的初始功能非常接近。它的一个问题是 replace（） 方法需要第二个参数。此参数可以是要为每个匹配项调用的字符串或函数。在您的情况下，我相信您只需要一个空字符串：

function validateLetter() {
    var textInput = document.getElementById("letter").value;
    var replacedInput = textInput.replace(/[^A-Za-z]/g, "");
    if(textInput != replacedInput)
        alert("You can only enter letters into this field.");
    document.getElementById("letter").value = replacedInput;
}

其次，您可以使用关键字 this 引用正在调用 validateLetter（） 的当前输入字段作为参数传递给函数。

onkeypress="validateLetter(this);"

附带说明：使用 onkeyup 而不是 onkeypress 可能会获得更好的用户体验。下面的示例改用此事件，以便您可以自己进行比较和判断。

以下是所有内容放在一个工作示例中：

function validateLetter(target) {
    var textInput = target.value;
    var replacedInput = textInput.replace(/[^A-Za-z]/g, "");
    if(textInput != replacedInput)
        alert("You can only enter letters into this field.");
    target.value = replacedInput;
}
<form action="validateTheCharacters" enctype="application/x-www-form-urlencoded">
  <p>Enter your mother's maiden name:
    <input type="text" id="maiden" name="maiden" onkeyup="validateLetter(this);" />
  </p>
  <p>Enter the city you were born in:
    <input type="text" id="city" name="city" onkeyup="validateLetter(this);" />
  </p>
  <p>Enter the street you grew up on:
    <input type="text" id="street" name="street" onkeyup="validateLetter(this)">
  </p>
</form>

相关文章：