使用 Vanilla JavaScript 的表单验证（多输入类型）用于空的和无效的电子邮件

Question

此代码仅适用于空电子邮件输入，不适用于无效电子邮件。我想为每个问题显示不同的错误文本。可以用 vanilla javascript 来做吗？还是我的 javascript 代码有问题？

我还没有为无效的电子邮件输入添加错误文本。请帮助。提前致谢。

const form = document.querySelector('form');
const inputs = document.querySelectorAll('input');
const inputEmail = document.querySelector('.input-email')

function validateEmail (email) {
    var re = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}
form.addEventListener('submit',(e)=>{
    e.preventDefault();
    for(let i=0;i<inputs.length;i++){
        if(!inputs[i].value){
            inputs[i].parentElement.classList.add('error');
        }else{
            inputs[i].parentElement.classList.remove('error');
            if(inputEmail){
                if(validateEmail(inputEmail.value)){
                    inputEmail.parentElement.classList.remove('error');
                }else{
                    inputEmail.parentElement.classList.remove('error');
                }
            }
        }
    }
})

form {
  background: white;
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.247);
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.infield {
  position: relative;
  margin-bottom: 1rem;
}
input {
  width: 100%;
  height: 3rem;
  border: 1px solid rgba(128, 128, 128, 0.425);
  border-radius: 0.3rem;
  padding-left: 1rem;
}
.infield.error input {
  border: 1px solid hsl(0, 100%, 74%);
}
input:active,
input:focus {
  border: 1px solid hsl(247, 40%, 68%);
  outline: none;
}
::placeholder {
  color: hsl(249, 10%, 26%);
  font-weight: 600;
}
.infield.error ::placeholder {
  color: hsl(0, 100%, 74%);
}
.error-image {
  display: none;
  position: absolute;
  top: 0.8rem;
  right: 1rem;
}
.infield.error .error-image {
  display: block;
}
.error-text {
  display: none;
  color: hsl(0, 100%, 74%);
  font-size: 0.7rem;
  font-style: italic;
  text-align: right;
  margin: 0.3rem 0;
}
.infield.error .error-text {
  display: block;
}
form button {
  width: 100%;
  height: 3rem;
  border: none;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  background: hsl(154, 59%, 51%);
  box-shadow: 0 4px 0 0 hsl(154, 51%, 48%);
  cursor: pointer;
}
form button:hover {
  opacity: 0.8;
}
#terms {
  font-size: 0.7rem;
  font-weight: 500;
  color: hsl(246, 25%, 77%);
  margin: 1rem;
  text-align: center;
}
#terms a {
  font-weight: 700;
  text-decoration: none;
  color: hsl(0, 100%, 74%);
}

 <form action="#" id="form">
        <div class="infield">
          <input type="text" placeholder="First Name">
          <img src="./images/icon-error.svg" alt="icon-error" class="error-image">
          <p class="error-text">First Name cannot be empty</p>
        </div>
        <div class="infield">
          <input type="text" placeholder="Last Name">
          <img src="./images/icon-error.svg" alt="icon-error" class="error-image">
          <p class="error-text">Last Name cannot be empty</p>
        </div>
        <div class="infield">
          <input type="text" placeholder="Email Address" class="input-email">
          <img src="./images/icon-error.svg" alt="icon-error" class="error-image">
          <p class="error-text">Looks like this is not an email</p>
        </div>
        <div class="infield">
          <input type="password" placeholder="Password">
          <img src="./images/icon-error.svg" alt="icon-error" class="error-image">
          <p class="error-text">Password cannot be empty</p>
        </div>
        <button type="submit">Claim your free trial</button>
        <p id="terms">By clicking the button, you are agreeing to our <a href="#">Terms and Services</a></p>
      </form>

Answer 1

这个问题的一个简单解决方案是让 HTML 处理这个问题，您可以将您的电子邮件输入更改为：

<input type="email" required placeholder="Email Address" class="input-email">

这将处理这两种情况并显示一条消息。

Answer 2

通过将您的电子邮件检查放在循环中，电子邮件输入后的任何输入都将覆盖更改。

将您的电子邮件检查移到循环外，并在无效时添加错误图标：

const form = document.querySelector('form');
const inputs = document.querySelectorAll('input');
const inputEmail = document.querySelector('.input-email')

function validateEmail (email) {
    var re = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}
form.addEventListener('submit',(e)=>{
    e.preventDefault();
    for(let i=0;i<inputs.length;i++){
        if(!inputs[i].value){
            inputs[i].parentElement.classList.add('error');
        }else{
            inputs[i].parentElement.classList.remove('error');
        }
    }
    if(inputEmail){
        if(validateEmail(inputEmail.value)){
            inputEmail.parentElement.classList.remove('error');
        }else{
            inputEmail.parentElement.classList.add('error');
        }
    }
})

form {
  background: white;
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.247);
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.infield {
  position: relative;
  margin-bottom: 1rem;
}
input {
  width: 100%;
  height: 3rem;
  border: 1px solid rgba(128, 128, 128, 0.425);
  border-radius: 0.3rem;
  padding-left: 1rem;
}
.infield.error input {
  border: 1px solid hsl(0, 100%, 74%);
}
input:active,
input:focus {
  border: 1px solid hsl(247, 40%, 68%);
  outline: none;
}
::placeholder {
  color: hsl(249, 10%, 26%);
  font-weight: 600;
}
.infield.error ::placeholder {
  color: hsl(0, 100%, 74%);
}
.error-image {
  display: none;
  position: absolute;
  top: 0.8rem;
  right: 1rem;
}
.infield.error .error-image {
  display: block;
}
.error-text {
  display: none;
  color: hsl(0, 100%, 74%);
  font-size: 0.7rem;
  font-style: italic;
  text-align: right;
  margin: 0.3rem 0;
}
.infield.error .error-text {
  display: block;
}
form button {
  width: 100%;
  height: 3rem;
  border: none;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  background: hsl(154, 59%, 51%);
  box-shadow: 0 4px 0 0 hsl(154, 51%, 48%);
  cursor: pointer;
}
form button:hover {
  opacity: 0.8;
}
#terms {
  font-size: 0.7rem;
  font-weight: 500;
  color: hsl(246, 25%, 77%);
  margin: 1rem;
  text-align: center;
}
#terms a {
  font-weight: 700;
  text-decoration: none;
  color: hsl(0, 100%, 74%);
}

<form action="#" id="form">
        <div class="infield">
          <input type="text" placeholder="First Name">
          <img src="./images/icon-error.svg" alt="icon-error" class="error-image">
          <p class="error-text">First Name cannot be empty</p>
        </div>
        <div class="infield">
          <input type="text" placeholder="Last Name">
          <img src="./images/icon-error.svg" alt="icon-error" class="error-image">
          <p class="error-text">Last Name cannot be empty</p>
        </div>
        <div class="infield">
          <input type="text" placeholder="Email Address" class="input-email">
          <img src="./images/icon-error.svg" alt="icon-error" class="error-image">
          <p class="error-text">Looks like this is not an email</p>
        </div>
        <div class="infield">
          <input type="password" placeholder="Password">
          <img src="./images/icon-error.svg" alt="icon-error" class="error-image">
          <p class="error-text">Password cannot be empty</p>
        </div>
        <button type="submit">Claim your free trial</button>
        <p id="terms">By clicking the button, you are agreeing to our <a href="#">Terms and Services</a></p>
      </form>

使用 Vanilla JavaScript 的表单验证（多输入类型）用于空的和无效的电子邮件

Form validation (multiple input type) with Vanilla JavaScript for empty and invalid email

html

javascript

email-validation