Question

我有以下表格

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

home.php

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

我知道之前已经问过这个问题但是没有实际答案。哪里我是否将以下功能集成到注册表单

这是新的，已编辑的代码，但是，任何人都可以提供帮助吗？

我唯一的输出消息是，即使我输入了“允许”字样，也不允许使用该域名。域名。这是我的代码：

register.php

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

无论输入什么，我每次都得到相同的输出信息，有人能告诉我为什么吗？

Answer 1

如果我将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>

实施例

$(function() {
  var allowedDomains = ['correct.com'];
  $('#myForm').on('submit', function(e) {
    var str = $('#email').val(),
      domain = str.split('@')[1];
    if (!domain) domain="An empty domain"
    $("#emailmsg").html("").hide()
    if ($.inArray(domain, allowedDomains) == -1) {
      $("#emailmsg").html(domain + ' not allowed').show();
      e.preventDefault(); // stop form submission
    }
  });
});

#emailmsg { display:none; color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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" /> <span id="emailmsg"></span><br/>
    <input type="submit" />
  </form>
</div>

从提交中删除禁用后使用您的表单并添加ID =“myForm”和span：

var allowedDomains = ['correct.com'];

function checkEmail(emailId) {
  var $email=$("#"+emailId);
  var str = $email.val(),domain = str.split('@')[1];
  if (!domain) domain = "Empty domain";
  if ($.inArray(domain, allowedDomains) == -1) {
    $email.attr("placeholder", domain + ' not allowed').addClass("redborder");
  }
  else {
    $email.attr("placeholder", "Email address").removeClass("redborder");
  }      
 }
$(function() {
  $('#myForm').on('submit', function(e) {
      if (!checkEmail("email")) e.preventDefault(); // stop form submission
  });
  $("#email").on("keyup, blur",function() { checkEmail("email"); } );
});

.redborder {
  border: 1px solid red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset style="border-radius:30px;">


  <legend>Your Personal Details:</legend>
  <form id="myForm" 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>
    <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" name="mySubmit">

</fieldset>

Answer 2

如果您使用javascript进行验证，我建议您将脚本放在与表单相同的页面中。另外，由于它的javascript，为什么不动态而不必等待用户提交？

 <span id="spnNameLabel">Name: </span><span id="spnNameText">[NAME]</span>
 <script language="javascript">
      if (document.getElementById("spnNameText").innerHTML == "") {
           document.getElementById("spnNameLabel").style.display = "none";
      }
 </script>

工作小提琴： https://jsfiddle.net/j84mqq6k/1/

Answer 3

使用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();
}

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

3 个答案: