的index.php：

    <?php
    require_once './include/user.php';
    $user_obj = new user();

    if (isset($_POST['submit'])) {
        $message = $user_obj->save_user($_POST);
    }
    ?>


    <!DOCTYPE html>

    <html>
        <head>
            <title>PHP Form With JS Validation</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="css/style.css">
            <script type="text/javascript" src="js/country.js"></script>
            <script type="text/javascript" src="js/jsval.js"></script>
        </head>
        <body>
            <p>PHP Form With JS Validation</p>

            <div id="id1">
                <form id="myForm" name="myForm" action="index.php" method="POST" onsubmit="return validateStandard(this)">
                    <table>

                        <tr><td><input type="text" name="name" value="" placeholder="name" required="required" regexp="JSVAL_RX_ALPHA"></td></tr>
                        <tr><td><input type="email" name="email" value="" placeholder="email" required="required" required regexp="JSVAL_RX_EMAIL"></td></tr>
                        <tr><td><input type="password" name="user_password" value="" placeholder="password" required="required"></td></tr>
                        <tr><td><input type="tel" name="phone" value="" placeholder="phone no" required="required"></td></tr>

                        <tr>
                            <td>
                                <input type="radio" name="gender" value="male" checked>Male
                                <input type="radio" name="gender" value="female">Female
                            </td>
                        </tr>
                        <tr><td><textarea name="address" placeholder="address" required="required"></textarea></td></tr>
                        <tr><td><input type="text" name="city" value="" placeholder="city" required regexp="JSVAL_RX_ALPHA"></td></tr>
                        <tr><td>
                                <select name="country" required="required" exclude=" ">
                                    <option value=" ">Please Select Country</option>
                                    <script type="text/javascript">printCountryOptions();</script>
                                </select>
                            </td></tr>
                        <tr><td><input type="text" name="zipcode" value="" placeholder="zipcode" required="required" regexp="JSVAL_RX_ALPHA_NUMERIC"></td></tr>

                        <tr><td><input type="checkbox" name="agree" value="on" required="required"> I agreed with all the terms!</td></tr>
                        <tr><td><input type="submit" id="sbtn" name="submit" value="Register"></td></tr>


                    </table>
                </form>
            </div>
        </body>
    </html>
    <script>
        document.forms['myForm'].reset();
    </script>

db：user.php

    <?php

    class user {

        public function save_user($data) {
            $hostname = "localhost";
            $username = "root";
            $password = "";
            $dbname = "db_user_info";

            $conn = mysqli_connect($hostname, $username, $password, $dbname);
            $user_password = md5($data['user_password']);
            $sql = "INSERT INTO tbl_user (name, email, user_password, phone, gender, address, city, country, zipcode, agree) VALUES ('$data[name]','$data[email]','$user_password', '$data[phone]','$data[gender]','$data[address]','$data[city]','$data[country]','$data[zipcode]','$data[agree]')";
            if (!mysqli_query($conn, $sql)) {
                die('Sql Error:' . mysqli_error($conn));
            } else {           
                header('Location:thanks.php');
            }
            mysqli_close($conn);
        }



    }

Answer 1

要实现这一目标，你需要ajax，你有两个选择

在用户名字段上，您可以拥有一个onblur事件，然后调用一个函数，该函数将使用onblur事件检查数据库中的用户名。

<input name="username" type="text" id="username" onBlur="checkAvailability()">

当对象失去焦点时，会发生 onblur事件。 onblur事件最常用于表单验证代码（例如，当用户留下一个表格字段。）

使用此方法，只要用户完成键入电子邮件地址并离开输入字段，就会启动checkAvailability()函数并使用ajax向服务器发送异步请求。用户即使在提交用户名之前也会知道用户名。

收到所有表单数据并在点击提交按钮时返回结果而不刷新页面（ajax）。

让我们从选项2开始，因为它有点容易。

首先，您需要使用预准备语句，还需要使用php内置password_hash和password_verify()函数来获得更安全的密码

开始，我们将有一个带有用户名字段（电子邮件）的表单，只是你可以看到发生了什么，然后当我们点击注册按钮时，我们启动我们的ajax，它将调用php脚本并返回json数据回去使用。

