JavaScript 阻止不符合参数的文本输入答案

【问题标题】：JavaScript Prevent text entry if it does not meet parametersJavaScript 阻止不符合参数的文本输入
【发布时间】：2015-01-13 21:21:37
【问题描述】：

在使用 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 = replaceInput;

可以在当前代码中重复使用的东西。

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

【问题讨论】：

既然你标记了HTML5，你考虑过<input pattern="[^A-Za-z]">吗？
您的文本输入都具有相同的id，并且您使用id获取元素，只有第一个元素通过“document.getElementById("letter")”获取，这就是为什么只有第一个文本输入可以工作。
我研究过使用但这只会阻止数据在不符合参数时被提交，我想防止无效字符根本不会被输入到盒子里

标签： javascript html

【解决方案1】：

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

【讨论】：

【解决方案2】：

如MDN website中所述：

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

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

首先，您提供的初始功能非常接近。它的一个问题是 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;
}

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

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>

【讨论】：