如何防止将无效字符输入到表单中?

How do I prevent invalid characters from being entered into a form?

本文关键字：表单 字符输入 何防止 无效      更新时间：2023-09-26

例如，如果我有一个表单，我不希望用户在其中输入数字，我用包含正则表达式的函数验证它，如果用户输入的无效字符(在本例中为数字)未能通过正则表达式测试，我如何防止它出现在文本表单中?

这是我尝试的函数和我尝试的选择列表(换句话说，这不是整个程序)。我尝试返回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="answerswer" onkeypress="validateAnswer();" /></p>
</form>

当您在相关字段中输入无效字符时，此验证对于动态地剥离无效字符非常有效。例子:

<form id="form1" name="form1" method="post">
  Email:
  <input type="text" name="email" id="email" onkeyup='res(this, emailaddr);' ; </form>
  <script>
    var phone = "()-+ 0123456789";
    var numb = "0123456789";
    var alpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ @-'.,";
    var alphanumb = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ @-.'1234567890!?,:;£$%&*()";
    var alphaname = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ ,-.1234567890";
    var emailaddr = "0123456789@._abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    function res(t, v) {
      var w = "";
      for (i = 0; i < t.value.length; i++) {
        x = t.value.charAt(i);
        if (v.indexOf(x, 0) != -1)
          w += x;
      }
      t.value = w;
    }
  </script>

然后您只需将javascript调用的第二个值更改为使用代码中定义的变量在字段中输入的数据类型。

这是您要查找的函数

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="answerswer" onkeyup="validateAnswer(this);" />

您还应该挂钩选择框的onchange事件来重置输入框的值。我建议你也考虑HTML5 pattern attribute。看到

  • 小提琴
    • 模式属性支持
  • 不支持浏览器的解决方案

从传递给处理程序的事件对象中获取被按下的键。

input type="text" name="answerswer" 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 event"可以找到很多这样的例子

通过向validateAnswer函数添加一个额外的参数来简化您的工作，如下所示:
<input type="text" id="answerswer" name="answerswer" onkeyup="validateAnswer(this);" />

然后你可以这样定义你的validateAnswer: 
function validateAnswer(elem){
    elem.value = elem.value.replace(/[^'d]/g, '');
}

这里有一个例子:http://jsbin.com/iwiduq/1/

相关文章：