2

我正在创建一个表单，其中包括薪水，我需要检查薪水的输入值是否是有效货币并且有两位小数，因为这是数据库接受的。如果薪水的输入包含字母 (az) 或符号（!@#%^&*()，$ 或其他货币符号除外），则应更改边框颜色。

例子：

  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 个需要这种验证的输入框。如何使该函数在调用时更改特定选择器的边框颜色并返回 false 如果值不是数字，例如：

isNumeric(selector);

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

谢谢！

4

9 回答 9

4

尝试直接在您的输入上使用 html5 模式：

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

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

于 2013-08-13T08:45:39.617 回答
1 
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");
   }
 }
于 2013-08-13T08:43:13.847 回答
1

我需要一些允许美国格式的条目的东西，其中可能包括,千位分隔符和可选的 2 位小数位。我想出了这个：

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

在这里测试它：https ://regex101.com/

于 2019-06-03T20:38:30.877 回答
0

如果你想使用 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})$">

见这里。

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

如果你需要保证跨浏览器的兼容性，你可以使用这样的polyfill。

于 2013-08-13T08:46:27.870 回答
0

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

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

和你的功能的一个小变化：

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

更新：

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

$('#textOne,#textTwo,#textThree').each(isNumeric);
于 2013-08-13T08:57:12.510 回答
0 
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)" />
于 2013-08-13T08:57:18.950 回答
0

如果您希望使用 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");
       }
   });
}
于 2013-08-13T08:52:05.273 回答
0

试试这个怎么样？

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" />
于 2013-08-13T09:07:10.947 回答
0

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

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

10000.
25846

它只会接受：

10000.1
25846.30
213464.12

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

于 2017-06-08T23:45:25.283 回答