Javascript 特定域的电子邮件验证无效

我有以下表格

register.php

<form class="form" action="home.php" method ="POST" enctype="application/x-www-form-urlencoded">

<input type="email" name="email" placeholder="Email Address" id="email"/>

    <script = "text.javasccript>

$('button').on('click', function(){
    str = $('input').val();
    str = str.split('@').slice(1);

    var allowedDomains = [ 'correct.com' ];

    if ($.inArray(str[0], allowedDomains) !== -1) {
        alert(str + ' is allowed');
    }else{
        alert('not allowed');
    }
});
    </script>

<fieldset style = "border-radius:30px;">


<legend>Your Personal Details:</legend>
    <form class="form" action="staffhome.php" method ="POST" enctype="application/x-www-form-urlencoded">
    <br> <input type="text" name="forename" placeholder ="Forename" id="forename"style = "display:inline; float:left;margin-left:5%;"/> 
     <input type="text" name="surname" placeholder="Surname" id="surname"style = "display:inline; float:left;margin-left:5%;"/>



    <input type="email" name="email" placeholder="Email Address" id="email"style = "display:inline; float:left;margin-left:5%;"/><br /><br><br><br>
    <script type = "text/javascript">
    $('form').on('submit', function(e){
    str = $('input').val();
    str = str.split('@').slice(1);

    var allowedDomains = [ 'wearecallidus.com' ];

    if ($.inArray(str[0], allowedDomains) !== -1) {
        alert(str + ' is allowed');
    }else{
        alert('not allowed');
        e.preventDefault();
    }
    });


</script>
    <input type="text" name="phone" placeholder="Phone Number" id="phone"style = "display:inline;margin-right:2.5%"/>
    <input type="text" name="ext" placeholder="Extension Number" id="ext"style = "display:inline;margin-left:2.5%;"/><br>

 </br>
<hr style="border-top: dotted 1px;" />
    <br> <input type="text" name="securityq" placeholder="Security Question" id="securityq" size ="32" maxlength ="60" style = "display:inline;"/>

    <input type="text" name="securitya" placeholder="Security Answer" id="securitya" size="32"style = "display:inline;"/><br />

    <br><input type="password" name="password" id="password" value="" size="32" placeholder="Type A Password" minlength="6"/><br><br>

    <input type="password" name="password-check" id="password-check" value="" size="32" placeholder ="Re-Type Your Password" minlength="6"/><br>
    </br>    

<input id="button" type="submit" value="Register" disabled="disabled" name="submit">

    </fieldset>

home.php

<form class="form" action="home.php" method ="POST" enctype="application/x-www-form-urlencoded">

<input type="email" name="email" placeholder="Email Address" id="email"/>

    <script = "text.javasccript>

$('button').on('click', function(){
    str = $('input').val();
    str = str.split('@').slice(1);

    var allowedDomains = [ 'correct.com' ];

    if ($.inArray(str[0], allowedDomains) !== -1) {
        alert(str + ' is allowed');
    }else{
        alert('not allowed');
    }
});
    </script>

<fieldset style = "border-radius:30px;">


<legend>Your Personal Details:</legend>
    <form class="form" action="staffhome.php" method ="POST" enctype="application/x-www-form-urlencoded">
    <br> <input type="text" name="forename" placeholder ="Forename" id="forename"style = "display:inline; float:left;margin-left:5%;"/> 
     <input type="text" name="surname" placeholder="Surname" id="surname"style = "display:inline; float:left;margin-left:5%;"/>



    <input type="email" name="email" placeholder="Email Address" id="email"style = "display:inline; float:left;margin-left:5%;"/><br /><br><br><br>
    <script type = "text/javascript">
    $('form').on('submit', function(e){
    str = $('input').val();
    str = str.split('@').slice(1);

    var allowedDomains = [ 'wearecallidus.com' ];

    if ($.inArray(str[0], allowedDomains) !== -1) {
        alert(str + ' is allowed');
    }else{
        alert('not allowed');
        e.preventDefault();
    }
    });