<强>的index.php

<style>
.status-available{color:#2FC332;}
.status-not-available{color:#D60202;}
</style>

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">
    $(document).ready(function (){

    $('#register').submit(function (event){

    var formData = {

        'username' : $('input[name=username]').val()
    };
    $.ajax({

        type : 'POST',
        data  : formData,
        url  : 'register.php',
        dataType :'json',
        encode   : true

    })
    .done(function(data){

        console.log(data); //debugging puroposes

        if(!data.success){

          if(data.errors.username){


            $('#user-availability-status').append(data.errors.username);

          }

          if(data.errors.exists){

            $('#user-availability-status').append(data.errors.exists);
            $('#submit').prop('disabled', true);
          }
        }else{

          $('#submit').prop('disabled', false);
          $('#success').append('<div class="alert alert-success">'+data.message+'</div>');
         // alert('done');
        }

    })

    .fail(function(data){

      console.log(data); //server errrors debugging puporses only
    });

    event.preventDefault();


    });

    });

</script>
<div id="frmCheckUsername">

<div id="success" class="status-available"></div>

    <form method="POST" action="register.php" id="register">
        <label>Username:</label>
        <input name="username" type="text" id="username"><span id="user-availability-status" class="status-not-available"></span><br><br>
        <button type="submit" name="submit" id="submit"> Register </button>   
</div>
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>
</form>

<强> Register.php

<?php
require_once("dbcontroller.php");


$data   = array();
$errors = array();

if (empty($_POST['username'])) {

    $errors['username'] = 'enter username';
} else {


    $username = $_POST['username'];

    //check if username exists
    $statement = $con->prepare("SELECT email FROM users WHERE email = ? LIMIT 1");
    $statement->bind_param('s', $username);
    $statement->execute();
    $statement->store_result();
    if ($statement->num_rows == 1) {

        $errors['exists'] = 'the email ' . $username . ' already registered please login';

    }
}

if (!empty($errors)) {

    //We have errors send them back

    $data['success'] = false;
    $data['errors']  = $errors;
} else {

    //No errors insert

    $stmt = $con->prepare("INSERT INTO users (username) VALUES(?)");
    $stmt->bind_param("s", $username);
    $stmt->execute();



    $data['success'] = true;
    $data['message'] = 'user registered';

    $stmt->close();
    $con->close();
}

echo json_encode($data);



?>

dbcontroller.php 是我的数据库连接类，因此您可以忽略它并拥有自己的数据库连接类。

这将指向至少正确的方向

选项1使用onblur事件

<style>
.status-available{color:#2FC332;}
.status-not-available{color:#D60202;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function checkAvailability() {
    $("#loaderIcon").show();
    jQuery.ajax({
    url: "register.php",
    data:'username='+$("#username").val(),
    type: "POST",
    success:function(data){
        $("#user-availability-status").html(data);
        $("#loaderIcon").hide();
        $('#submit').prop('disabled', true);
    },
    error:function (){}
    });
}
</script>

<div id="frmCheckUsername">
  <label>Check Username:</label>
  <input name="username" type="text" id="username" onBlur="checkAvailability()"><span id="user-availability-status" class="status-not-available"></span>  <br><br>

  <button type="submit" name="submit" id="submit"> Register </button>  
</div>
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>

一旦用户离开输入框，就检查这个; checkAvailability（）;被解雇了

Answer 2

您只需在Db中已存在该电子邮件之前检查你只需在用户输入电子邮件时发出ajax请求然后在响应为真的情况下创建一个ajax，只需禁用提交按钮

Answer 3

您必须使用ajax。 http://api.jquery.com/jquery.ajax/

您的提交按钮默认为禁用。如果访问者写了电子邮件地址，您将带有此地址的ajax查询发送到您的后端，它将返回电子邮件状态。如果您的数据库中不存在该电子邮件，则js将从该按钮中删除disabled属性。

它如此相似：check username exists using ajax

如果MySQL数据库中已有电子邮件地址，如何停止表单提交？

的index.php：

db：user.php

3 个答案: