Question

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

案例1：选中复选框后，用户只能输入0到100之间的数字（包括小数。允许34.35）

案例2：正常数字验证

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

这是我的代码。

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验证，即（输入类型=＆＃34;数字＆＃34;最小值和最大值）。

Answer 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/

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

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

1 个答案: