提交不起作用

Question

我有这个表单，我尝试制作一个“onsubmit”，当我点击提交时，检查“email”是否= =“cemail”，如果用户名是在之前拍摄的，或者不是我到目前为止

<form class="form-horizontal" action="#" method="post" onsubmit="return ValidationEvent()">
                <fieldset>
                    <legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
 <div class="form-group">
    <div class="col-sm-6">
        <input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
    </div>
    <div class="col-sm-6">
        <input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
    </div>
</div>

                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
                    </div>
                </div>
              <div class="form-group">
                    <div class="col-sm-12">
                        <input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
                    </div>
                </div>

                 <div class="form-group">
                    <div class="col-sm-12">
                        <input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1"></label>
                    <div class="col-sm-8">
                        <div class="row">

                                <label class="radio-inline">
                                    <input type="radio" id="radio" value="Female" name= "gender" required>Female
                                </label>


                                <label class="radio-inline">
                                    <input type="radio" id="radio" value="Male" name= "gender">Male
                                </label>

                        </div>
                    </div>
                </div> <!-- /.form-group -->
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-3">
                        <button type="submit" class="btn btn-primary btn-block">Register</button>
                    </div>
                </div>
            </form>

Javascript代码：

 <script>
  function ValidationEvent() {
      var email = document.getElementById("email").value;
        var username = document.getElementById("username").value;
        var cemail = document.getElementById("cemail").value;
        // Conditions
        if (email.match != cemail.match) {
            alert("Your email doesn't match!");

        }
        if(mysqli_num_rows($result) != 0)
        {
            alert("Username already taken!");
        }
        else {
        alert("Thank you");
        }

        }
  </script>

我是否以错误的方式接近该函数是否有另一种更简单的方法，我可以在我的java脚本中添加一个sql语句吗？

Answer 1

使用电子邮件检查电子邮件＆amp; cemail使用
    email.localeCompare(cemail)
这将检查两封电子邮件之间的字符串比较

对于mysqli_num_rows，没有在javascript中定义任何位置，因此我们将在控制台中获得未定义的错误，因此需要使用该名称编写不同的函数。

Answer 2

首先，不要使用内联HTML事件处理属性（例如＆＃34; onsubmit＆＃34;），因为他们创建＆＃34;意大利面条代码＆＃34;，匿名全局事件处理包装函数并且不要＃39 ; t符合现代 W3C DOM Event handling standard 。

其次，你的.php结果必须从某个地方获得。在您使用它们之前，您需要调用该文件以获取其结果。

接下来，您错误地使用 .match() string method 来比较彼此的电子邮件。您真正需要做的就是比较输入到电子邮件字段中的值（在表单值上调用.trim()以删除可能无意中添加的任何前导或尾随空格也是一个好主意）

重新构建代码以使用标准后，JavaScript将更改如下（仅供参考：这在Stack Overflow代码段环境中不起作用，因为表单提交被阻止，因此您可以看到正在运行的版本 here ）：

＆＃13;

＆＃13;

// When the DOM is loaded:
window.addEventListener("DOMContentLoaded", function(){

  // Get references to the DOM elements you will need:
  var frm = document.getElementById("frm");
  
  // Don't set variables to the values of DOM elements,
  // set them to the DOM elements themselves so you can
  // go back and get whatever properties you like without
  // having to scan the DOM for them again
  var email = document.getElementById("email");
  var username = document.getElementById("username");
  var cemail = document.getElementById("cemail");
  
  // Set up a submit event handler for the form
  frm.addEventListener("submit", validationEvent);

  // All DOM event handling funcitons receive an argument
  // that references the event they are responding to. 
  // We need that reference if we want to cancel the event
  function validationEvent(evt) {
    // Conditions
    if (email.value.trim() !== cemail.value.trim()) {
      alert("Your email doesn't match!");
      // Cancel the form submit event
      evt.preventDefault();
      evt.stopPropagation();
      return;
    }
    
    // You need to have already gotten the "mysqli_num_rows($result)" value
    // from your .php file and saved it to a variable that you can then check
    // here against "!=0"
    if(mysqli_num_rows($result) != 0) {
      alert("Username already taken!");
      // Cancel the form submit event
      evt.preventDefault();
      evt.stopPropagation();      
    } else {
     alert("Thank you");
    }
  }
  
});

＆＃13;

<form class="form-horizontal" id="frm" action="#" method="post">
                <fieldset>
                    <legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
 <div class="form-group">
    <div class="col-sm-6">
        <input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
    </div>
    <div class="col-sm-6">
        <input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
    </div>
</div>

                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
                    </div>
                </div>
              <div class="form-group">
                    <div class="col-sm-12">
                        <input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
                    </div>
                </div>

                 <div class="form-group">
                    <div class="col-sm-12">
                        <input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1"></label>
                    <div class="col-sm-8">
                        <div class="row">

                                <label class="radio-inline">
                                    <input type="radio" id="radio" value="Female" name= "gender" required>Female
                                </label>


                                <label class="radio-inline">
                                    <input type="radio" id="radio" value="Male" name= "gender">Male
                                </label>

                        </div>
                    </div>
                </div> <!-- /.form-group -->
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-3">
                        <button type="submit" class="btn btn-primary btn-block">Register</button>
                    </div>
                </div>
            </form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

首先为表单提供名称和操作

<form class="form-horizontal" id="myform" action="chkValues.php" method="post" >
....


            <div class="form-group">
                <div class="col-sm-12">
                    <input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
                </div>
            </div>
          <div class="form-group">
                <div class="col-sm-12">
                    <input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
                </div>
            </div>


....
</form>

然后将此脚本放在底部

<script>
$('#myForm').on("sumbit", function(){
 // cancel the original sending
event.preventDefault(); 

$.ajax({
  var form = $(this);
  var action = form.attr("action"),
      method = form.attr("method"),
      data   = form.serialize();
})          
.done: function(data) // is called wehn the call was okay
  {
    if( data.substr(0, 5) == "Error"){
       alert(data);   // sent the sting of the "error message" begining with "Error"
      }else{
       top.location.href = data;  // sent the sting of the "success page" when all was okay and data are saved in the database
      }            
    }
.fail(function() {
   alert( "Error: Getting data from Server" );
})
});
</script>

在php文件中

检查值，如果出现问题则返回错误。

<?php
  if(!isset($_POST['email']) || !isset($_POST['cemail'])){
    die("Error: Please fill out both email fields.");
    if($_POST['email'] != $_POST['cemail'] ){
      die("Error: The Email adresses do not match.");
    }
  here do what you want to do with the data. 



when finish just send the new url
echo "success.html";
}
?>