如何一起实现jquery和CodeIgniter验证库？

Question

我想创建一个注册表单，我想在其中使用jquery以及CI验证库。我怎样才能做到这一点？提交表单后，我希望控件使用jquery进入验证库并返回响应。然后，如果一切顺利，我希望在该页面本身上显示“表单已提交”消息。

编辑：

这是我的代码。

视图

<?php $this->load->view('template/header'); ?>
<div id="add_form">
    <h2>Add New Category</h2>

    <?php echo form_open('abc/abc_category_controller/add_new_category'); ?>

    <?php

    $category_data = array(
        'name' => 'category_name',
        'id' => 'category_name',
        'value' => set_value('category_name'),
        'maxlength'   => '15'
    );

    $unit_data = array(
        'name' => 'unit',
        'id' => 'unit',
        'value' => set_value('unit'),
        'maxlength'   => '10'
    );

    ?>

    <p><label for="name">Name: </label><?php echo form_input($category_data); ?></p>

    <p><label for="unit">Unit: </label><?php echo form_input($unit_data); ?></p>

    <p><?php echo form_submit('submit', 'Submit','id="submit"'); ?></p>

    <?php echo form_close(); ?>

    <?php echo validation_errors('<p class="error">'); ?>

</div><!--end add new category-form-->

<div id="success_msg">


</div>



<?php $this->load->view('template/footer') ?>

控制器-add_new_category

<?php

    class Stocks_category_controller extends CI_Controller{

    function add_new_category()
    {
        //$this->load->helper('form');
        $this->load->library('form_validation');

        $data['title'] = 'Add a new category';

        $this->form_validation->set_rules('category_name', 'Category Name', 'required');
        $this->form_validation->set_rules('unit', 'Unit', 'required');

        if ($this->form_validation->run() === FALSE)
        {
              $this->load->view('abc/add_new_category');


        }

        else
        {
            $category_name = $this->input->post('category_name');

            $unit = $this->input->post('unit');

            $this->load->model('abc/abc_category_model');

            $insert_id=$this->abc_category_model->add_new_category($category_name
                                ,$unit);


            if($insert_id!=NULL)
            {
              $this->load->view('template/success',$data);
            }

            else{
                $data['error_msg']='Error Occurred';
                $this->load->view('template/template',$data);
            }

        }

    }

    function success(){
        $data['success_msg']='New Category Successfully Created';
        $this->load->view('template/success',$data);
    }
  }

最后是模型。

   function add_new_category($category_name,$unit){

      $data = array(
           'abc_category_name' => $category_name ,
           'unit' => $unit
        );

        $this->db->insert('abc_category', $data); 
        $insert_id=$this->db->insert_id();

        return $insert_id;
   }

}

我想要的是，当我提交表单时，应该进行jquery验证。如果一切正常，则仅使用ajax显示成功消息，并且不应重新加载页面。另外，请告诉我是否可以同时使用jquery验证和CI验证库并同时维护ajax？

Answer 1

要实现客户端和服务器端验证，您需要使用jquery验证插件。

因此，您需要包括：

1. jQuery javascript库

2. jQuery 验证插件

用加载JavaScript

<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.validate.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.validate-rules.js"></script>

然后设置您的表单：

$attr = array('id' => 'demo_form');
echo form_open('demo/validation_example', $attributes);

并验证您的表单，例如：

$(document).ready(function() {
  $("#demo_form").validate({
    rules: {
            name: {
                required: true
            },
            ...
    },
    messages: {
             name: {
                required: "Name required",
            },
    },
    errorElement: "span",
        errorPlacement: function(error, element) {
                error.appendTo(element.parent());
        }

  });
});

并且也要使用服务器端验证，因为仅使用客户端验证不是一个好习惯。

要获得更多帮助，您可以找到有关

如何使用codeigniter实现jquery验证

和工作演示

您可以在其中检查jquery验证，并通过禁用浏览器的javascript来检查使用php完成的codeigniter服务器端验证。