【问题标题】:Does regex validation work when input type="number"?输入类型=“数字”时,正则表达式验证是否有效?
【发布时间】:2014-07-03 15:35:16
【问题描述】:

在输入字段上使用 type="number" 时,regex 验证似乎不起作用。

<input type="number" step="any" min="0" max="24" value="0">

使用 step, min, max 的新基于浏览器的验证按预期工作。然而,这在浏览器中不一致吗?

http://jsfiddle.net/EkL3k/1/


问题

如何使用正则表达式验证数字字段?

如果有人有信息,我还对区分数字和文本字段的其他因素感兴趣。

注意事项

我发现检查空字符串会导致验证触发IF不满足数字字段的条件。

【问题讨论】:

  • 您始终可以通过 keyup 上的脚本调用您的验证。或者只是设置删除 type=number 并仅使用正则表达式。
  • 感谢您的提示。按键没有区别,我需要设备键盘的类型号。
  • 您可以使用element.validity.valid 来检查输入是否包含有效数字。还有一个pattern 属性,您可以在其中设置一个正则表达式来验证您的输入。最后,您可以使用 keypress 防止用户输入除数字以外的其他内容:stackoverflow.com/a/15649226/2806497
  • 顺便说一句,对这些新输入要谨慎,它们并没有在所有浏览器中完全实现(例如,Firefox 在上次更新中添加了对它的支持)。我不建议在生产环境中使用它。
  • 正是这就是为什么我使用正则表达式验证器来确保完全支持。我不能依赖浏览器内置的号码验证。

标签: javascript regex html browser input


【解决方案1】:

数字字段执行自己的验证,如果它包含非数字字符,则该值将自动删除,直到给出正确的值。您可以通过console.log(value) 看到这一点。

所以你也可以检查一个空字符串

function check(value, msg) {
  var valid = ((value != '') && /^\d*\.?\d*$/.test(value));    
  if (valid) {
      document.getElementById(msg).style.display = "none";
  } else {
      document.getElementById(msg).style.display= "inline";
  }
  return valid;
}

http://jsfiddle.net/EkL3k/6/

【讨论】:

  • 这是真的,但并非所有浏览器都能正常运行,验证不会是一致的,正则表达式验证器会阻止我也需要的数据提交。
  • 如果值超出数字字段指定的数量,检查空字符串确实会导致验证发生。
【解决方案2】:

RegEx 不起作用,因为返回的值是一个数字,而不是一个字符串。当您将返回值强制为字符串格式时,它会“按预期”工作:

var valid = /^\d*\.?\d*$/.test(String(value));

您可能想阅读How to get the raw value an <input type="number"> field?,因为它表明您没有验证type=number 输入。

【讨论】:

  • 这是真的,但并非所有浏览器都能正常运行,验证不会是一致的,正则表达式验证器会阻止我也需要的数据提交。
  • 在你的小提琴中改变了这一行之后它对我有用。 ..?
【解决方案3】:

添加此代码并在您的输入中添加一个 id。

$(document).ready(function() {
$("#txtboxToFilter").keydown(function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});
});

http://codepen.io/anon/pen/IDEGu

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-01-27
    • 2019-01-07
    • 1970-01-01
    • 2010-10-27
    • 2014-06-16
    • 1970-01-01
    相关资源
    最近更新 更多