javascript - jQuery検証、数値のみ

Question

フォームの入力値を検証しようとしています。以下の関数は、入力の値が150未満の数値であると述べ、エラーを表示します。正常に動作します。しかし、私はそれに追加したいと思います。値に数値以外のものが含まれている場合、および/または値が150未満の場合は、エラーを表示します...

どうすれば変更できますか？

if ($('.billboard-height').val() < 150) {
    $('.sb-billboardalert').fadeIn(600);
}

score 2 · Accepted Answer

とにかく、より徹底的な検証はサーバー側で行う必要があるため、期待する値の種類に応じてparseIntまたはparseFloatを使用できます。次に、結果が実際に数値であるかどうか、および制約も満たしているかどうかを確認します。

var number = parseFloat($('.billboard-height').val()); // or parseInt depending on expected input
if (isNaN(number) || number < 150) {
    $('.sb-billboardalert').fadeIn(600);
}

編集：

あなたのコメントに基づいて、あなたは正規表現の土地に入っています。私はあなたが自然数だけを望んでいると思います (そして parseInt/parseFloat が px や em などの末尾の非数値文字を無視する方法は問題ありません)。どうですか：

var val = $('.billboard-height').val();
var number = parseInt(val, 10);
if ( ! val.match(/^[0-9]{3,4}$/) || number < 150) {
    $('.sb-billboardalert').fadeIn(600);
}

これは 150 から 9999 までの自然数のみを許可する必要があります。

score 2 · Accepted Answer

正規表現を使用することをお勧めします：

var intRegex = /^\d+$/;
var floatRegex = /^((\d+(\.\d *)?)|((\d*\.)?\d+))$/;

var str = $('#myTextBox').val();
if(intRegex.test(str) || floatRegex.test(str)) {
   alert('I am a number');
   ...
}

または、@Platinum Azure の提案に従って単一の正規表現を使用します。

var numberRegex = /^[+-]?\d+(\.\d+)?([eE][+-]?\d+)?$/;
var str = $('#myTextBox').val();
if(numberRegex.test(str)) {
   alert('I am a number');
   ...
}

ref：入力された数値がjqueryの数字かどうかを確認する

score 1 · Accepted Answer

parseInt() の基数パラメーターを忘れないでください。

if (parseInt($('.billboard-height').val(), 10) < 150) {

おそらく正規表現を使用するよりも高速です。正規表現は高速であるとは言えませんが、非常に強力です。このシナリオではやり過ぎかもしれません。

score 0 · Accepted Answer

HTML5の組み込みフォーム検証を試すことができます：

<input type="number" min="150">

ブラウザのサポートはまだかなり不安定ですが

score 0 · Accepted Answer

私はこのソリューションを使用していますが、非常にエレガントだと思います-アラートはなく、ユーザーは事実上、数字以外の文字を入力できません。

これは jQuery の例です:

function digitsOnly(){
    // extract only numbers from input    
    var num_val = $('#only_numbers').val().match(/\d+/);
         $('#only_numbers').val(num_val);
    }

あなたのhtml:

<input type="text" name="only_numbers" id="only_numbers" on oninput="digitsOnly();"/>

score 0 · Accepted Answer

浮動小数点数をサポートする必要がある場合は、次を使用して変数が有効かどうかを確認できます。

function isNumber (n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

var val = $('.billboard-height').val();
if (isNumber(val) && parseFloat(val) < 150) {
    $('.sb-billboardalert').fadeIn(600);
}

整数のみをサポートする必要がある場合は、を使用しますparseInt(n, 10)。ここで、10 は文字列を変換する基数です。

var val = parseInt($('.billboard-height').val(), 10);
if (val && val < 150) {
    $('.sb-billboardalert').fadeIn(600);
}

score 0 · Accepted Answer

入力または選択からの値は、javascript の文字列になります。またはなどparseInt()の演算子を使用するには、を使用する必要があります。次のような文字列と比較するために使用する場合に使用できます><==if ($('.billboard-height').val() == "150")

score 0 · Accepted Answer

parseInt関数とisNaN関数を試して、値が数値でより小さいかどうかを確認し150ます。

var intVal = parseInt($('.billboard-height').val());
if(!isNaN(intVal)){ //not Number
    if (parseInt($('.billboard-height').val()) < 150) { //not less than 150
        $('.sb-billboardalert').fadeIn(600);
    }
}

score 0 · Accepted Answer

// Displays an alert if s contains a non-numeric character.

function alertForNonNumeric(s) {
    var rgx = /[^0-9]/;
    if (s.search(rgx) !== -1) {
        alert("Input contains non-numeric characters!");
    }
}

JSフィドルはこちら

注: 負の整数も確認する場合は、正規表現にマイナス記号を追加できます。

function alertForNonNumeric(s) {
    var rgx = /[^0-9-]/;
    if (s.search(rgx) !== -1) {
        alert(s + " contains non-numeric characters!");
    }
}

javascript - jQuery検証、数値のみ

9 に答える 9

Related

Reference