我正在尝试使用javascript进行表单验证，但电子邮件验证不起作用

Question

我正在尝试进行表单验证。当我运行代码时，除了电子邮件验证之外，其他所有功能都可以正常运行。即使我没有输入有效的电子邮件，它也接受该表格。这是一个屏幕截图：

除了用户验证通过或不通过的电子邮件，其他所有功能都像用户名，密码一样正常。

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');


// To display error
function showError(input, message) {
  const formControl = input.parentElement;
  formControl.className = 'form-control error';
  const small = formControl.querySelector('small');
  small.innerText = message;
}
// At success 
function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}


// Check requirement not left blank
function checkRequired(inputArr) {
  inputArr.forEach(function(input) {
    if (input.value.trim() === '') {


      showError(input, `$ {getFieldName(input)}is required.`);
    } else {
      showSuccess(input);
    }
  });
}
// Check email validations
function checkEmail(input) {
  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,}))$/;
  if (re.test(input.value.trim())) {
    showSuccess(input);
  } else {
    showError(input, 'Email is not valid');
  }
}

// Check lengths
function checklength(input, min, max) {
  //const inputMessage= capitalizeFirstLetter(input.id);
  if (input.value.length < min) {

    showError(input, `$ {getFieldName(input)} must be at least $ {min}lengths `)
  } else if (input.value.length > max) {
    showError(input, `$ {getFieldName(input)} cannot exceed more than $ {max}lengths `);
  } else {
    showSuccess(input);
  }
}

function passwordMatch(input1, input2) {
  if (input1.value !== input2.value) {
    showError(input2, `Password doesnot match `);
  } else {
    showSuccess();
  }
}



function getFieldName(input) {
  return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}

// Event Listener
form.addEventListener('submit', function(e) {
  e.preventDefault();
  checkRequired([username, email, password, password2]);
  checklength(username, 5, 20);
  checklength(password, 8, 16);
  passwordMatch(password, password2);
  checkEmail(email);
});

.form-control.success input {
  border-color: var(--success-color);
}

.form-control.error input {
  border-color: var(--error-color);
}

.form-control small {
  color: var(--error-color);
  position: absolute;
  bottom: 0;
  left: 0;
  visibility: hidden;
}

.form-control.error small {
  visibility: visible;
}

<form id="form">
  <div class=" form-control ">
    <label for="username ">Username</label>
    <input type="text " id="username " placeholder="Enter username " />
    <small>Error message</small>
  </div>
  <div class="form-control ">
    <label for="email ">Email</label>
    <input type="text " id="email " placeholder="Enter email " />
    <small>Error message</small>
  </div>
  <div class="form-control ">
    <label for="password ">Password</label>
    <input type="password " id="password " placeholder="Enter password " />
    <small>Error message</small>
  </div>
  <div class="form-control ">
    <label for="password2 ">Confirm Password</label>
    <input type="password " id="password2 " placeholder="Enter password again " />
    <small>Error message</small>
  </div>
  <button type="submit ">Submit</button>
</form>
</div>

我正在尝试使用javascript进行表单验证，但电子邮件验证不起作用

根据您的代码段