时间戳

首页 > 解决方案 > JavaScript 表单验证意外工作并打印未定义

javascript - JavaScript 表单验证意外工作并打印未定义

问题描述

我正在尝试编写一个简单的 Vanilla JS 函数，该函数将检查用户是否将任何表单字段留空，如果是这种情况，则提醒用户。不幸的是，它不太有效，我不知道为什么。

表格图片

正如，你可以看到它说“未定义不能留空”。

这是JS代码：

var username= document.getElementById("UsernameInput");
var email= document.getElementById("EmailInput");
var pass= document.getElementById("PasswordInput");
var confirmPass= document.getElementById("ConfirmPasswordInput");
var form= document.querySelector(".registration-form");

// Function for checking empty input 
function checkEmpty(inputArr){
  for(i=0;i<inputArr.length;i++){
    if(inputArr[i].value.trim()==='')
      var stringified= JSON.stringify(inputArr[i]);
      alert(`${stringified} can't be left empty`);
      console.log(inputArr[i]);
      break;
  }
}

form.addEventListener("submit", function(e){
  
  if(checkEmpty([username,email,pass,confirmPass]));
    e.preventDefault();
 
 
})

那么，为什么“字符串化”变量未定义？（我使用 JSON.stringify 是因为当我不这样做时它正在返回 [object object]）。

这是表单的 HTML：

<form action="#" class="registration-form ">
      <div class="row ">
        <div class="six columns  ">
          <label for="username">Your username (has to be unique)</label>
          <input class="u-full-width" type="text" placeholder="redditStar" id="UsernameInput" name="username">
        </div>
      </div>
      
   
   <div class="row">
    <div class="six columns">
      <label for="email">Your email</label>
      <input class="u-full-width" type="email" placeholder="test@emailcom" id="EmailInput" name="email">
    </div>
   </div>

   <div class="row">
    <div class="six columns">
      <label for="password">Your password</label>
      <input class="u-full-width" type="password" placeholder="Enter a strong password" id="PasswordInput" name="password">
    </div>
   </div>

   <div class="row">
    <div class="six columns">
      <label for="confirm-password">Confirm your Password</label>
      <input class="u-full-width" type="password" placeholder="Confirm password.." id="ConfirmPasswordInput" name="passwordConfirm">
    </div>
   </div>
    
  <input class="button-primary submitRegister" type="submit" value="Submit">
</form>

标签： javascripthtmlforms

解决方案

问题是你在 for 中的 if 语句。

for(i=0;i<inputArr.length;i++){
    if(inputArr[i].value.trim()==='')
      var stringified= JSON.stringify(inputArr[i]);
      alert(`${stringified} can't be left empty`);
      console.log(inputArr[i]);
      break;
  }

当您的 if 缺少花括号时，遵循 javascript 的缩进规则，如果表达式为真，则仅运行下一行。如果为假，则跳过下一行。因此，当 if 为 false 时，它​​会跳转到alert(``${stringified} can't be left empty``);未定义的 stringified，因为它之前没有在行上定义。

推荐阅读