</script>
    <input type="text" name="phone" placeholder="Phone Number" id="phone"style = "display:inline;margin-right:2.5%"/>
    <input type="text" name="ext" placeholder="Extension Number" id="ext"style = "display:inline;margin-left:2.5%;"/><br>

 </br>
<hr style="border-top: dotted 1px;" />
    <br> <input type="text" name="securityq" placeholder="Security Question" id="securityq" size ="32" maxlength ="60" style = "display:inline;"/>

    <input type="text" name="securitya" placeholder="Security Answer" id="securitya" size="32"style = "display:inline;"/><br />

    <br><input type="password" name="password" id="password" value="" size="32" placeholder="Type A Password" minlength="6"/><br><br>

    <input type="password" name="password-check" id="password-check" value="" size="32" placeholder ="Re-Type Your Password" minlength="6"/><br>
    </br>    

<input id="button" type="submit" value="Register" disabled="disabled" name="submit">

    </fieldset>

---

如果您使用javascript进行验证，我建议将脚本与表单放在同一页面中。而且，既然它是javascript，为什么不动态地执行它，而不必等待用户提交呢

$('form').on('submit', function(e){
str = $('input').val();
str = str.split('@').slice(1);

var allowedDomains = [ 'correct.com' ];

if ($.inArray(str[0], allowedDomains) !== -1) {
    alert(str + ' is allowed');
}else{
    alert('not allowed');
    e.preventDefault();
}
});

工作小提琴：
如果我将js放在同一个页面中，而不是将其外部化，我会这样做：

<!DOCTYPE html>
<html>
<head>
<title>Form example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
  var allowedDomains = [ 'correct.com' ];
  $('#myForm').on('submit', function(e) { // when the form is submitted
    var str = $('#email').val(),
    domain = str.split('@')[1]; // split on @ and take the second part

    if ($.inArray(domain, allowedDomains) == -1) {
      alert(domain+' not allowed');
      e.preventDefault(); // stop form submission
    }
  });
});
</script>
</head>
<body>
  <div id="content">
    <form id="myForm" class="form" action="home.php" method ="POST" enctype="application/x-www-form-urlencoded">
      <input type="email" name="email" placeholder="Email Address" id="email"/>
      <input type="submit" />
    </form>
  </div>
</body>
</html>

#emailmsg{显示：无；颜色：红色}



使用jQuery试试这个

var email = $("#email").val();
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");

if (email === null || email === "") {     
 alert('Please enter email address.!');
 $('#email').focus();
} else if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {     
 alert('Please enter valid email address.!');
 $('#email').focus();
}

var email=$（“#email”）.val（）；
var atpos=email.indexOf（“@”）；
var dotpos=email.lastIndexOf（“.”）；
如果（电子邮件===null | |电子邮件===“”）{
警报（'请输入电子邮件地址。！'）；
$（'#email'）.focus（）；
}如果（atpos<1 | | dotpos=email.length）{
警报（'请输入有效的电子邮件地址。！'）；
$（'#email'）.focus（）；
}
将其放在表单的
提交
上。另外
这是无效的代码
oops，出于某种原因，记事本添加了一个“.”并且我拼写错误script@Halcyon：在HTML5中应该是
，您不需要为脚本设置MIME。在哪里停止提交？@mplungjan它不会停止提交，当用户从input type=email更改焦点时，它会运行。例如，我已将您的邮件添加到我的表单中，当我键入电子邮件时，它会输出不允许的邮件，即使我有Drew@correct.com-知道为什么吗？@mplungjan冷静点，伙计。修好了你看不出你的例子有什么真正的不同，是吗？我已经编辑了我的整个问题，你能看一下吗？我会将
$（'input'）.val（）
行更改为
$（'#email'）.val（）
——当OP将你的JavaScript添加到他的表单中时，它会中断，因为他的第一次输入，而jQuery返回的是错误的选择器，是
的名字
，因此所有关于这个“不起作用”的说法都在兜圈子。更新了最后一个示例以使用占位符-很好-请