javascript - JavaScript 表单验证错误：从不显示无效的电子邮件错误消息

Question

我正在研究 JavaScript 中的表单验证器类。

首先，我检查（确保）所有必填字段都已填写。如果是，我验证电子邮件格式：

class FormValidator {
  constructor() {
    this.hasErrors = false;
    this.emptyRequired = [];
    this.errorMsg = "";
        this.formToValidate = document.querySelector("form");
    this.submitButton = this.formToValidate.querySelector("input[type=submit]");
    }
  
  appendErrorMessage(){
    const errorEl = `<span class="error-message">${this.errorMsg}</span>`;
    this.emptyRequired.forEach((field) => {
       let parentEl = field.parentElement;
       if(this.hasErrors == true && parentEl.querySelectorAll('.error-message').length == 0) {
        field.insertAdjacentHTML('afterend', errorEl);
       }
    });
  }
  
  validateEmail() {
      this.hasErrors = false;
      const 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,}))$/;
      const emailFiled = this.formToValidate.querySelector('input[type=email]');
      if (this.emptyRequired.length == 0) {
        const action = re.test(emailFiled) ? 'remove' : 'add';
        emailFiled.classList[action]('is-invalid');
        
        this.hasErrors = re.test(emailFiled) ? false : true;
        this.errorMsg = "Please provide a valid email";
        this.appendErrorMessage();
      }
      
  }
  
  validateRequired() {
      this.hasErrors = false;
      this.emptyRequired = [];
      const requiredFields = this.formToValidate.querySelectorAll('*[required]');
      requiredFields.forEach((field) => {
        // Make sure all required fields have values
        // Before doing other validations
        if(!field.value) {
           this.hasErrors = true;
           this.emptyRequired.push(field);
           this.errorMsg = "This field is required";
           this.appendErrorMessage();
        }
        const action = field.value ? 'remove' : 'add';
        field.classList[action]('is-invalid');
    });
  }
  
  validateForm() {
    this.validateRequired();
    this.validateEmail();
    console.log(this.errorMsg);
  }
  
  submitForm(e) {
    e.preventDefault();
    this.validateForm();
  }
  
  init() {
    this.formToValidate.addEventListener('submit', e => this.submitForm(e));
  }
}

const formValidator = new FormValidator();
formValidator.init();

.form-group {
  position: relative;
}

.error-message {
    margin: 0;
    position: absolute;
    right: 5px;
    bottom: -13px;
    color: #a94442;
    font-size: 11px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="card my-3">
    <div class="card-header">Contact us</div>
    <div class="card-body">
      <form action="/" novalidate>
        <div class="form-group">
          <input type="text" name="name" class="form-control" placeholder="Your Name" value="" required />
        </div>
        <div class="form-group">
          <input type="email" name="email" class="form-control" placeholder="Your Email" value="" required />
        </div>
        <div class="form-group">
          <input type="text" name="phone" class="form-control" placeholder="Your Phone Number" value="" required />
        </div>
        <div class="form-group">
          <textarea name="message" class="form-control" placeholder="Your Message"></textarea>
        </div>
        <div class="form-group mb-0">
          <input type="submit" name="btnSubmit" class="btn btn-success btn-block" value="Send Message" />
        </div>
      </form>
    </div>
  </div>
</div>

问题

我填写了所有表单字段，包括电子邮件。我提供的电子邮件无效。

由于我无法弄清楚的原因，请提供有效电子邮件的消息永远不会附加到<div class="form-group">.

标签： javascripthtmlvalidation