在输入时验证 html 文本输入

IT技术 javascript jquery validation
2021-02-16 09:11:14

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

  1. 使用$.keypress您只能访问输入的旧值,而不能访问新值。此外,某些事件(如使用鼠标剪切/粘贴)将不会被检测到。

  2. 使用$.change仅在输入失去焦点时有效。

  3. 这个问题提出了一个解决方案,您可以使用轮询来监视属性更改。原则上,可以在回调中验证新值,如果无效则返回旧值。但是,除了需要轮询之外,我不确定它是否没有竞争条件。

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

  5. [更新]正如答案中所指出的,$.keyup在更新后访问该值。但是,它不仅不适用于鼠标剪切/粘贴,而且如果您按住某个键也会失败,只有在输入很多后才能释放。或者,如果合并keydownkeyup保存/恢复旧值,如果用户输入太快,它就会中断。

上述解决方案都不是无错误的或真正安全的跨浏览器。是否有更好的解决方案,无论是现成的还是正在制定的?似乎是一个普遍的问题,我最近试图回答类似的 问题,但没有成功,我也对答案很感兴趣。

也欢迎反对这种做法的好论据,以防在实施此验证时会出现新问题;但是,这在其他语言中似乎很常见,所以我怀疑这是一件坏事)

6个回答

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

http://jsfiddle.net/dFBzW/

$('input').bind('input propertychange', function() {
    $('#output').html($(this).val());
});
我第二次阅读 (FF) FF 代表什么?
2021-04-19 09:11:14
这是迄今为止我找到的最佳答案,我基于它编写了这个示例在 FF、Chrome 和 Safari 上运行良好,在 IE6 上运行良好(有时会出现非致命的堆栈溢出,但谁在乎 IE6),但在 Opera(和 Konqueror,但我也不太关心它)上失败了。所以我要让这个问题再悬而未决……
2021-04-20 09:11:14
@mgibsonbr - 似乎对我来说在 Opera 11.61 中工作。这个例子到底做了什么?
2021-04-23 09:11:14
它试图只让用户输入有效数字,但由于这是不可能的(当用户仍在输入时,该值无效),它也接受有效前缀(如果整个文本无效,则显示红色边框)。因此,如果用户尝试添加或删除会使输入无效的字符,它会恢复为上次保存的值。否则,它将保存新值。(虽然不一定是我在真实系统中会做的事情 - 请参阅 nnnnnn 的回答)该示例在 Opera 10.63 上失败,但由于它适用于较新的版本,所以很好!
2021-05-02 09:11:14

也欢迎反对这种做法的好论据,以防在实施此验证时会出现新问题;然而,这在其他语言中似乎很常见,所以我怀疑这是一件坏事。

如果“验证”是指“完全防止输入无效字符”,我认为这是一种不好的做法。这让用户感到困惑,他们可能没有密切关注,甚至可能在打字时甚至没有看字段(例如,如果他们正在输入他们正在从一张纸上阅读的帐户或电话号码)。实际保存/使用的值可能与他们认为输入的值略有不同。

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

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

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

如果您处理的 keyupkeydown 涵盖了用户按住某个键的情况,因为大多数浏览器会为此发送重复的 keydown 事件。

这些都是好点,从现在开始做这件事之前我会三思而后行。
2021-05-04 09:11:14

在 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 的格式。这些可能需要自定义代码来锁定输入,但您仍然可以利用插件来实现基本功能,并专注于您正在创建的特定业务逻辑。

上面的一些文字改编自此处此处其他帖子中的两个答案

+1 为有用的参考。当涉及剪切粘贴时,其中一些仍然表现得很奇怪,但对于最常见的情况,它们确实比替代方案更好。
2021-05-09 09:11:14

你试过oninput吗?

HTML 示例:

<input name="username" id="user_name" oninput="readvalue();">

javascript:

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

只是为了防止某些字符的另一种解决方案,没有 JQuery ...

<input type="text" onkeypress="checkInput(event)" />

...

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

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

等等,它实际上没有:firefox 还阻止退格键、箭头键等。这|| e.charCode === 0似乎可以用 解决
2021-04-30 09:11:14