Question

我正在创建一个表单，其中包括工资，我需要检查工资的输入值是否是有效货币并且有两个小数位，因为这是数据库接受的。如果薪水输入有字母（a-z）或符号（！@＃％^＆amp; *（）除了$或其他货币符号），它应该改变边框颜色。

示例：

  10000.00
  25846.00
  213464.12

代码：

function isNumeric(){
   var numeric = document.getElementById("txtSalary").value;
   var regex  = /^\d+(?:\.\d{0,2})$/;
   if (regex.test(numeric)){
     $("#txtSalary").css("border-color","#FFFFFF");
   }else{
      $("#txtSalary").css("border-color","#FF0000");
   }
 }

这已经按照我的意愿运行，但问题是我还有6个输入框需要这种验证。如何在调用时更改特定选择器的border-color并返回false，该值是否为数字，如下所示：

isNumeric(selector);

function isNumeric(selector){
    var regex  = /^\d+(?:\.\d{0,2})$/;
     $(selector).filter(function() {
        return (regex.test(this.value));
     }).css("border-color","#FF0000");
    }

谢谢！

Answer 1

尝试直接在输入中使用html5模式：

<input type='text' pattern='^\d+(?:\.\d{0,2})$'/>

适用于所有现代浏览器。如果模式为假，它将使边框变为红色

Answer 2

function isNumeric(id, border){
   var numeric = document.getElementById(id);
   var regex  = /^\d+(?:\.\d{0,2})$/;
   if (regex.test(numeric)){
     $('#'+border).css("border-color","#FFFFFF");
   }else{
      $('#'+border).css("border-color","#FF0000");
   }
 }

Answer 3

如果你想使用jQuery / JavaScript，那么你可以像这样传递你的选择：

function isNumeric(sel){
  var $numeric = $(sel);
  var regex  = /^\d+(?:\.\d{0,2})$/;
  if (regex.test($numeric.val())){
    $numeric.css("border-color","#FFFFFF");
      } else {
    $numeric.css("border-color","#FF0000");
  }
}

您还可以利用HTMLInputElement的内置验证（在HTML 5的候选推荐中）：

<input type="text" pattern="^\d+(?:\.\d{0,2})$">

请参阅here。

对于样式，您可以使用:valid和:invalid伪选择器。

如果您需要保证跨浏览器兼容性，可以使用this之类的polyfill。

Answer 4

如果您希望使用css选择器而不是Ids，我建议使用jQuery来支持跨浏览器，但是在js中你可以这样做：

function isNumeric(selector){
   var elements = document.querySelector(selector);

   var regex  = /^\d+(?:\.\d{0,2})$/;
   for (var i=0, i < elements.length; i++) {

       // i added a test on the value attribute, 
       // as your original doesn't look like it should work

       if (regex.test(elements[i].getAttribute('value'))){
          $(elements[i]).css("border-color","#FFFFFF");
       }
       else{
          $(elements[i]).css("border-color","#FF0000");
       }
   }
}

或使用jQuery作为选择器的版本：

function isNumeric(selector){
   var elements = $(selector);

   var regex  = /^\d+(?:\.\d{0,2})$/;
   elements.each(function(){
       var $this = $(this);

       // i added a test on the value attribute, 
       // as your original doesn't look like it should work

       if (regex.test($this.val())){
          $this.css("border-color","#FFFFFF");
       }
       else{
          $this.css("border-color","#FF0000");
       }
   });
}

Answer 5

您正在使用jquery，因此请使用它。不是在HTML标记中添加事件，而是在jquery中添加它。像这样：

$('#textOne,#textTwo,#textThree').on('eventNameHere', isNumeric);

您的功能发生了一些小变化：

function isNumeric(){
   var numeric = this.value;
   -------
}

<强>已更新：

（如果您不使用文本框事件，但需要处理所有文本框验证的按钮事件）：

$('#textOne,#textTwo,#textThree').each(isNumeric);

Answer 6

function onlyPrice(e) {
    var unicode = e.charCode ? e.charCode : e.keyCode;
    if( unicode != 8 )
    {
        if(unicode < 9 || unicode > 9 && unicode < 46 || unicode > 57 || unicode == 47) {
            if(unicode == 37 || unicode == 38) {
                return true;
            }
            else {
                return false;
            }
        }
        else {
            return true;
        }
    }
    else
    {
        return true;
    }
}

HTML

<input type="text" name="price" onkeypress="return onlyPrice(event)" />

Answer 7

尝试这个怎么样？

<强> jQuery的：

<script type="text/javascript">
    function AssignNumeric() {
        $('.numeric').each(function (i) {
            $(this).blur(function () {
                var regex = /^\d+(?:\.\d{0,2})$/;
                if (regex.test($(this).val())) {
                    $(this).css("border-color", "#FFFFFF");
                } else {
                    $(this).css("border-color", "#FF0000");
                }
            });
        });
    }

    $(document).ready(function () {
        AssignNumeric();
    });
</script>

<强> HTML：

    <input id="Text1" type="text" class="numeric" />
    <input id="Text2" type="text" class="numeric" />
    <input id="Text3" type="text" class="numeric" />
    <input id="Text4" type="text" class="numeric" />

Answer 8

我更喜欢： <input type='text' pattern='^\d+(?:\.\d{1,2})$'/>

它迫使你在点后面至少有一个数字，所以你不会得到类似的东西：

10000.
25846

它只会接受：

10000.1
25846.30
213464.12

当然，如果有人想通过更改浏览器中的标记或javascript来绕过这一点，则需要更多的服务器端验证。

Answer 9

我需要一些允许美国格式的条目，其中可以包含,千位分隔符和可选的两位数小数位。我想到了这个：

^[1-9]\d{0,2}(?:,?\d{3})*(?:\.\d{2})?$

在此处进行测试：https://regex101.com/

如何验证货币输入

9 个答案: