空文本框验证jQuery

Posted 2023-05-09

【中文标题】空文本框验证jQuery

【英文标题】：Empty text box validation jQuery

【发布时间】：2014-05-05 00:03:47

【问题描述】：

我有 3 个文本字段，可以将数据添加到表中，但是，即使所有字段为空，我也可以将数据提交到表中，这种形式的验证可以与纯 jQuery 一起使用还是必须与插件？

【问题讨论】：

为什么不使用 jQuery 来作为插件使用它？

jQuery 也是。不用插件也能做到吗？

当然可以。那么，如果该值为空，你就不想执行这个案例，直接跳过它？

好的，我很快就会想出办法。

在下面查看我的答案，让我知道这是否有效。

【参考方案1】：

您可以明确地检查它们：

// at least one is empty
if ($('#myId_1').val() == '' || $('$myId_2').val() == '') 
    alert('Oops! Please fill them all!');

// all are empty
if ($('#myId_1').val() == '' && $('$myId_2').val() == '') 
    alert('Oops! Please fill at least one!');

或者，如果您希望将来支持可变数量的字段，可以使用以下方法：

var invalid = false;
$('#table tr input:text').each(function() 
    if ($(this).val() == '') 
        invalid = true;
        return false;
    
);

if (invalid)
    alert('Fill all the fields please!');

Here's a working example.

【参考方案2】：

您可以使用 jQuery 来做到这一点，而无需使用任何额外的插件。 这个脚本可以解决问题。请注意，它会遍历您的所有文本字段。我还为用户添加了视觉确认（绿色边框 == OK，红色边框 == 'not OK'）。

希望你可以使用它。

$('#yourSubmitButtonId').click(function()
    var isValid = 1;
    $('input:text').each(function()
        if($(this).val() == '')
            $(this).css('border','1px solid red');
            isValid = 0;
            
        else
            $(this).css('border','1px solid green');
            
        );

    if(isValid == 0)
        alert('Please enter content to all text fields');
        return false;
        

    //if valid then do something
    );

【参考方案3】：

“如果任何一个框是空的，我想要一个警报而不想要 要调用的函数'AddScore'"

那么，我们开始吧。您只需要找出填充输入的数量是否小于输入的总数。所以，稍微改变你的功能如下：

function AddScore() 
    var totalInputs = $('div[data-role="fieldcontain"] input:text').length;
    var nonEmptyInputs = $('div[data-role="fieldcontain"] input:text').filter(function()return $.trim($(this).val()) !== "").length;
    if (nonEmptyInputs < totalInputs) 
        alert ("You've not filled all the boxes");
        return; //stop execution
    
    //rest of the code
    var jqTableBody = $('#myTable tbody');
    ....
    ....

【讨论】：

在我的完整示例中，我有表单的副本，显然具有不同的 ID 和名称，但它们具有相同的“字段包含”，我是否需要为“字段包含”提供一个 ID表格工作？。

我将使用插件解决这个问题，从朋友的建议中我了解到插件如何让生活更轻松，无论如何谢谢。

@user3464571，是的。和 id 或 class 会很好。例如，将 更改为 然后代替 div[data-role="fieldcontain"] 使用 div.section2 @user3464571，对，任何适合您的需求。不过，您本可以为我们节省一些时间。