Question

使用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 但这似乎没有运行/改变功能

Answer 1

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

Answer 2

如MDN website中所述：

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

在上面的示例中，您在所有输入字段上使用相同的ID属性值。此外，名称属性在表单中应该是唯一的。提供的答案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;
}

其次，您可以通过使用关键字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>

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

2 个答案: