电子邮件验证客户端答案

【问题标题】：Email validation client side电子邮件验证客户端
【发布时间】：2020-01-16 12:03:12
【问题描述】：

<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>

玩弄这个电子邮件验证，有什么问题吗与代码？即使我用正确的电子邮件地址填写了该字段，例如 myname@gmail.com 它保留打印you lost结果而不是打印you win，是不是因为表单提交？

【问题讨论】：

你可以改用<input type="email" />。
使用正则表达式的量词应该在[A-Za-z]{2,4}。而不是[A-Za-z](2,4)。试试这个修改过的正则表达式：^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$
我修好了，支架没注意，谢谢大家！
@DaviddeLavign - 您用于验证电子邮件的正则表达式模式在这部分是错误的 - [A-Za-z](2,4)

标签： javascript client-side email-validation

【解决方案1】：

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

否则您可以将您的正则表达式更改为以下一个

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

【讨论】：

【解决方案2】：

您的正则表达式的问题在于 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 类型作为输入。这可能比您可以制作的任何正则表达式更可靠。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：