检查输入值是不是为空并显示警报

Posted 2023-02-22

【中文标题】检查输入值是不是为空并显示警报

【英文标题】：Check if input value is empty and display an alert检查输入值是否为空并显示警报

【发布时间】：2013-09-20 09:12:38

【问题描述】：

如果我单击提交按钮并且输入字段的值为空，如何使用 jQuery 显示警报？

<input type="text" id="myMessage" name="shoutbox_msg" size="16" class="field_nosize" maxlength="150">&nbsp;
<input id="submit" type="submit" name="submit_post" class="button_nosize" value="Senden" onclick="sendMessage(); clearInput();">

【问题讨论】：

我想推荐***.com/questions/17971214/…

***.com/a/49923650/7186739

【参考方案1】：

$('#submit').click(function()
   if($('#myMessage').val() == '')
      alert('Input can not be left blank');
   
);

更新

如果您不想要空格，也可以使用 jQuery.trim() 删除它们

说明：删除字符串开头和结尾的空格。

$('#submit').click(function()
   if($.trim($('#myMessage').val()) == '')
      alert('Input can not be left blank');
   
);

【讨论】：

Trim 是一个原生 JS 字符串函数：developer.mozilla.org/en-US/docs/Web/javascript/Reference/…。所以$('#myMessage').val().trim() 可能更有意义。但仅限 IE 9+。

@slicedtoad 是的，我知道，但 IE 9+。

在收到警报消息后，您错过了return false;。否则，表单将在关闭警报后提交。

【参考方案2】：

这里有更好的。

$('#submit').click(function()

    if( !$('#myMessage').val() ) 
       alert('warning');
    
);

而且您不一定需要 .length 或查看它是否 >0，因为空字符串无论如何都会计算为 false，但如果您想出于可读性目的：

$('#submit').on('click',function()

    if( $('#myMessage').val().length === 0 ) 
        alert('warning');
    
);

如果您确定它将始终对文本字段元素进行操作，那么您可以使用 this.value。

$('#submit').click(function()

      if( !document.getElementById('myMessage').value ) 
          alert('warning');
      
);

另外你应该注意 $('input:text') 抓取多个元素，指定一个上下文或使用 this 关键字，如果你只想引用一个单独的元素（前提是上下文的后代/孩子中有一个文本字段)。

【参考方案3】：

如果你想在出错后专注于相同的文本，你也可以试试这个。

如果你想在段落中显示这个错误信息，那么你可以使用这个：

 $(document).ready(function () 
    $("#submit").click(function () 
        if($('#selBooks').val() === '') 
            $("#Paragraph_id").text("Please select a book and then proceed.").show();
            $('#selBooks').focus();
            return false;
        
    );
 );

【讨论】：

如果你修剪 $('#selBooks').val() 可能会很好，否则在空格刺痛的情况下不会出错

【参考方案4】：

检查空输入并使用修剪从输入中删除空格（如果用户输入空格）

$(document).ready(function()     
       $('#button').click(function()
            if($.trim($('#fname').val()) == '')
           
               $('#fname').css("border-color", "red");
               alert("Empty"); 
           
     );
);

【参考方案5】：

您可以创建一个函数来检查输入类中的每个输入，如下所示

 function validateForm() 
  
    var anyFieldIsEmpty = jQuery(".myclass").filter(function () 
        return $.trim(this.value).length === 0;
    ).length > 0

    if (anyFieldIsEmpty) 
        alert("Fill all the necessary fields");
        var empty = $(".myclass").filter(function () 
            return $.trim(this.value).length === 0;
        )
        empty.css("border", "1px solid red");
        return false;
     else 
        return true;
    

它的作用是检查“myclass”中的每个输入，如果为空，它会发出警报并为输入的边框着色，用户将识别出哪个输入未填充。

【参考方案6】：

改用这个，因为如果有多个空格，仅仅尝试检查值是否不等于空字符串将无济于事。

('#submit').onclick = function()
    let count = 0;
    let notEmpty = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
        
    for(let i=0; i < $('#myMessage').value.length; i ++)

        for(let j = 0; j < notEmpty.length ; j++)
    
                    if($('#myMessage').value[i]== notEmpty[j])
                            count += 1;
                    
            
    

    if(count==0)
    
        alert("You cannot leave this blank");