Question

这是我正在使用的代码：http://jsfiddle.net/9sX6X/21/

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input id="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

如果在按下添加按钮时输入框中没有任何内容，我想停止添加字段，因此，例如，当用户单击添加并且框中没有任何内容时，我希望出现警报。

我认为它是这样的，但我是javascript的新手：

if { val == null
alert("Nothing to be added");
}

有人能告诉我如何在我当前的代码中实现此检查吗？

Answer 1

if ($.trim(value) != "") {
      var html = '<div class="line">' +
          '<input class="accepted" type="text" value="' + value + '" />' +
          '<input type="button" value="X" class="remove" />' +
          '</div>';

      $(html).appendTo(container);
      value_src.val('');
      currentFields++;
}
else{
     alert("no value")
}

演示---> http://jsfiddle.net/9sX6X/23/

Answer 2

这是基于你的JsFiddle

增加的部分是：

if ($('#current').val().length <= 0) {
    alert("Nothing to be added");
    return;        
}

Answer 3

尝试

var value = $.trim(value_src.val());
if(!value){
    alert('empty');
    return;
}

例如：

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = $.trim(value_src.val());
        if(!value){
            alert('empty');
            return;
        }

        var html = '<div class="line">' +
            '<input class="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
.on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

演示：Fiddle

Answer 4

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = value_src.val();
        if (value == "") {
            alert("No input");
        }
        else{
        var html = '<div class="line">' +
            '<input id="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
       }
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

Answer 5

由于您的默认值为add，因此只需进行简单检查即可：

if (this.value == "Add" || this.value == "") {
    alert("empty!");
    return false;
}

演示：http://jsfiddle.net/9sX6X/24/

Answer 6

条件可能是：

if ($.trim(value_src.val()) != '') {

这是将值与''（一个空字符串）进行比较。它还使用jQuerys $.trim()从值的开头和结尾删除任何空格，这样如果值只包含空格，那么它将不会通过检查。

Fiddle

添加到您的代码中，它看起来像：

if ($.trim(value_src.val()) != '') {
    if (currentFields < maxFields) {
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input class="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
} else {
    alert("You didn't enter anything");
}

Answer 7

工作演示：http://jsfiddle.net/9sX6X/28/

在你的第一个if语句中检查输入的长度：

if($.trim(value) != '')

将您的代码更改为：

var container = $('.copies');
    value_src = $('#current');
    maxFields = 10;
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {

        var value = value_src.val();
        if($.trim(value) != ''){
            var html = '<div class="line">' +
                '<input class="accepted" type="text" value="' + value + '" />' +
                '<input type="button" value="X" class="remove" />' +
                '</div>';

            $(html).appendTo(container);
            value_src.val('');
            currentFields++;
        }else{
            alert('Field empty!');
        }
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

按下按钮添加输入值检查

7 个答案: