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>

玩这个电子邮件验证，有什么问题吗？与代码？甚至我都用适当的电子邮件地址填写了该字段，例如 myname@gmail.com 打印您输了结果而不是打印您赢了，是因为表单提交了吗？

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

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

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);
 }

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

电子邮件验证客户端

3 个答案: