無効なユーザー入力を防ぐためのRegExpによる数値検証

Question

入力フィールドを検証し、条件に一致しないものを入力できないようにするJavaScript関数があります。この機能はevent.keyCodeに基づいています。私は正規表現を使用するために機能を変更しようとして検証してい

ない「文字ごと」ではなく「全体入力あたり」それは同じないことが、さまざまな条件を持つので：

1. 数値のみ
2. 10進数を許可しました。 "または「」

はここevent.keyCodeを使用して、現在の形での関数である：あなたが望む検証の種類を行うために

function isNumeric(evt, alertDIVid, alertMsg) { 
    var charCode = (evt.which) ? evt.which : event.keyCode 
    if (charCode >= 48 && charCode <= 57) { 
     document.getElementById(alertDIVid).innerHTML = ''; 
     return true; 
    } 
    else { 
     document.getElementById(alertDIVid).innerHTML = alertMsg; 
     return false; 
    } 
} 

document.getElementById('AMNT').onkeypress = function(event) { 
    event = event || window.event; 
    return isNumeric(event, 'numericalert', 'Numeric values only!') 
}; 

Answer 1

は、あなたの代わりにkeyupイベントに耳を傾ける必要があります。フィールドが変更されると、このイベントが発生し、フィールドの新しい値がわかります。また、フィールドの以前の値を知る必要があるので、ユーザーが入力したものが無効であると判明した場合は、そのフィールドを「リセット」することができます。例えば

：

(function() { 
    var previousValue = document.getElementById('myInput').value; 
    var pattern = /^\d*((\.|,)\d*)?$/; 

    function validateInput(event) { 
     event = event || window.event; 
     var newValue = event.target.value || ''; 

     if (newValue.match(pattern)) { 
      // Valid input; update previousValue: 
      previousValue = newValue; 
     } else { 
      // Invalid input; reset field value: 
      event.target.value = previousValue; 
     } 
    } 

    document.getElementById('myInput').onkeyup = validateInput; 
}()); 

の作業のデモ：http://jsfiddle.net/8kUdG/

それは、これがまた、そうでない場合（5,または42.のように、空の文字列だけでなく、未完成番号を検証することは注目に値しますユーザーはの後に小数点以下を入力すると、の後に小数点記号を挿入する必要があります。

最後に、ブラウザ間で安全な解決策ではない可能性があります。純粋なJavaScriptのソリューションが必要な場合は、それを改良する必要があります（IEでは機能しない可能性があります）。

---

編集：もちろんは、エラーメッセージを示す代わりに、以前の値に入力フィールドをリセットすることも完全に可能である（updated JSFiddle）：

(function() { 
    var pattern = /^(?=.)\d*(?:[.,]\d+)?$/; 
    var error = document.getElementById('error'); 

    document.getElementById('myInput').onkeyup = function(event) { 
     event = event || window.event; 
     var newValue = event.target.value || ''; 

     if (newValue.match(pattern)) { 
      error.innerHTML = ''; 
     } else { 
      error.innerHTML = 'Not a valid number!'; 
     } 
    }; 
}()); 

私はあなたにそれを任せます alertをよりユーザーフレンドリーなものに置き換えることができます。

Answer 2

最も簡単な解決策は、あなただけの文字列引数を取るための機能を編集でき、この

// Returns true on valid, false on invalid 
function myInputFilter(input) 
{ 
    var value = input.value; 
    var regex = /^[\d\,\.]*$/; 

    if(!regex.test(value)) 
     return false; 

    return true; 
} 

ようなものになるだろうが、私はそれではなく、テキスト入力要素を受け入れる有するように選択しました。 RegExは何でも置き換えることができます。私はこの例では単純なものを作っています。許可するように

/^[+-]?(?=.)(?:\d+,)*\d*(?:\.\d+)?$/ 

：私はあなた（You can use the excellent online tool RegExr）だった場合、私はあなたが次の正規表現を使用することができます

http://jsfiddle.net/kVV77/

Answer 3

を実施し、フィルタの一例である。ここそれを

をビットを絞り込むう任意の数のコンマと1つのみのドット.は、コンマで始めることはできません。番号はオプションで+または-とすることができます。