如何使用JavaScript将文本输入表单限制为特定值范围?

时间:2014-06-24 01:45:33

标签: javascript jquery forms validation

所以我要做的就是使输入字段不能低于某个值。

我的输入字段是正常的:

<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;然后我想要它说不,那不会起作用。我听说过&#34;听一个模糊事件&#34;但我真的不知道这意味着什么。无论如何有人可以帮我这个。如何输入该输入以查看输入的文本是否验证了我创建的功能。

5 个答案:

答案 0 :(得分:0)

解决方案#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

答案 1 :(得分:0)

这是一个有效的Fiddle

使用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;

});

答案 2 :(得分:0)

此代码只会将字段的值限制在允许的范围内,如果值大于或小于此值,则将值保持为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.' );
    } 
} );

答案 3 :(得分:0)

我认为您正在寻找的是一种在用户取消选择<input>后检查的方法。理想的事件处理程序是blur。您还可以使用其中一个按键事件处理程序(keypresskeyupkeydown)。如果你想在每次输入更改时运行一个函数(也就是在用户输入时),这将是很好的。

fiddle

我为你做了一个简短的演示:

<强> 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;
}

一般的想法是,在keypressblur上,验证输入(通过某些功能运行它 - 在这种情况下,我已检查它是否在给定的范围)然后通知用户。如果您想告诉人们40,000无法正常工作,请编写一个适合您需求的函数,并在用户输入输入后运行。如果这是一个表单,请确保在发送之前验证它(以及在服务器上)。否则,你应该没事。


如果要在单击按钮时调用函数来检查input#checkme,可以执行以下操作:

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

    // run it through whatever function you want
})

您似乎是jQuery和JavaScript的新手。我真的建议你阅读jQuery API - 它比你想象的更有帮助。我建议从selectors开始,因为那样你似乎遇到了麻烦。当然,您可以查看大量其他指南,例如Crockford's。有些人似乎讨厌他,有些人则爱他。我不知道。还有很多其他资源,你只需要四处搜索。

答案 4 :(得分:0)

试试这个..

<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();"来返回true或false。

我希望这会对你有所帮助