根据复选框条件验证输入文本字段（最大值和最小值）

Posted 2023-05-09

【中文标题】根据复选框条件验证输入文本字段（最大值和最小值）

【英文标题】：validating input text field (max and min) based on checkbox condition

【发布时间】：2014-09-15 20:21:02

【问题描述】：

我要做的是根据复选框以及是否选中对输入文本字段应用一些验证。

案例1：勾选复选框时，用户只能输入0到100之间的数字（包括十进制，所以允许34.35）

案例 2：正常数值验证

但是，我的代码在案例 1 中的行为是它只允许用户输入 1 到 9 之间的 1 个数字。

这是我的代码。

html 标记

elements.stakeInput = $('<input placeholder="0.00" type="text" style="float:right" />');
elements.promoMoneyCheckbox = $('<input type="checkbox" />');

JS

elements.promoMoneyCheckbox.click(function() 
        SingleDiv.prototype.validatePromoInputField(self);
    );

validatePromoInputField : function(singleDiv) 

        var self = this,
            elements = singleDiv.getElements(),
            promoMoneyCheckbox = elements.promoMoneyCheckbox;

        if (promoMoneyCheckbox.is(':checked')) 

            elements.stakeInput.attr("placeholder", "10.00");
            elements.stakeInput.keypress(function(event) 
                var num = parseInt(self.value, 10),
                    min = 0,
                    max = 100;

                if (isNaN(num)) 
                    this.value = "";
                    return;
                

                this.value = Math.max(num, min);
                this.value = Math.min(num, max);
            )
        
        else 
            elements.stakeInput.attr("placeholder", "00.00");
            validateInputs(event, 'decimal')
        

    

function validateInputs(event, typeOfInput) 

    event = event || window.event;
    if (event.ctrlKey || event.altKey || event.metaKey) return;

    var regex;
    switch (typeOfInput) 
        case 'decimal':
            regex = /^[.0-9]$/;
            break;
        case 'minAndMax':
            regex = // May be I could add a regex over here instead of the validating in validatePromoInputField fucntion
            break;
        default:
            regex = /^.$/;
            break;
    

    var char = getKeypressChar(event);
    if (char == null || regex.test(char)) return;

    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

有什么简单的方法可以实现吗？

我不是在寻找 HTML5 验证，即（输入类型=“数字”最小值和最大值）。

【参考方案1】：

使用 jquery .change() 事件检测输入的变化，使用parseInt 验证输入。

$("#in").change(function(e) 
    var val = parseInt($(this).val());
    if (!isNaN(val)) 
        if (val >= 0 && val < 100) 
            $("#out").html("good!");
            return;
        
    
    $("#out").html("bad!");
);

http://jsfiddle.net/VxM4h/1/

请记住，客户端更改是可以更改的。确保在服务器端也验证您的输入。

【讨论】：

如果可以说...，我将如何确保用户无法在文本字段中输入任何数字...10

只需在第二个 if 子句中添加另一个条件检查：if ((val >=0 && val < 100) && val != 10)。 parseInt 也会自动从输入中去除字母和符号，例如“Asdf1”变成“1”

我刚刚意识到我没有正确检查我的评论。在您的示例中，用户可以输入任何数字，包括字母。我需要的是限制用户只能输入大于 10 的数字。否则不应允许用户在输入字段中输入任何其他内容。