验证表单数据

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 what you need to do is return a response (ex: true or false) to javascript from php () .

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

有两种方法可以做到这一点，1) 对电子邮件字段上的每次击键发出 ajax 请求 $('#email-input').on('keyup') 一旦响应为假，通过 [=32 启用提交按钮=] $('#submit-button').prop('disabled', false) 请注意，在您的按钮 html 标签中，您应该默认禁用属性 <input type="submit" id="submit-button" value="Submit" disabled /> 并且在验证发生后将其禁用，然后它将可以点击并且用户将能够提交表单。

问题是，当用户输入电子邮件地址时，您将进行大量 ajax 调用，而您不希望这样，您可以做的只是当用户提交表单时发出请求（点击提交按钮），然后阻止默认行为（通过表单发送 post 请求），以便您通过 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()
})

干杯。

验证表单数据

Validate form data

javascript

php

ajax

jquery-validate