电子邮件验证客户端

Question

<form action="#" method="post" id="book-list">
 <div class="form-group">
   <label for="email">Email</label>
   <input type="text" id="email" class="form-control">
 </div>
 <input type="submit" value="Add" class="btn btn-primary btn-block">
</form>

<script type="text/javascript">
 function isEmail(email){
    return /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z](2,4))$/.test(email);
    }   
 const form = document.querySelector('#book-list').addEventListener('submit',(e) =>{
    e.preventDefault();
    const inputEmail = document.querySelector('#email').value;
    if(isEmail(inputEmail) === false ){
      console.log('you lost');
      document.querySelector('#email').focus();
      return false;
    }else{
      console.log('you win');
      return true
    }

});
</script>

Playing around with this email validation, is there anything wrong with the code? even I filled the field with the proper email address like myname@gmail.com it kept printing you lost result instead of printing the you win, is it because the form submit?

Answer 1

您的正则表达式的问题在于 2 到 4 个字符的语法。

而不是 (2,4) 应该是 {2,4}

function isEmail(email){
    return /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(email);
}

isEmail('email@example.com')
// true

但是，您可能只想使用 HTML 的内置 email 类型进行输入。这可能比您可以制作的任何正则表达式都更可靠。

Answer 2

如果您想让 html5 为您进行验证，您可以使用输入 type='email'，如果字段无效，提交将不会触发。

否则，您可以将正则表达式稍微更改为以下

([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})

Answer 3

您在 isEmail 函数中的正则表达式不正确。改成这样

function isEmail(email){
 return /^([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)$/.test(email);
 }

然后当您使用有效的电子邮件提交时，您将得到正确的回复。

电子邮件验证客户端

Email validation client side

javascript

client-side

email-validation