Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

如果通过“验证”表示“测试当前值并引起用户注意任何问题”，例如，在字段旁边显示错误或更改背景颜色，那么使用几个组合就没有问题事件包括keyup，change，blur，paste，click：

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

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

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

Answer 3

在jQuery世界中，利用插件来完成这些验证任务是很常见的。插件可以相对容易使用，它们的受欢迎程度通常比从头开始编写的代码反映的更少。

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

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

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

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

Digital Bush's Masked Input Plugin for Jquery。它有许多自定义选项，包括空格，例如：

来自Digital Bush网站的

：

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

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

改编自autoNumeric网站：

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

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

上面的一些文字改编自其他帖子here和here中的两个答案。

Answer 4

这是代码

＆＃13;

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

＆＃13;

<input type="text" align="MIDDLE" size="30" maxlength="20" onkeyup="validatephone(this);" name="contact"/>

＆＃13;

Answer 5

只是为了防止某些字符的另一个解决方案，没有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();
}

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

Answer 6

您是否尝试过oninput？

HTML示例：

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

的javascript：

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

Answer 7

这也可能有帮助

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

Answer 8

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

<input type="text" align="MIDDLE" size="30" maxlength="20" onkeyup="validatephone(this);" name="contact"/>

Answer 9

switch ((VIEWHEIGHT == 568)?1:((VIEWHEIGHT == 667)?2:3)) {
    case 1:{
        boldFont = BFONT_16;
    }
        break;
    case 2:{
        privacyFont = LFONT_18;
        boldFont = BFONT_18;
    }
        break;
    default:{
        privacyFont = LFONT_20;
        boldFont = BFONT_20;
    }
        break;
}

Swift Version

func isPhoneDevice() -> Bool {
    return UIDevice.current.userInterfaceIdiom == .phone
}

func isDeviceiPad() -> Bool {
    return UIDevice.current.userInterfaceIdiom == .pad
}

func isPadProDevice() -> Bool {
    let SCREEN_WIDTH = Float(UIScreen.main.bounds.size.width)
    let SCREEN_HEIGHT = Float(UIScreen.main.bounds.size.height)
    let SCREEN_MAX_LENGTH: Float = fmax(SCREEN_WIDTH, SCREEN_HEIGHT)

    return UIDevice.current.userInterfaceIdiom == .pad && SCREEN_MAX_LENGTH == 1366.0
}

func isPhoneXandXSDevice() -> Bool {
    let SCREEN_WIDTH = CGFloat(UIScreen.main.bounds.size.width)
    let SCREEN_HEIGHT = CGFloat(UIScreen.main.bounds.size.height)
    let SCREEN_MAX_LENGTH: CGFloat = fmax(SCREEN_WIDTH, SCREEN_HEIGHT)

    return UIDevice.current.userInterfaceIdiom == .phone && SCREEN_MAX_LENGTH == 812.0
}

func isPhoneXSMaxandXRDevice() -> Bool {
    let SCREEN_WIDTH = CGFloat(UIScreen.main.bounds.size.width)
    let SCREEN_HEIGHT = CGFloat(UIScreen.main.bounds.size.height)
    let SCREEN_MAX_LENGTH: CGFloat = fmax(SCREEN_WIDTH, SCREEN_HEIGHT)

    return UIDevice.current.userInterfaceIdiom == .phone && SCREEN_MAX_LENGTH == 896.0
}

在输入时验证html文本输入

9 个答案: