在输入时验证html文本输入

Question

在键入HTML文本输入时,验证HTML文本输入的最佳方法是什么？我所知道的所有方法都有一些缺点:

使用$.keypress您只能访问输入的旧值,而不是新值.此外,将无法检测到某些事件(如使用鼠标进行剪切/粘贴).
$.change仅在输入失去焦点时才使用.
这个问题提出了一个解决方案,您可以使用轮询来监视属性更改.原则上,可以在回调中验证新值,如果无效则可以恢复为旧值.然而,除了要求投票之外,我不确定它是否没有竞争条件.
本文建议使用浏览器特定功能,如果没有可用则回退到轮询.看起来是迄今为止最好的方法.
[更新]如答案中所指出的,$.keyup更新后可以访问该值.但是,它不仅不适用于鼠标剪切/粘贴,而且如果按住某个键也会失败,只有在输入很多内容后才会释放.或者,如果组合keydown并keyup保存/恢复旧值,则在用户键入太快时会中断.

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

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

Answer 1

您可以使用input(FF)和propertychange(所有其他)事件来捕获所有形式的输入,包括键盘和rmb剪切粘贴.

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

Answer 2

如果实施此验证会出现新的问题，也欢迎反对这种做法的一个很好的论点；但是，这在其他语言中似乎很常见，所以我怀疑这是一件坏事。

如果用“验证”的意思是“完全防止输入无效字符”，我认为这是一个坏习惯。对于用户而言，这可能会造成混乱，他们可能没有密切关注，甚至在键入时甚至根本没有看过该字段（例如，如果他们正在输入从纸上读取的帐户或电话号码）。实际保存/使用的值可能与他们认为输入的值略有不同。

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

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

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

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

Answer 3

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

输入验证通常分为几类,包括:

1)正确的输入格式/输入掩码.例如,只有AZ,或者说10位数字.

2)域中的内容存在.例如,机场代码或邮政编码.

对于(1),您可以使用这些相对流行的插件:

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

来自Digital Bush网站:

$("#phone").mask("(999) 999-9999");

该autoNumeric从decorplanit.com.他们对数字,货币,四舍五入等有很好的支持.

改编自autoNumeric网站:

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

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

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