检查输入为空（JavaScript）

Question

下午，我建立了一个简单的检查程序，以查看html页面上的输入是空还是null 。 如果该输入为空，则应更改另一个隐藏的输入的值，但是出于某种原因； 即使第一个参数为true，它也只是返回else语句。

我对Javascript的掌握不是很熟练，但是大部分时间我都能感觉到自己的方式。 再检查一下，看看是否忽略了任何语法错误，这将是非常有帮助的。

var adjVar = document.getElementById('richaccvar'); // el in question

if (adjVar && adjVar.value) { // argument check
    document.getElementsByName('adjvar')[0].value= 'Has Input!'; // true response
} else {
    document.getElementsByName('adjvar')[0].value= 'Null Input!'; // false response
};

要求的材料 （这是HTML肿的HTML）

    <script>$( document ).ready(function() {$('#pdfimage').click(function() {   $('#corexsave').val('false');   $('#corexsaveorder').val('false');  senddata(); setTimeout(function (){     window.open( '/aspire/preview?mode=edit&template=19689&dt=20065&mime=application/pdf&t=1475155102355&print=false&t=' + Math.random(), '_blank');    }, 100); });$('.saveasbutton').click(function() {var text = $('#documentname').val();if (text == '') { alert('Document name can not be blank.'); }else{$('#corexdoctitle').val(text); $('.saveorder').removeAttr('disabled'); $('.savebutton').removeAttr('disabled'); $('#corexsave').val('true');$('#corexsaveorder').val('false');senddata();$('#corexsave').val('false');$('#corexsaveorder').val('false');senddata();$('#newdocmodal').modal('hide'); };});});</script>    
    <script type="text/javascript"> function loadstuff() {// ---
var x = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida, lectus quis aliquam dapibus, neque mi elementum ipsum, ac ultricies leo ipsum ac felis. Fusce varius quam id dui eleifend, at porttitor sem commodo. Phasellus ut imperdiet diam, nec eleifend arcu. Pellentesque non ornare massa, id imperdiet nulla.<br/><br/>Phasellus sed imperdiet neque, non varius nisi. Phasellus feugiat, dolor id varius consequat, justo nisi efficitur neque, ut sagittis nunc tortor nec nunc. Ut dignissim ullamcorper sapien, sed aliquet nunc auctor ut. Nam vel ipsum vel lectus fringilla tempor ut vitae nunc.<br/><br/>Nullam in venenatis turpis. Duis id ex nunc. Proin libero lectus, cursus ac interdum ac, aliquet eu urna. Donec sed pulvinar neque. In tellus nulla, vulputate eget sollicitudin vel, placerat eu ex. Nam non sollicitudin odio. Aliquam vulputate diam ut erat rutrum, quis scelerisque risus ornare.<br/><br/><b>Exterior</b><br/>Donec eu efficitur urna. Ut vitae dictum tellus, ut luctus justo. Nam suscipit sem ut risus bibendum varius. Donec eget quam nec turpis rhoncus euismod in at justo. Aliquam lobortis quam nec nulla posuere sagittis. Pellentesque malesuada vehicula sem, nec vestibulum dui iaculis sit amet. Morbi diam ipsum, congue ut turpis vulputate, dictum sagittis orci.<br/><br/>Vestibulum rhoncus nulla vel vestibulum feugiat. Fusce lobortis molestie pretium. Sed nec metus sed tellus luctus euismod in et arcu. Integer justo tortor, mollis ut eros vel, gravida molestie urna.<br/><br/><b>Location</b><br/>Sed aliquet lorem eu dapibus faucibus. Vivamus eu nibh in tellus tristique finibus vel eget nisi. Nam ultricies, nisi sed rutrum mattis, lacus metus gravida nisi, a interdum dui libero ac ligula. Etiam nec consectetur justo. In feugiat magna ac fringilla auctor. Curabitur sit amet consequat orci. Sed feugiat nisi at metus bibendum sagittis.<br/><br/>Donec non posuere leo, hendrerit tristique eros. Nam scelerisque risus non velit cursus accumsan. Vivamus nec semper tellus, nec vulputate orci. Nam sed augue nec augue tristique ornare ac nec augue. Vestibulum volutpat pulvinar felis malesuada gravida. Phasellus egestas consectetur feugiat. Proin ac justo nunc.<br/><br/><b>Services</b><br/>Maecenas facilisis urna eget elit gravida elementum. Integer enim nisl, dictum eu eros sollicitudin, vestibulum pretium dui. Aenean leo quam, sollicitudin eget egestas vitae, commodo eu nulla. Aliquam consectetur mauris vel aliquet venenatis. Vestibulum purus felis, tempor eu quam eget, tincidunt placerat odio.<br/><br/>Pellentesque vel rutrum erat. Nulla fringilla dui eu volutpat suscipit. Mauris purus nisl, consequat ac ipsum eu, tempor bibendum lectus. Suspendisse sollicitudin turpis ligula, et lacinia felis efficitur porta. Nunc in nulla mauris. Sed feugiat mauris eget ipsum maximus, tempor semper justo facilisis. Pellentesque elementum, justo ut fermentum blandit, urna justo ultrices augue, in placerat tortor tortor at justo.<br/><br/><b>Local Authority</b><br/>Dacorum Borough Council, Civic Centre, Marlowes Hemel Hempstead, Hertfordshire HP1 1HH<br/>Tel: 01442 228000<br/><br/>Council Tax Band: F<br/><br/><b>Directions</b><br/>Sed aliquet lorem eu dapibus faucibus. Vivamus eu nibh in tellus tristique finibus vel eget nisi. Nam ultricies, nisi sed rutrum mattis, lacus metus gravida nisi, a interdum dui libero ac ligula. Etiam nec consectetur justo. In feugiat magna ac fringilla auctor. Curabitur sit amet consequat orci. Sed feugiat nisi at metus bibendum sagittis.<br/><br/>Donec non posuere leo, hendrerit tristique eros. Nam scelerisque risus non velit cursus accumsan. Vivamus nec semper tellus, nec vulputate orci. Nam sed augue nec augue tristique ornare ac nec augue. Vestibulum volutpat pulvinar felis malesuada gravida. Phasellus egestas consectetur feugiat. Proin ac justo nunc. '; 

document.getElementById('richbluvar').value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida, lectus quis aliquam dapibus, neque mi elementum ipsum, ac ultricies leo ipsum ac felis. Fusce varius quam id dui eleifend, at porttitor sem commodo. Phasellus ut imperdiet diam, nec eleifend arcu. Pellentesque non ornare massa, id imperdiet nulla. Phasellus sed imperdiet neque, non varius nisi.';
document.getElementById('richsitvar').value = 'Exampleton 1½ miles, Mainline Station (Express 30 Minutes) 1½ miles, M0 4 miles, M01 4½ miles, Exampleshire 4¾ miles.';
document.getElementById('richaccvar1').value = 'Nullam, Lectus, Quis, Aliquam, Dapibus, Neque, Mi, Elementum, Ipsum, Ac, Ultricies, Leo, Ipsum, Ac, Felis, Fusce, Varius, Quam, Id, Dui.';
document.getElementById('richaccvar2').value = 'Nullam, Venenatis, Turpis, Duis, Ex, Nunc, Proin, Libero, Lectus, Elementum, Ipsum, Ac, Ultricies, Leo, Ipsum, Ac, Felis, Fusce, Varius, Quam, Id, Dui, Eleifend, At, Porttitor, Sem, Commodo.';
document.getElementById('richaccvar3').value = 'Nullam, Venenatis, Turpis, Duis, Ex, Nunc, Proin, Libero, Lectus, Quis, Aliquam, Dapibus, Neque, Mi.';
document.getElementById('richbdyvar').value = x;

// ---
document.getElementsByName('pnvar')[0].placeholder='Example ; Poppy Mannor';
document.getElementsByName('plvar')[0].placeholder='Example ; Agloe, Hertfordshire';
document.getElementsByName('telvar')[0].placeholder='Example ; +44 (0)1234 567 890';
document.getElementsByName('faxvar')[0].placeholder='Example ; +44 (0)1234 567 890 (Optional)';
document.getElementsByName('add1')[0].placeholder='Example ; 123 Tessry Lane';
document.getElementsByName('add2')[0].placeholder='Example ; Example Ave.';
document.getElementsByName('couvar')[0].placeholder='Example ; Hertfordshire';
document.getElementsByName('ctyvar')[0].placeholder='Example ; Exampleton';
document.getElementsByName('pstvar')[0].placeholder='Example ; EX0 7LE';
document.getElementsByName('emavar')[0].placeholder='Example ; guest@argroup.co.uk';
document.getElementsByName('revvar')[0].placeholder='Example ; EEE1234/6789012 EXA/MPLE';
// ---
var adjVar = document.getElementById('richaccvar');

if (adjVar && adjVar.value) {
    document.getElementsByName('adjvar')[0].value= 'Has Input!';
} else {
    document.getElementsByName('adjvar')[0].value= 'Null Input!';
};} </script>   
    <script>function senddata() {$("#bluvar").val($('#richbluvar').code());$("#sitvar").val($('#richsitvar').code());$("#accvar").val($('#richaccvar').code());$("#accvar1").val($('#richaccvar1').code());$("#accvar2").val($('#richaccvar2').code());$("#accvar3").val($('#richaccvar3').code());$("#accvar4").val($('#richaccvar4').code());$("#accvar5").val($('#richaccvar5').code());$("#accvar6").val($('#richaccvar6').code());$("#bdyvar").val($('#richbdyvar').code());   var arrayData, objectData;    var proofurl = '/aspire/preview?mode=edit&template=19689&dt=20065&width=' + $('#coreximagewidth').val();  arrayData = $('#form').serializeArray();    $.ajax({        type: 'POST',       url: '/aspire/preview?template=19689&dt=20065&document=' + $('#corexdocumentid').val(),     data: arrayData,        contentType: 'application/json; charset=utf-8;',        dataType: 'json',       success: function(data) {           $('#previewimage').attr('src', proofurl +'&t=' + Math.random());            $('#previewimage').load(function() {                $(this).show();  if( $(this).parents('.sticky-wrapper').length === 0 ) {$(".js-sticky-image").sticky({ topSpacing:80, bottomSpacing: 80});var minHeight = $(".seq-interactive-image img").height() + 20 + 60; $('.seq-product-editor-main').css({'min-height' : minHeight });}          }).each(function(){ if(this.complete) { $(this).trigger('load');  } });             if (data != null) {                 var obj = data.responseText;                if (obj.indexOf('documentid:') === 0) {                 $('#corexdocumentid').val(obj);                 if ($('#corexsaveorder').val() == 'true') {                     $('#corexsaveorder').val(false);            window.location.replace( '/aspire/OrderSelect.jsp?sp=' + $('#corexproductid').val() + '&sp=' + $('#corexdocumentid').val() , '');           }               }else{                  $('#corexsaveorder').val(false);                }           }       },      error: function(data) {             var obj = data.responseText;            if (obj.indexOf('documentid:') === 0) {             $('#corexdocumentid').val(obj);             if ($('#corexsaveorder').val() == 'true') {                 $('#corexsaveorder').val(false);        window.location.replace( '/aspire/OrderSelect.jsp?sp=' + $('#corexproductid').val() + '&sp=' + $('#corexdocumentid').val().replace('documentid:', ''));     }           }else{              $('#previewimage').attr('src', proofurl + '&t=' + Math.random());               $('#previewimage').load(function() {                    $(this).show(); if( $(this).parents('.sticky-wrapper').length === 0 ) {$(".js-sticky-image").sticky({ topSpacing:80, bottomSpacing: 80});var minHeight = $(".seq-interactive-image img").height() + 20 + 60; $('.seq-product-editor-main').css({'min-height' : minHeight });}               }).each(function(){ if(this.complete) { $(this).trigger('load');  } });                 $('#errorlist').hide();             $('#errorlist').empty();               if (obj != null && obj != '') {                  $('#errorlist').append(obj);                    $('#errorlist').show();             }           }       }   });   if ($('#corexdoctitle').val() == '') {        $('#savebutton').hide();        $('#saveorder').hide(); }else{      $('#savebutton').show();        $('#saveorder').show(); };}$( document ).ready(function() { senddata(); });</script>

