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

【问题标题】：How to prevent users from entering invalid characters inside an input field如何防止用户在输入字段中输入无效字符
【发布时间】：2011-09-25 01:29:16
【问题描述】：

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

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

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

想法？谢谢

【问题讨论】：

确保无论你在 Javascript 中做什么，一旦它到达服务器，你也有一些过滤！

标签： javascript jquery

【解决方案1】：

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

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

这里有一个图书馆可以为你做这件事：http://www.itgroup.com.ph/alphanumeric/

【讨论】：

只是好奇。为什么不按键？或者我们应该采取安全行动并听取 keyup.keydown 和 keypress 。
@KiranRuthR keypress 与keydown 类似，只是它仅在按住某个键时触发一次。我确定您可以使用keydown 实施解决方案。阅读 jQuery 文档了解更多信息：api.jquery.com/keypress
用户仍然可以粘贴包含禁用字符的文本。

【解决方案2】：

DEMO - JS Fiddle Link

抱歉回复晚了。虽然我的回答迟了。我对答案做了一些修改，就这样。

需要验证

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

启用字母数字字符

  <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

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;
    }
  });
});

【讨论】：

【解决方案3】：

那里有大量的 Javascript 验证库。在 Google 上快速搜索“javascript 验证”会产生 JQuery Validation plugin 插件作为第一个命中，因此这可能是一个不错的起点。

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

【讨论】：

【解决方案4】：

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

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

下面是代码。

$("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"/>

添加示例。

【讨论】：