在输入时validationhtml文本输入

在键入HTML文本输入时，validationHTML文本输入的最佳方法是什么？ 我所知道的所有方法都有一些缺点：

1. 使用$.keypress您只能访问输入的旧值，而不是新值。 此外，将无法检测到某些事件（如使用鼠标进行剪切/粘贴）。

2. 仅当输入失去焦点时，才使用$.change 。

3. 这个问题提出了一个解决方案，您可以使用轮询来监视属性更改。 原则上，可以validation回调中的新值，如果无效，则还原为旧值。 但是，除了要求投票之外，我不确定它是否可以免于竞争。

4. 本文建议使用浏览器特定function，如果没有可用则回退到轮询。 看起来是迄今为止最好的方法。

5. [更新]如答案所示， $.keyup可以在更新后访问该值。 但是，它不仅不适用于鼠标剪切/粘贴，而且如果按住某个键也会失败，只有在输入很多内容后才会释放。 或者，如果将keydown和keyup组合起来保存/恢复旧值，则如果用户键入太快则会中断。

以上解决方案都没有错误或非常安全的跨浏览器。 有没有更好的解决方案，既可以随时使用，也可以在制造中使用？ 似乎是一个常见的问题，我最近试图回答类似的 问题 ，没有成功，我也对答案感兴趣。

（ 对于这种做法的一个好的论据也是受欢迎的，如果实施此validation会出现新的问题;但是，这似乎在其他语言中是常​​见的，所以我怀疑这是一件坏事想要）

Answer 1

您可以使用input （FF）和propertychange （所有其他）事件来捕获所有forms的输入，包括键盘和rmb剪切粘贴。

http://jsfiddle.net/dFBzW/

 $('input').bind('input propertychange', function() { $('#output').html($(this).val()); }); 

Answer 2

在jQuery世界中，利用插件来完成这些validation任务是很常见的。 插件可以相对容易使用，并且它们的流行度通常反映出比从头开始编写的代码更少的错误。

输入validation通常分为几类，包括：

1）正确的输入格式/输入掩码。 例如，只有AZ，或者说10位数字。

2）域中的内容存在。 例如，机场代码或邮政编码。

对于（1），您可以使用这些相对流行的插件：

数字布什的Jquery蒙面输入插件 。 它有许多自定义选项，包括空格，例如：

来自Digital Bush网站：

 $("#phone").mask("[phone]"); 

来自decorplanit.com的autoNumeric 。 他们对数字，货币，四舍五入等都有很好的支持。

改编自autoNumeric网站：

 $('#amountPaid').autoNumeric({aSep: '.', aDec: ','}); // eg, 9.000,00 

对于（2） ，您可以使用jQuery UI的自动完成 ，并结合服务器资源数据，使用JSON等格式。 这些可能需要自定义代码来锁定输入，但您仍然可以利用插件来获取基本function，并专注于您正在创建的特定业务逻辑。

上面的一些文字在这里和这里的其他post中改编了两个答案。

Answer 3

对于这种做法的一个好的论据也是受欢迎的，以防如果实施这种validation会出现新的问题; 然而，这在其他语言中似乎很常见，所以我怀疑这是一件坏事。

如果通过“validation”表示“防止无效字符被输入”，我认为这是一种不好的做法。 对于那些可能没有密切关注并且可能在他们打字时甚至不看场的用户而言，这会让人感到困惑（例如，如果他们输入他们从一张纸上读取的账号或电话号码）。 实际保存/使用的值可能与他们认为输入的值略有不同。

如果通过“validation”表示“测试当前值并引起用户注意任何问题”，例如，在字段旁边显示错误或更改背景颜色，那么使用包括keyup在内的多个事件的组合就没有问题，更改，模糊，粘贴，单击：

 $("field selector").on("keyup change blur paste cut click", function() { ... }); 

这将捕获大多数正常情况，因为用户键入，对于剪贴板或拖放情况，您至少知道在最坏的情况下，当用户离开时，该字段仍将被validation。 （显然，在纠正所有错误之前，您不允许提交。）

如果您处理的keyup 和 keydown覆盖了用户按住键的情况，因为大多数浏览器都会为此发送重复的keydown事件。

Answer 4

这是代码

 function validatephone(xxxxx) { var maintainplus = ''; var numval = xxxxx.value if ( numval.charAt(0)=='+' ) { var maintainplus = ''; } curphonevar = numval.replace(/[\\A-Za-z!"£$%^&\-\)\(*+_={};:'@#~,.Š\/<>\" "\?|`¬\]\[]/g,''); xxxxx.value = maintainplus + curphonevar; var maintainplus = ''; xxxxx.focus; } 

Answer 5

只是为了防止某些字符的另一个解决方案，没有JQuery …

  ... function checkInput(e) { //only alpha-numeric characters var ok = /[A-Za-z0-9]/.test(String.fromCharCode(e.charCode)); if (!ok) e.preventDefault(); } 

我不知道这是否需要新版本的东西或仅适用于某些浏览器。 请评论。

Answer 6

你有没有尝试过oninput ？

HTML示例：

JavaScript的：

 function readvalue() { var name = $('#user_name').val(); } 

Answer 7

这也可能有所帮助

 $(".cssclass").live("input propertychange", function () { //Validate goes here }); 

Answer 8

 let that=this; $(this.element).find("input").keypress(function(e) { let character = String.fromCharCode(e.keyCode); let newValue = this.value.substring(0,this.selectionStart) + character + this.value.substring(this.selectionEnd, String(this.value).length); if (!that.isFormatValid(newValue, that.getdecimalPoints())) { e.preventDefault(); e.stopPropagation(); return false; } return true; }); $(this.element).find("input").bind({ paste: function() { let _this = this; setTimeout( function() { let decimals = that.getdecimalPoints(); if (!that.isFormatValid($(_this).val(), decimals)) { $(_this).val(''); } }, 0); } });