使用Codeigniter和Ajax检查用户名是否存在于数据库中

Question

如何使用Ajax和代码点火器检查用户名是否在我的数据库中？我设法创建了没有空字段且没有无效电子邮件的功能。现在，我唯一无法完成的功能就是数据库中存在用户名。

功能：当有人试图创建用户名，并且系统中已经存在输入的用户名时，我希望ajax向我显示一条消息。

function reg_new_user() {
  var frstname = document.getElementById('first_name').value;
  var lstname = document.getElementById('last_name').value;
  var uemail = document.getElementById('user_email').value;
  var uname = document.getElementById('user_name').value;
  var upasswd = document.getElementById('user_password').value;

  if (frstname == '' || lstname == '' || uemail == '' || uname == '' || upasswd == '') {
    alert('All fields are required');
    $('#add_new_user_mod').modal('hide');
    redirect('admin/Welcome/users');
  }
  if (uemail.indexOf('@') <= 0) {
    alert('Invalid Email address!');
    $("form").trigger("reset");
    redirect('admin/Welcome/users');
  }

  $.ajax({
    url: "<?php echo base_url().'index.php/admin/Welcome/add_user_new'; ?>",
    data: 'name=' + frstname + '&lastname=' + lstname + '&email=' + uemail + '&username=' + uname + '&password=' + upasswd,
    async: false,
    type: "POST",
    success: function(data) {
      $('#add_new_user_mod').modal('hide');
      alert('User added successfully');
      window.location = "<?php echo base_url().'index.php/admin/Welcome/users'; ?>";
    }
  });
  return false;
}

<div class="tools">
  <div class="btn-group">
    <div class="btn-group">


      <a class="btn  btn-info btn-raised ink-reaction" onclick="add_new_user_mod(); ">Add User</a>

    </div>
  </div>
</div>
<div class="modal fade" id="add_new_user_mod" tabindex="-1" role="dialog" aria-labelledby="simpleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="simpleModalLabel">Add Item</h4>
      </div>
      <div class="modal-body" id="adibody">

        <div id="err"></div>
        <form>
          <div class="form-group">
            <label>FirstName</label>
            <input type="text" class="form-control" id="first_name">
          </div>
          <div class="form-group">
            <label>LastName</label>
            <input type="text" class="form-control" id="last_name">
          </div>
          <div class="form-group">
            <label>Email</label>
            <input type="text" class="form-control" id="user_email">
          </div>
          <div class="form-group">
            <label>Username</label>
            <input type="text" class="form-control" id="user_name">
            <span id="feedback"></span>
          </div>
          <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control" id="user_password">
          </div>
          <div class="form-group">
            <button type="button" class="btn btn-success" onclick="reg_new_user();">Register</button>
          </div>
        </form>


      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
  <!-- END SIMPLE MODAL MARKUP -->
</div>

Answer 1

在前端和后端进行验证是很明智的，而从UX角度来看，我反对使用alert()。

鉴于此，我将实施表单验证来解决2个问题：后端检查（因为永远无法信任客户端），并确保用户名唯一。

例如

function add_new_user() {
    $this->load->library('form_validation');
    $this->form_validation->set_rules('name', 'Name', 'required');
    // ^ do the same for your other fields
    $this->form_validation->set_rules('username', 'Username', 'required|is_unique[users.username]'); // is_unique `table_name`.`username field`
    if (!$this->form_validation->run()) {
        echo json_encode(['status' => 'error', 'msg' => validation_errors()]);
    }
    // post stuff to database
    echo json_encode(['status' => 'success', 'msg' => '']);
}

js看起来像：

$.ajax({
    url: "<?php echo base_url() . 'index.php/admin/Welcome/add_user_new'; ?>",
    data: 'name=' + frstname + '&lastname=' + lstname + '&email=' + uemail + '&username=' + uname + '&password=' + upasswd,
    async: false,
    type: "POST",
    dataType: 'json',
    success: function (data) {
        if (data.status == 'success') {
            $('#add_new_user_mod').modal('hide');
            alert('User added successfully');
            window.location = "<?php echo base_url() . 'index.php/admin/Welcome/users'; ?>";
        } else {
            alert(data.msg);
        }
    }
});