根据复选框条件验证输入文本字段(max和min)

validating input text field (max and min) based on checkbox condition

本文关键字：max min 字段 文本 复选框 条件 验证 输入      更新时间：2023-09-26

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

情形一:当复选框被选中时，用户只能输入0 ~ 100的数字(包括十进制)。所以34.35是允许的)

案例2:正常数值验证

然而，在Case 1中，我的代码的行为是它只允许用户输入1 nu, 1到9之间的二进制数字。

这是我的代码。

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验证即(输入类型="数字"最小和最大值)。

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

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

相关文章：