如何防止用户在输入字段中输入无效字符

Question

给定一个文本输入字段。 如何防止用户输入空格以及字母数字或破折号 (-) 以外的空格。

仅限字母数字 - “字母数字字符集由数字 0 到 9 和字母 A 到 Z 组成。在 perl 编程语言中，下划线字符 (_) 也被认为是字母数字字符集的成员”

这是用于用户可以选择自定义 url 的字段。 我想防止用户输入无效字符。

想法？ 谢谢

Answer 1

您可以使用 jQuery keyup(..)方法来做到这一点。 您需要检查event.keyCode是否有效。 如果它无效，您可以使用preventDefault()阻止该事件。

请记住验证发送到服务器的数据，因为您在 javascript 中所做的任何事情都可能被破坏。

这是一个可以为您完成的库： http : //www.itgroup.com.ph/alphanumeric/

Answer 2

演示 - JS 小提琴链接

回复晚了非常抱歉。 虽然我的回答晚了。 我对答案做了一些修改，就在这里。

需要验证

1. 限制输入初始数字
2. 限制空格、特殊字符但允许退格和删除

3. 启用字母数字字符

   
   

    <input name="pac_code" id="input_8_6" type="text" value="" class="form-control medium pacerror pacvalid" data-rule-maxlength="9" data-rule-minlength="9" maxlength="9" minlength="9" placeholder="Porting authorisation code (PAC) *" data-rule-required="true" autocomplete="off" size="9"> <label for="input_8_6" style="color: #ff0000;font-weight: 300;font-size: 12px;margin-bottom: 1%;">Example: ABC123456</label><br /> <label class="PAC_error error" style="display:none;">Invalid PAC Format</label> </div>

查询

jQuery(document).ready(function() {
  $('#input_8_6').bind('keypress', function(event) {
    var regex = new RegExp("^[a-zA-Z0-9\b]+$");
    var regchar = new RegExp("^[a-zA-Z\b]+$");
    var regnum = new RegExp("^[0-9\b]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    var pacvalue = $(this).val().length;
    if (!regex.test(key)) {
      event.preventDefault();
      return false;
    } else if (pacvalue <= 2) {
      for (i = 0; i <= 2; i++) {
        if (!regchar.test(key)) {
          event.preventDefault();
          return false;
        }
      }
    } else if (pacvalue >= 3) {
      for (j = 4; j <= 9; j++) {
        if (!regnum.test(key)) {
          event.preventDefault();
          return false;
        }
      }
    } else {
      return true;
    }
  });
});

Answer 3

虽然我的回答很晚，但这可能对更多的读者/技术人员有所帮助。 谁想要实现一个文本框以接受以下条件。

• 应该接受字母表。
• 应该接受数字。
• 不应接受任何特殊字符。

下面是代码。

 $("input[name='txtExample'] ").focus(function (e) { if (!(e.which != 8 && e.which != 0 && ((e.which >= 48 && e.which <= 57) || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) ))) { event.preventDefault(); } }).keyup(function (e) { if (!(e.which != 8 && e.which != 0 && ((e.which >= 48 && e.which <= 57) || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) ))) { event.preventDefault(); } }).keypress(function (e) { if (!(e.which != 8 && e.which != 0 && ((e.which >= 48 && e.which <= 57) || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) ))) { event.preventDefault(); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="txtExample"/>

添加了示例。

Answer 4

有很多 Javascript 验证库。 在 Google 上快速搜索“javascript 验证”，首先找到了JQuery 验证插件插件，因此这可能是一个不错的起点。

正如@Chris Cooper 所说，确保您也进行服务器端验证，因为用户关闭 javascript 并避免客户端验证规则非常简单。