如何使用JavaScript將文本輸入形式限制為一定范圍的值？

Question

所以我要嘗試做的是使輸入字段不能低於某個值。

我的輸入字段是正常的：

<input id="something">

我的JavaScript是：

(function () {
    int statesMin = 50000;
    int statesMax = 500000;
    var val = $('#something').val();
    var int = parseInt(((val * 100)/100), 10); //This is to change my text into an integer
    if(val < statesMin) {
    return false;
    }
    if(val > statesMax) {
    return false;
    }

    return true;
})();

我正在使用jQuery Validation插件，如果有幫助的話。 我真正想要的是輸入是否為40,000？ 然后我要說不，那是行不通的。 我聽說過“偵聽模糊事件”，但我真的不知道這意味着什么。 無論如何，有人可以幫助我嗎？ 如何進行輸入檢查，以查看輸入的文本是否驗證我創建的功能。

Answer 1

解決方案1：

minlength="50000"
maxlength="500000"

<input id="Check" type="checkbox"/>
<input id="something" type="text"/>

解決方案2 ：（警告）

$('#something').focusout(function(){
    var Min = 5;
    var Max = 50; 
    var value = $('#something').val();
    if(val < Min) {
        alert("Try Again");
        return false;
    }
    else if(val > Max) {
        alert("Try Again");
        return false;
    }
    else{
        return true;
    }
});

JSFiddle：

http://jsfiddle.net/E726S/6

Answer 2

這是一個工作的小提琴

使用blur以便在輸入框失去焦點時觸發

  $('#something').on('blur',function(){
    var statesMin = 50000;
    var statesMax = 500000; 
    var val = $('#something').val();
    if(val < statesMin) {
    alert("Wont work");
        return false;
    }
    if(val > statesMax) {
       alert("Wont work");
        return false;
    }

    return true;

});

Answer 3

該代碼將簡單地將字段的值限制在允許的范圍內，如果該值大於或小於該值，則將其保持在min和max上。

var $field = $( '#something' ),
    min = 10, 
    max = 100;
$field
    .on( 'keyup', function ( e ) {
        if ( parseInt( $field.val() ) < min ) {
            $field.val( min );
        } else if ( parseInt( $field.val() ) > max ) {
            $field.val( max );
        } 
    } );

---

如果要將其用作驗證功能：

$( 'form' ).on( 'submit', function ( e ) {
    if ( parseInt( $field.val() ) < min ) {
        alert( 'Number too low.' );
    } else if ( parseInt( $field.val() ) > max ) {
        alert( 'Number too high.' );
    } 
} );

Answer 4

我認為您正在尋找的是一種在用戶取消選擇<input>之后對其進行檢查的方法。 理想的事件處理程序將是blur 。 您還可以使用按鍵事件處理程序之一（ keypress ， keyup和keydown ）。 如果您想在每次輸入更改時（也就是在用戶鍵入內容時）運行一個函數，則這些方法會很好。

小提琴

我為您做了一個簡短的演示：

的HTML

<input id="checkme">
<p id="results"></p>

的JavaScript

$("#checkme").blur(function () {
    var value = parseInt($(this).val().replace(/[^\d]+/g, "")),
        // this grabs only the numbers from the input
        // by parsing for integers of
        // $(this).val() ---> this grabs the value of the input#checkme
        // .replace(/[^\d]+/g, "") is a regular expression
        // that replaces all characters that are not digits (0-9) with "", or nothing
        // this is, of course, all wrapped in the parseInt call, so that
        // value is always a number
        min = 20,    // I made up some min/max values
        max = 100;
    if (value < min || value > max) {
        // the input doesn't match what you want
        $("#results").text("That number is no bueno!");
        $("#checkme").removeClass("bueno").addClass("nobueno");
    } else {
        // the input does match what you want
        $("#results").text("bueno!");
        $("#checkme").removeClass("nobueno").addClass("bueno");
    }
})

的CSS

.bueno {
    border: solid 1px green;
}
.nobueno {
    border: solid 1px red;
}

一般的想法是，無論是keypress還是blur ，都要驗證輸入（通過某些功能運行-在這種情況下，我已經檢查了輸入是否在給定范圍內），然后通知用戶。 如果要告訴人們40,000不起作用，請編寫適合您需要的函數，並在用戶輸入輸入后運行它。 如果這是一種形式，請確保在發送出去之前（也在服務器上）對其進行驗證。 否則，你應該沒事。

---

如果要調用單擊按鈕以檢查input#checkme的函數，可以執行以下操作：

$("#buttonID").click(function () {
    var value = $("#inputID").val();

    // run it through whatever function you want
})

看來您是jQuery和JavaScript的新手。 我真的建議閱讀jQuery API ，它比您想象的要有用。 我建議從選擇器開始，因為這似乎是您遇到的麻煩。 當然，還有很多其他指南可供參考，例如Crockford's 。 有些人似乎恨他，其他人則愛他。 我不知道。 還有大量其他資源，您只需要四處搜索。

Answer 5

試試這個

<form id="frm" action="Default.aspx" method="post">
        <input type="text" id="something" />
        <input type="submit" onclick="return validate();" value="submit" />
    </form>


function validate() {
            var ret = true;
            var statesMin = 50000;
            var statesMax = 500000;
            var val = $('#something').val();
            var int = parseInt(((val * 100) / 100), 10);
            if (val < statesMin) {
                alert('This is error');
                ret = false;
            }
            else if (val > statesMax) {
                alert('This is error');
                ret = false;
            }

            return ret;
        };

為了在提交之前進行驗證，請使用此onclick="return validate();" 返回是真還是假。

我希望這能幫到您