允许仅键入输入的浮动百分比值

时间:2015-09-01 11:14:59

标签: javascript jquery regex validation

我按照this链接允许输入的仅类型浮点百分比值。 Here是原始的jsfiddle。

我尝试替换正则表达式并使用此/^((0|[1-9]\d?)(\.\d{1,2})?|100(\.00?)?)$/或此^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$,但它不起作用。

编辑//在我的情况下,只允许0到100之间的浮点数

jsfiddle

var pastValue, pastSelectionStart, pastSelectionEnd;

$("input").on("keydown", function() {
    pastValue          = this.value;
    pastSelectionStart = this.selectionStart;
    pastSelectionEnd   = this.selectionEnd;
}).on("input propertychange", function() {
    var regex = /^((0|[1-9]\d?)(\.\d{1,2})?|100(\.00?)?)$/;

    if (this.value.length > 0 && !regex.test(this.value)) {
        this.value          = pastValue;
        this.selectionStart = pastSelectionStart;
        this.selectionEnd   = pastSelectionEnd;
    }
});

3 个答案:

答案 0 :(得分:1)

你的问题是小数部分需要同时完全停止和数字。这很难打字;)

试试/^(100(\.0{0,2})?|(\d|[1-9]\d)(\.\d{0,2})?)$/。这将允许.没有数字。

编辑:更改为不允许100,小数点高于.00。

此致

答案 1 :(得分:0)

我使用此功能仅允许数字值或数字,最多2位小数

您需要为输入data-type="numeric"data-type="decimal"

您也可以使用HTML5的<input type="number" />

$(function() {
    // allow only numbers
    var ctrlAltShift = false;
    $(document).keydown(function(e) {
        if (e.keyCode >= 16 && e.keyCode <= 18 ) ctrlAltShift = true;
    }).keyup(function(e) {
        if (e.keyCode >= 16 && e.keyCode <= 18 ) ctrlAltShift = false;
    });
    $("[data-type=numeric]").keydown( function(e) {
        if( 
            (
                !ctrlAltShift && (
                    ( e.keyCode >= 48 && e.keyCode <= 57 ) ||
                    ( e.keyCode >= 96 && e.keyCode <= 105 ) ||
                    ( $.inArray(e.keyCode, [8, 9, 27, 35, 36, 37, 39, 46]) !== -1 )
                ) 
            ) ||
                ctrlAltShift && e.keyCode == 9 
        ) {
            return;
        }
        else {
            e.preventDefault();
        }        
    });


    // allow only numbers with 2 decimals
    $("[data-type=decimal]").keydown( function(e) {
        if(
            (
                !ctrlAltShift && (
                    ( e.keyCode >= 48 && e.keyCode <= 57 ) ||
                    ( e.keyCode >= 96 && e.keyCode <= 105 ) ||
                    ( $.inArray(e.keyCode, [8, 9, 27, 35, 36, 37, 39, 46, 110, 190, 194]) !== -1 )
                )
            ) ||
                ctrlAltShift && e.keyCode == 9 
        ) {
            if( $.inArray(e.keyCode, [110, 190, 194]) !== -1 ) {
                e.preventDefault();
                if( $(this).val().length != 0 && $(this).val().indexOf('.') == -1 ) {
                    $(this).val( $(this).val() + '.');
                }
            }
        }
        else {
            e.preventDefault();
        }
    }).keyup(function(e) {
        var value = $(this).val();

        if( value.indexOf('.') != -1) { 
            if( value.split(".")[1].length > 2 ) {
                var newValue = parseFloat( Math.floor(value * 100) / 100).toFixed(2);
                e.preventDefault();
                $(this).val( newValue );
            }
        }        
    });
});

它肯定可以针对一个功能进行优化。

<强>样本:

$(function() {
    // allow only numbers
    var ctrlAltShift = false;
    $(document).keydown(function(e) {
        if (e.keyCode >= 16 && e.keyCode <= 18 ) ctrlAltShift = true;
    }).keyup(function(e) {
        if (e.keyCode >= 16 && e.keyCode <= 18 ) ctrlAltShift = false;
    });
    $("[data-type=numeric]").keydown( function(e) {
        if( 
			(
				!ctrlAltShift && (
					( e.keyCode >= 48 && e.keyCode <= 57 ) ||
					( e.keyCode >= 96 && e.keyCode <= 105 ) ||
					( $.inArray(e.keyCode, [8, 9, 27, 35, 36, 37, 39, 46]) !== -1 )
				) 
			) ||
				ctrlAltShift && e.keyCode == 9 
        ) {
            return;
        }
        else {
            e.preventDefault();
        }        
    });


    // allow only numbers with 2 decimals
    $("[data-type=decimal]").keydown( function(e) {
        if(
			(
				!ctrlAltShift && (
					( e.keyCode >= 48 && e.keyCode <= 57 ) ||
					( e.keyCode >= 96 && e.keyCode <= 105 ) ||
					( $.inArray(e.keyCode, [8, 9, 27, 35, 36, 37, 39, 46, 110, 190, 194]) !== -1 )
				)
			) ||
				ctrlAltShift && e.keyCode == 9 
        ) {
            if( $.inArray(e.keyCode, [110, 190, 194]) !== -1 ) {
                e.preventDefault();
                if( $(this).val().length != 0 && $(this).val().indexOf('.') == -1 ) {
                    $(this).val( $(this).val() + '.');
                }
            }
        }
        else {
            e.preventDefault();
        }
    }).keyup(function(e) {
        var value = $(this).val();
        
        if( value.indexOf('.') != -1) { 
            if( value.split(".")[1].length > 2 ) {
                var newValue = parseFloat( Math.floor(value * 100) / 100).toFixed(2);
                e.preventDefault();
                $(this).val( newValue );
            }
        }        
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Numeric: <input type="text" data-type="numeric" /><br />
Decimal: <input type="text" data-type="decimal" />

答案 2 :(得分:0)

@SamWhan 的响应几乎是正确的,它不完全正确,因为它接受像 100.100.0 这样的值,要修复它,请将正则表达式更改为

/^(100|(\d|[1-9]\d)(\.\d{0,2})?)$/