<span>

</span>

    <script type="text/javascript"> 
        loadstuff(); 
    </script>



                      <!-- end header banner -->
                </div> <!-- end page content wrapper inner -->
             </div>  <!-- end page content wrapper -->
        </span>

    <script type="text/javascript"><!--
tapestry.addOnLoad(function(e) {
dojo.require("tapestry.form");tapestry.form.registerForm("mainsearch");

tapestry.form.focusField('menu-search-field');});
// --></script></body>
</html>

Answer 1

我要检查字符串的长度：

var adjVar = document.getElementById('richaccvar').value;
if (adjVar.length >0) {
  document.getElementsByName('adjvar')[0].value= 'Has Input!'; // true response
} else {
    document.getElementsByName('adjvar')[0].value= 'Null Input!'; // false response
};

也许在之前也要减少空间

Answer 2

将if条件更改为

if (adjVar != null && adjVar.value != '')

另外，如果您将类名称为advar的HTML不是输入而是div，则应使用innerHTML而不是value来设置值

 function check() { var adjVar = document.getElementById('richaccvar'); // el in question console.log(adjVar); if (adjVar != null && adjVar.value != '') { // argument check console.log('true'); console.log() document.getElementsByClassName('adjvar')[0].innerHTML= 'Has Input!'; // true response } else { document.getElementsByClassName('adjvar')[0].innerHTML= 'Null Input!'; // false response }; } 

 <input type = "text" id="richaccvar" onBlur="check()"/> <div class="adjvar"></div> 

Answer 3

似乎您想要一个onchange事件来查看输入是否已更改。

var adjVar = document.getElementById('richaccvar'); // el in question

adjVar.onchange = function () {

    if (adjVar.value) { // argument check
        document.getElementsByName('adjvar')[0].value= 'Has Input!'; // true response
    } else {
        document.getElementsByName('adjvar')[0].value= 'Null Input!'; // false response
    };
};