我如何为 html 添加特定的电子邮件验证

Question

我想知道如何在 html 中只允许 @gmail.com 和 @yahoo.com 进行我的电子邮件验证。我知道

Answer 1

唯一的方法是 RegExp

如果您使用框架 (angular/react/vue)，他们有自己的（兼容的第三方）库来处理表单验证。
如果您使用的是纯 JS，您可以在输入中添加 onchange 事件并使用所需的正则表达式测试输入，或者在提交表单之前测试输入。

您将需要正则表达式

/^[a-z][a-z0-9_.]*@(gmail|yahoo).com$/gm

更多关于 Javascript 的正则表达式：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Answer 2

好的，这不是实现此目的的最佳方法，最好的方法是在后端使用它，并使用 PHP 电子邮件验证过滤器。

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/css/master.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
</script>
</head>
<body>
<form id="emailForm" action="" method="post">
<label for="email">E-mail</label><br>
<input id="email" type="email" name="email" placeholder="Please enter your 
email" value="">
<button onclick="validate();" type="button" name="button">Submit</button>
</form>
</body>
</html>

内联javascript，以后可以携带，留着html下测试用

<script type="text/javascript">
function validate(){
var email = $('#email').val();

if (email.length == 0) {
  window.alert("you didn't enter an email");
}

if (!email.includes('@')) {
  window.alert("you mail is unvalid");
}

var emailHost = email.substr((-1)*(email.length - email.indexOf('@') - 1));

var allowedDomains = ["gmail.com","hotmail.com","yahoo.com"];

var inAllowed = false;
for(i=0;i<allowedDomains.length;i++){
  if (allowedDomains[i] == emailHost) {
    inAllowed = true;
  }
}

if (!inAllowed) {
  window.alert("your e-mail hosting not supported");
}else { //submit form here
  window.alert("success");
  $('#emailForm').submit();
}

}
</script>

如果使用 php

，后端会从 $_POST 接收电子邮件

<?php

var_dump($_POST);

?>

我如何为 html 添加特定的电子邮件验证

How can i add specific email validation for html

html

validation