Javascript 如何防止在表单中输入无效字符？

例如，如果我有一个表单，我不希望用户在表单中输入数字，并且我使用一个包含正则表达式的函数对其进行验证，那么如何防止用户在本例中输入的无效字符，如果正则表达式测试失败，一个数字将显示在文本表单中

这是我尝试过的函数和选择列表，换句话说，这不是整个程序。我尝试将false返回给onkeypress事件处理程序，但用户在文本框中输入的内容仍然会执行

function noNumbers(answer) {  //returns false and displays an alert if the answer contains numbers
     if (/[\d]+/.test(answer)) {    // if there are numbers
         window.alert("You can not enter numbers in this field");
         return false;
     }

}

<form action="get" enctype="application/x-www-form-urlencoded">
    <select id="questions" name="questions">
         <option value="no_numbers">What is the name of the city where you were born?</option>
         <option value="no_letters">What is your phone number?</option>
         <option value="no_numbers">What is the name of your favorite pet?</option>
         <option value="no_letters">What is your social security number?</option>
         <option value="no_numbers">What is your mother's maiden name?</option>  
    </select>
    <p><input type="text" name="answer" onkeypress="validateAnswer();" /></p>
</form>

---

向validateAnswer函数添加一个额外的参数，使您的生活更简单，如下所示：

然后您可以这样定义validateAnswer：

function validateAnswer(elem){
    elem.value = elem.value.replace(/[^\d]/g, '');
}

---

这里有一个例子：

您从传递给处理程序的事件对象中获得按下的键

input type="text" name="answer" onkeypress="validateAnswer(this, event);" />

function validateAnswer(element, event) {
  if (event.charCode) {
    if (/\d/.test(String.fromCharCode(event.charCode))) {
      window.alert("You can not enter numbers in this field");
      return false;
    }
  }
}

---

谷歌搜索onkeypress事件可以找到许多这样的例子。

这就是您要寻找的功能

function validateAnswer(src) {
    var questions = document.getElementById("questions");
    var rule = questions.options[questions.selectedIndex].value;
    if(rule=="no_numbers") src.value = src.value.replace(/\d/g, '');
    if(rule=="no_letters") src.value = src.value.replace(/\w/g, '');
}

只需将输入字段引用发送到函数，并将其设置为onkeyup事件：

<input type="text" name="answer" onkeyup="validateAnswer(this);" />

您还应该钩住selectbox的onchange事件以重置输入框的值。我建议您也考虑HTML5模式属性。看

---

犯错误正如您所说，通过在keypress事件处理程序中返回false。你试了什么？我们想看看你试过的代码，为什么？发送数据之前先验证一下，用输入限制来烦扰用户是很烦人的。这是学校作业。这也是我第一次问这个问题时没有发布代码的原因。因为班上的人可以复制它并声称它是他们自己的。但我想我必须在这里发布一些代码，让人们看看哪里出了问题。你不是在检查按键，而是在新字符添加到输入字段后检查答案。到那时，阻止它已经太晚了。我该如何检查按下的键？据我所知，我需要做一些涉及unicode的事情。我不知道如何用返回false和unicode来做这件事，这就是教科书上的说明，但我做了一些与您在这里描述的类似的事情，它是有效的。如果我只想替换所有{}[]+字符怎么办？