使用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() 。

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

例如

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);
        }
    }
});