Question

我目前正在办理登记表格。我想要包含一项功能，检查是否已输入电子邮件地址。但是，我还需要检查电子邮件的格式是否正确。这是我提出的JS代码：

$('#email').keyup(function() {
    var email = $("email").val();
    setTimeout(function() {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,10})+$/;
        if (!regex.test($("#email").val())) {
            $("#email").css("border", "1px solid #ff0033");
            $(".bubblemail").fadeIn('slow');
            $(".wrongmail").fadeIn('slow');
            $('#postEmail').attr('disabled', true);
        } else {
            $("#email").css("border", "1px solid #232323");
            $(".wrongmail").fadeOut('slow');
            $(".bubblemail").fadeOut('slow');
            $.ajax({
                type: "GET",
                url: "/ch-public/default/assets/scripts/checkRegister.php",
                data: "type=email&input=" + $("email").val(),
                success: function(result) {
                    if (result == 'free') {
                        $("#email").css("border", "1px solid #232323");
                        $(".takenmail").fadeOut('slow');
                        $(".bubblemail").fadeOut('slow');
                    } else if (result == 'taken') {
                        $("#email").css("border", "1px solid #ff0033");
                        $(".bubblemail").fadeIn('slow');
                        $(".takenmail").fadeIn('slow');
                        $('#postEmail').attr('disabled', true);
                    }
                }
            });
        }
    }, 0);
});

另一端的PHP代码：

if ($_GET['type'] === 'email')
{
    $query = Database::$conn->prepare('SELECT mail FROM users WHERE mail = :input');
    $query->execute(array(':input' => $_POST['input']));
    $number = $query->fetchColumn();
    if ($number > 0)
    {
        echo 'taken';
    }
        else
    {
        echo 'free';
    }
} 
elseif ($_POST['type'] === 'username')
{
    $query = Database::$conn->prepare('SELECT username FROM users WHERE username = :input');
    $query->execute(array(':input' => $_POST['input']));
    $number = $query->fetchColumn();
    if ($number > 0)
    {
        return true;
    }
        else
    {
        return false;
    }
}

我做了类型的东西，所以我不必为电子邮件和密码创建2个单独的文件。

我确保数据库连接正常。但事情不起作用。控制台中没有响应。那么我该如何解决这个问题？

Answer 1

在AJAX数据参数中，您没有正确发送数据。您当前的代码是

data: "type=email&input=" + $("email").val(),

应为$("#email);

即使在var email = $("email").val();中，也没有类/ id选择器。

Answer 2

更好的设计是发布整个表单并立即验证。

首先，我们创建一个验证用户的脚本。

// users/validator.php
$errors = array();
$cxn = Database::$conn;

function validate_presence($attr){
  global $errors;
  if (empty($_POST[$attr])) { 
    $errors[$attr] = "$attr is required.";
    return false;
  }
  return true;
}

function validate_uniqueness($attr){
  global $errors;
  $val = $_POST[$attr]:
  if (validate_presence($val)) { 
    $stmt = $cxn.prepare("SELECT COUNT(*) FROM users WHERE $attr = :attr");
    $result = $query->execute(array(':attr' => $val));
    if ($result->fetchColumn() === 0) {
      return true;
    } else {
      $errors[$attr] = "$attr taken";
      return false;
    }
  }
  return false;
}

validate_uniqueness("username");
validate_uniqueness("email");

return $errors;

然后我们创建一个用ajax发布的脚本：

// users/validate.php
$errors = require('validator.php');
header('Content-type: application/json');
echo json_encode(array("errors" => $errors));

您还可以重复使用验证器：

// users/create.php
$errors = require('validator.php');

if (empty($errors)){
   // @todo insert user into database.
}

你可以通过你的javascript调用它：

var validated = $.post('/users/validate.php', data: { $( "#my_form" ).serialize() });
validated.success(function(data){
  if (data[:errors].length) {
    // todo display errors...
  } else {
   // wehoo!
  }
});

检查是否通过AJAX发送电子邮件

2 个答案: