Question

我有这个脚本，当我第一次点击文本框时触发它：

var day = parseInt($("#day_birthdate").val(), 10);
    jQuery('input#day_birthdate').bind('input propertychange', function () {
        if (day >= 1 || day <=31) {
            jQuery(this).css({ 'background': 'green' });


        } else {
            jQuery(this).css({ 'background': 'red' });

        }
    });

我有这个文本框：

@Html.TextBoxFor(m => m.Register.Day, new { id = "day_birthdate", @class = "form-control", mask = "99", @placeholder = "dd" })

当我点击文本框时它的触发但是第一次的值是NaN及其红色但是当我把一些数字不再触发时...所以我需要以某种方式改变它，所以当用户键入1到31之间的数字时得到绿色文本框。有什么帮助？

Answer 1

jQuery('input#day_birthdate').bind('input propertychange', function () {
    var day = parseInt($("#day_birthdate").val(), 10); //Getting the value after change

    if (day >= 1 && day <= 31) { // Changed || to && because both must be true
        jQuery(this).css({
            'background': 'green'
        });        
    } else {
        jQuery(this).css({
            'background': 'red'
        });    
    }
});

Fiddle

Answer 2

您必须将day分配移至事件正文，因为此代码：

var day = parseInt($("#day_birthdate").val(), 10);
jQuery('input#day_birthdate').bind('input propertychange', function () {
    if (day >= 1 || day <=31) {

在页面加载时获取值，并且仅在键入字段时比较值。将var day = ...移至事件正文：

jQuery('#day_birthdate').bind('input propertychange', function () {
    var day = parseInt($("#day_birthdate").val(), 10);

    if (day >= 1 || day <=31) {

Answer 3

你应该在事件中获得输入值。

var day = ''; 
jQuery('input#day_birthdate').bind('input propertychange', function () {
    day = parseInt($("#day_birthdate").val(), 10);
    if (day >= 1 || day <=31) {
        jQuery(this).css({ 'background': 'green' });
    } else {
        jQuery(this).css({ 'background': 'red' });

    }
});

Jquery验证不会触发日期字段？

3 个答案: