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

您需要在单击按钮后获取值。如果将其放在click事件之外，则该值将永远不会更新。

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

您需要在click函数回调中检索输入字段的值：

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>

检查输入字段是否为空

3 个答案: