Question

我有一个已经由jquery.validate.min.js验证的表单，我想要的是另一个验证方法，ajax调用mysql来检查电子邮件地址是否已经在我的数据库中。如何合并验证？我已经玩了一些代码，但无法弄明白。

我的表单：http://demos.creative-tim.com/wizard-demo-register?_ga=2.138099576.979789193.1518540669-1813170823.1518540669

我的验证码：

$('document').ready(function() {
  var email_state = false;
  $('#email').on('blur', function() {
    var email = $('#email').val();
    if (email == '') {
      email_state = false;
      return;
    }
    $.ajax({
      url: 'index.php',
      type: 'post',
      data: {
        'email_check': 1,
        'email': email,
      },
      success: function(response) {
        if (response == 'taken') {
          email_state = false;
          alert('email is taken');
        } else if (response == 'not_taken') {
          email_state = true;
          alert('email available');
        }
      }
    });
  });
});

处理电子邮件检查的PHP：

        <?php
      $db = mysqli_connect('localhost', 'user', 'pass', 'subscribers');
      if (isset($_POST['email_check'])) {
        $email = $_POST['email'];
        $sql = "SELECT * FROM subscribers WHERE email='$email'";
        $results = mysqli_query($db, $sql);
        if (mysqli_num_rows($results) > 0) {
          echo "taken";
        }else{
          echo 'not_taken';
        }
        exit();
      }
      ?>

Answer 1

看看json_encode您需要做的是从php（check this answer）向javascript返回响应（例如：true或false）。

然后检查成功js函数的响应，如果是，则电子邮件已经在数据库中，并提醒用户，否则，提交带有电子邮件值的表单。

有两种方法可以实现此目的：1）对电子邮件字段$('#email-input').on('keyup')上的每次击键发出ajax请求，一旦响应为false，请通过jquery $('#submit-button').prop('disabled', false)启用提交按钮。您的按钮html标记默认情况下应该具有禁用属性<input type="submit" id="submit-button" value="Submit" disabled />，并且在验证发生后禁用它，然后它将是可点击的，用户将能够提交表单。

问题是，当用户输入电子邮件地址时你要做很多ajax调用，而你不想这样做，而你可以做的只是当用户做出请求时提交表单（点击提交按钮）然后阻止默认行为（通过表单发送帖子请求），以便您通过ajax检查电子邮件是否已被使用，如果是，请不要提交表格和显示消息，否则，提交表格。

<form id="form" action="http://foo.com" method="post">...</form>

$('#form').on('submit', function (ev) {
  ev.preventDefault() // prevent default behaviour (making a post request)
  // do your ajax call here to check the email availability
  // if it's taken, do nothing and just display a message to the user
  // otherwise, submit the form: $(this).submit()
})

干杯。

验证表单数据

1 个答案: