javascript - 单个提交按钮可执行三个功能

Question

自从我上次发布感谢信以来已经有一段时间了，提前感谢您过去的所有帮助..我有一个带有提交按钮的电子邮件箱。

我想要做的是检查此电子邮件地址以确保其不为空，如果要显示消息，然后要求用户输入我要验证的有效电子邮件地址，以便它只是 hotmail 和Gmail 帐户，例如xyz@hotmail.com 和 xyz@gmail.com 没有别的..

下面的代码可以正常检查是否为空，并且在屏幕上显示警报消息，但我不知道如何操作电子邮件地址检查，如果一切正常，如何使用同一个提交按钮来提交有效的电子邮件谢谢您提交后的弹出消息..提前致谢...singhy

ps:对于我所犯的任何初学者错误提前道歉......抱歉

<?php
if(isset($_POST['email'])) {
	
$to      = 'xyz@hotmail.com';
$subject = '';
$email = $_POST['email_from'];
//$message = "LIST \r\n".
$message = "signoff list name \r\n";

   }

 $email_from = $_POST['email']; 

// create email headers
$message = wordwrap($message, 100, "\r\n");
$headers = 'From: '.$email."\r\n".
'Reply-To: '.$email."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($to, $subject, $message, $headers);
?>


<p>If you would like to receive our weekly newsletter email address below.</p>

<script type="text/javascript">
 function IsEmpty(){
  if(document.forms['isgtest'].email_from.value == "")
  {
    alert("Email field is empty, please enter email format");
    return false;
  }
  //return submit "email_from.value";
  (document.forms['test'].email_from.value == "subscribe")
  //return .email_from.value == "";
  //alert("thank u for joining the list !");
  //return true;
}
    </script>

<!--<script type="text/javascript"></script>-->
<form name="isgtest" class="rform" method="post" action="g.php"> 
<fieldset><legend>testing...</legend> 

<label for="email_from"><span style="color: #ff0000;"><strong>*</strong>
</span>Email address:<input id="email_from" type="text" name="email_from" size="25" />  <input id="insert" id="btn" onclick="return IsEmpty();" style="float: right;" type="button" name="submit" value="Subscribe" /></fieldset>
</form>

Answer 1

如果您要进行前端验证(仅应用于改善用户体验，切勿信任用户输入并始终在服务器端进行验证!)，为什么不使用专门用于此目的的 HTML5 功能。像这样的事情:

<form>
    <label>Email:
        <input type='email' pattern=".+(@gmail.com|@hotmail.com)" required />
    </label>
    <button type="submit">subscribe</button>
</form>

• type=email 确保仅接受电子邮件地址
• required 确保在提交之前提供值
• pattern 接受输入需要符合的正则表达式，然后才能提交。

就我个人而言，我不太喜欢浏览器生成的默认错误消息，但我更不喜欢您正在使用的警报，所以...

<小时/>

如果你坚持使用 javascript 方式，我会建议这样的东西(伪代码，未经测试):

function isEmpty(input) { ... }
function isEmail(input) { ... }
function isGmailOrHotmail(input) { ... }
function isValid(node) {
    var value = node.value;
    return ! isEmpty(value) && isEmail(value) && isGmailOrHotmail(value);
}

然后您可以将 isValid 函数绑定(bind)到提交按钮(最好从脚本文件或 block 中绑定(bind)，但内联 onclick 方式也应该有效)