2

給与を含むフォームを作成しています。給与の入力値が有効な通貨であり、データベースが受け入れるため、小数点以下 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

0

Ids の代わりに 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");
       }
   });
}
于 2013-08-13T08:52:05.273 に答える
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 に答える