检查输入字段是否为空

Question

我将使用 Vanilla JavaScript 创建简单的验证表单，但我有问题，我想检查第一个 ('entername') 字段，如果用户不会在其中输入任何字母，我想控制台日志消息 ('输入姓名'），它工作正常，但是在该用户重新输入他的姓名后，如果字段在控制台中返回（'输入姓名'），我想返回（'不输入'）消息。

var userBtn = document.getElementById('checkuserinputs');
 var checkUserName = document.getElementById('user-name').value;
var checkUserSurname = document.getElementById('user-surname').value;
var checkUserPhone = document.getElementById('user-mobile').value;
 userBtn.addEventListener('click', function(){
   if(checkUserName.length == 0){
     console.log('enter name')
   }else{
     console.log('not enter')
   }
 })

 <div class="container-fluid">
        <div class="modal-costum-row">
        <div class="enter-name-side">
        <div class="input-row">
        <input class="costum--input" type="text" id="user-name" name="user-nm" placeholder="entername">
        </div>
        </div>
        <div class="enter-surname-side">
        <div class="input-row">
        <input class="costum--input" type="text" id="user-surname" name="surname" placeholder="entersurname">
        </div>
        </div>
        </div>
        <div class="enter-tel-numb-side">
        <div class="input-row input--wide">
        <input class="costum--input" type="tel" id="user-mobile" name="user-mobile" placeholder="enterphonenumber">
        </div>
        </div>
        </div>
        
        <button id="checkuserinputs">check input</button>

Answer 1

点击按钮后需要获取值。如果你把它放在点击事件之外，这个值永远不会被更新。

var userBtn = document.getElementById('checkuserinputs');

userBtn.addEventListener('click', function () {
    var checkUserName = document.getElementById('user-name').value;
    var checkUserSurname = document.getElementById('user-surname').value;
    var checkUserPhone = document.getElementById('user-mobile').value;
    
    if (checkUserName.length == 0) {
        console.log('enter name')
    } else {
        console.log('not enter')
    }
})

<div class="container-fluid">
    <div class="modal-costum-row">
        <div class="enter-name-side">
            <div class="input-row">
                <input class="costum--input" type="text" id="user-name" name="user-nm" placeholder="entername" />
            </div>
        </div>
        <div class="enter-surname-side">
            <div class="input-row">
                <input class="costum--input" type="text" id="user-surname" name="surname" placeholder="entersurname" />
            </div>
        </div>
    </div>
    <div class="enter-tel-numb-side">
        <div class="input-row input--wide">
            <input class="costum--input" type="tel" id="user-mobile" name="user-mobile" placeholder="enterphonenumber" />
        </div>
    </div>
</div>

<button id="checkuserinputs">check input</button>

Answer 2

需要在点击函数回调中取回输入字段的值：

userBtn.addEventListener('click', () => {
const checkUserName = document.getElementById('user-name').value;
if(checkUserName.length === 0){
  console.log('enter name')
} else {
  console.log('not enter')
}
})

Answer 3

将变量获取值改为按钮点击功能，即，

 var userBtn = document.getElementById('checkuserinputs');
 userBtn.addEventListener('click', function(){

  var checkUserName = document.getElementById('user-name').value;
  var checkUserSurname = document.getElementById('user-surname').value;
  var checkUserPhone = document.getElementById('user-mobile').value;
   if(!checkUserName){
     console.log('enter name')
   }else{
     console.log('not enter')
   }
 })

 var userBtn = document.getElementById('checkuserinputs');
 userBtn.addEventListener('click', function(){

  var checkUserName = document.getElementById('user-name').value;
  var checkUserSurname = document.getElementById('user-surname').value;
  var checkUserPhone = document.getElementById('user-mobile').value;
   if(!checkUserName){
     console.log('enter name')
   }else{
     console.log('not enter')
   }
 })

<div class="container-fluid">
        <div class="modal-costum-row">
        <div class="enter-name-side">
        <div class="input-row">
        <input class="costum--input" type="text" id="user-name" name="user-nm" placeholder="entername">
        </div>
        </div>
        <div class="enter-surname-side">
        <div class="input-row">
        <input class="costum--input" type="text" id="user-surname" name="surname" placeholder="entersurname">
        </div>
        </div>
        </div>
        <div class="enter-tel-numb-side">
        <div class="input-row input--wide">
        <input class="costum--input" type="tel" id="user-mobile" name="user-mobile" placeholder="enterphonenumber">
        </div>
        </div>
        </div>
        
        <button id="checkuserinputs">check input</button>