Как подтвердить ввод валюты

Question

Я создаю форму и включаю зарплату, мне нужно проверить, является ли входное значение для зарплаты действительной валютой и имеет два десятичных знака, потому что это то, что принимает база данных. Если ввод зарплаты имеет алфавиты (a-z) или символы (! @ #%^& *(), за исключением знака $ или другой валюты), он должен изменить цвет границы.

пример:

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 полей ввода, которые нужны такого рода проверки. Как я могу сделать эту функцию, когда называется изменение границы-цвет конкретного выбора и вернет ложь это значение не является числом что-то вроде:

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

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 2

пытаются использовать html5 шаблон непосредственно на входе:

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

он работает со всеми современными браузерами. это сделает границы красным, если шаблон является ложным

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.

Answer 4

Если вы надеетесь использовать селектор CSS вместо ИДС, я рекомендую 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; 
    ------- 
} 

Обновлено:

(Если вы не с помощью TextBox события, но событие кнопки, которые необходимо для обработки всех проверок текстового поля):

$('#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 в браузере.