2

这是我正在使用的代码：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");
}

谁能告诉我如何在我当前的代码中实现这个检查？

4

7 回答 7

1

条件可能是：

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

这是比较''空白字符串的值。它还使用 jQuerys$.trim()从值的开头和结尾删除任何空格，这样如果值只包含空格，则它不会通过检查。

小提琴

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

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");
}
于 2013-06-19T13:19:54.577 回答
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/

于 2013-06-19T13:17:38.710 回答
1

这是JsFiddle，基于你的

增加的部分是：

if ($('#current').val().length <= 0) {
    alert("Nothing to be added");
    return;        
}
于 2013-06-19T13:18:03.533 回答
1

尝试

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--;
});

演示：小提琴

于 2013-06-19T13:18:08.737 回答
1 
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--;
});
于 2013-06-19T13:18:43.797 回答
1

由于您的默认值为add，因此一个简单的检查就可以解决问题：

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

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

于 2013-06-19T13:18:47.167 回答
1

工作演示：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--;
});
于 2013-06-19T13:22:44.273 回答