Question

我正在尝试使用Bootstrap主题构建CodeIgniter jQuery ajax登录系统。我想将管理员输入的值与登录时的值与数据库中的值进行比较，当它们不匹配时，它会在没有页面刷新的情况下提示错误。非常感谢任何帮助和建议。感谢。

这是我的代码：

readyLogin.js

var ReadyLogin = function () {

return {
    init: function () {

        /* Login form - Initialize Validation */
        $('#form-login').validate({
            errorClass: 'help-block shake animated', // You can change the animation class for a different entrance animation - check animations page
            errorElement: 'div',
            errorPlacement: function (error, e) {
                e.parents('.form-group > div').append(error);
            },
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
                $(e).closest('.help-block').remove();
            },
            success: function (e) {
                e.closest('.form-group').removeClass('has-success has-error');
                e.closest('.help-block').remove();
            },
            rules: {
                'login-username': {
                    required: true
                },
                'login-password': {
                    required: true,
                    minlength: 5
                }
            },
            messages: {
                'login-username': {
                    required: "Please enter Administrator's username."
                },
                'login-password': {
                    required: "Please provide Administrator's password.",
                    minlength: 'Your password must be at least 5 characters long.'
                }
            }
        });
        $("#login-button").click(function(){
            var username = $("#login-username").val();
            var password = $("#login-password").val();

            var postData = {
                'username' : username,
                'password' : password,
                'msg' : 'login'
            };

            $.post('', postData, function(postData) {
                if (postData === 'login') {
                    alert('LOGIN SUCCESSFULL'+data);
                } else {
                    alert('LOGIN FAILED'+data);
                }
            });
        });
    }
};
}();

控制器/ login.php中

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Login extends CI_Controller {

public function __construct() {
    parent::__construct();
    $this->load->helper('form');
    $this->load->helper('url');
    $this->load->helper('html');
}

public function index() {
    $data['error'] = 0;
    if ($_POST) {
        $this->load->model('Login_model');
        $username = $this->input->post('login-username', true);
        $password = $this->input->post('login-password', true);
        $user = $this->Login_model->login($username, $password);
        if (!$user && $user == null) {
            $data['error'] = 1;
        } else {    
            $data['error'] = 2;
            $this->session->set_userdata('username', $user['usename']);
            $this->session->set_userdata('password', $user['password']);
            redirect(base_url() . 'Maps');
        }
    }
    $this->load->view('Backend/page_ready_login', $data);
}

function logout() {
    $this->session->sess_destroy();
    redirect(base_url(), 'refresh');
}

}

我在从模型中检查时验证输入，如果它返回无效匹配，我会抛出一个$data['error']变量值1。然后在视图if $error == 1中，它将显示错误，但我想在jQuery中执行此操作，因为这会刷新页面。

Login_model.php

<?php

class Login_model extends CI_Model {

function login($username,$password){
    $where=array(
        'username'=>$username,
        'password'=>sha1($password)
    );
    $this->db->select()->from('admin')->where($where);
    $query=$this->db->get();
    return $query->first_row('array');
}

}

视图/ page_comp_ready.php

<?php
include 'assets/Backend/inc/config.php';
$template['title'] = 'BCGIS | LOGIN';
$template['page_preloader'] = true;
?>
<?php include 'assets/Backend/inc/template_start.php'; ?>

<!-- Login Container -->
<div id="login-container">
<!-- Login Header -->
<h1 class="h3 text-light text-center push-top-bottom fadeIn animated">
    <div class="row">
        <div class="col-lg-3 fadeIn animated">
            <img src="<?= base_url(); ?     >assets/Backend/images/Ph_seal_davao_del_norte_panabo_city.png" style="width: 95px; height: 80px;"/>
        </div>
        <div class="col-lg-9 fadeIn animated">
            <strong>Brgy. Cagangohan Geographical Information System</strong>
        </div>
    </div>
</h1>
<!-- END Login Header -->

<!-- Login Block -->
<div class="block fadeIn animated">
    <!-- Login Title -->
    <div class="block-title">
        <h2>Administration Login</h2>
    </div>
    <!-- END Login Title -->

    <!-- Login Form -->
    <form id="form-login" action="<?php echo base_url(); ?>" method="post" class="form-horizontal">
        <?php if ($error == 1) { ?>
            <h5 class="alert alert-danger shake animated">Your Username/Password is incorrect!</h5>
        <?php } ?>
        <div class="form-group">
            <div class="col-xs-12">
                <input type="text" id="login-username" name="login-username" class="form-control" placeholder="Username..">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12">
                <input type="password" id="login-password" name="login-password" class="form-control" placeholder="Password..">
            </div>
        </div>
        <div class="form-group form-actions">
            <div class="col-sm-offset-2 col-sm-8 text-center">
                <center>
                    <button type="submit" id="login-button" name="login-button" class="btn btn-effect-ripple btn-block btn-primary"><i class="fa fa-check"></i> Sign In</button>
                </center>
            </div>
        </div>
    </form>
    <!-- END Login Form -->
</div>
<!-- END Login Block -->

<!-- Footer -->
<footer class="text-muted text-center fadeIn animated">
    <small><span id="year-copy"></span> &copy; <a href="#"><?php echo       $template['name'] . ' ' . $template['version']; ?></a></small>
</footer>
<!-- END Footer -->
</div>
<!-- END Login Container -->

<?php include 'assets/Backend/inc/template_scripts.php'; ?>

<!-- Load and execute javascript code used only in this page -->
<script src="<?= base_url(); ?>assets/Backend/js/pages/readyLogin.js">     </script>
<script>
$(function () {
    ReadyLogin.init();
});
</script>

<?php include 'assets/Backend/inc/template_end.php'; ?>

Answer 1

使用ajax

添加远程标记以进行验证

rules: {
            'login-username': {
                required: true,
                remote: "your function URL"
            },
            'login-password': {
                required: true,
                minlength: 5
            }
        },
        messages: {
            'login-username': {
                required: "Please enter Administrator's username.",
                remote: "your Message"

            },
            'login-password': {
                required: "Please provide Administrator's password.",
                minlength: 'Your password must be at least 5 characters long.'
            }
        }

在服务器端的情况下，请编写工作代码（我还没有足够的PHP知识:)

Answer 2

 /* Login form - Initialize Validation */
    $('#form-login').validate({
        errorClass: 'help-block shake animated', // You can change the animation class for a different entrance animation - check animations page
        errorElement: 'div',
        errorPlacement: function (error, e) {
            e.parents('.form-group > div').append(error);
        },
        highlight: function (e) {
            $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
            $(e).closest('.help-block').remove();
        },
        success: function (e) {
            e.closest('.form-group').removeClass('has-success has-error');
            e.closest('.help-block').remove();
        },
        rules: {
            'login-username': {
                required: true,
                remote: {
                    url: 'Your controller method',
                    data: {
                        user_name: function () {
                            return $("#YourFieldID").val();
                        }
                    }
                }
            },
            'login-password': {
                required: true,
                minlength: 5
            }
        },
        messages: {
            'login-username': {
                required: "Please enter Administrator's username.",
                remote: 'Your Message'

            },
            'login-password': {
                required: "Please provide Administrator's password.",
                minlength: 'Your password must be at least 5 characters long.'
            }
        },
        submitHandler: function (form) { //You're missing submitHandler
            form.submit();
        }
    });

Codeigniter jquery ajax login：从数据库中获取值并比较输入的数据

readyLogin.js

控制器/ login.php中

Login_model.php

视图/ page_comp_ready.php

2 个答案: