提交失敗

Question

我有這個表格，我試圖做一個“提交”，當我單擊“提交”時，它檢查“電子郵件”是否為“ 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

用於檢查帶有電子郵件和cemail的電子郵件
email.localeCompare(cemail)
這將檢查兩個電子郵件之間的字符串比較

對於mysqli_num_rows，在javascript中未定義任何地方，因此我們將在控制台中得到未定義的錯誤，因此需要使用該名稱編寫一個不同的函數。

Answer 2

首先，不要使用內聯HTML事件處理屬性（例如“ onsubmit”），因為它們會創建“意大利面條代碼”，匿名全局事件處理包裝函數，並且不符合現代W3C DOM事件處理標准 。

其次，您的.php結果必須從某個地方獲取。 您需要先調用該文件以獲取結果，然后才能使用它們。

接下來，您錯誤地使用了.match()字符串方法來相互比較電子郵件。 您真正需要做的就是比較在電子郵件字段中輸入的值.trim()對表單值調用.trim()來.trim()可能無意添加的任何前導或尾隨空格也是一個好主意）。

重組代碼以使用標准后，JavaScript將會進行如下更改（僅供參考：由於表單提交被阻止，因此在Stack Overflow代碼段環境中將無法使用，因此您可以在此處查看有效的版本）：

 // 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"); } } }); 

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

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";
}
?>