论坛 › 代码共享与下载 › 表单验证不改变CI结构加入AJAX效果

zhengfeity 发表于 2014-4-14 17:12:02

表单验证不改变CI结构加入AJAX效果

思路就是输入框失去焦点 提交表单数据 返回form_error 此输入框的错误信息 下方这段可写入HELPER 变成通用类效果图

代码段 jquery 段 <script language="javascript" src="<?php echo base_url();?>js/jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
        $('input,textarea').live("blur",function(){
                  var ajax_id = $(this).attr('name');// 获取文本框的名称
                var arg = {};
                var arg1 = ajax_id;
                var value1 = $(this).val();
                arg = value1;//提交POST
                  $.post("/" + ajax_id,arg,
                  function(data,status){
                        if(data == "")
                        {
                                //$("#" + ajax_id).parent().find('span').css('color','green');//显示错误信息
                                $("#" + ajax_id).parent().find('span').text(" * ");               
                        }       
                        else
                        {
                                //$("#" + ajax_id).find('span').css('color','red');
                                $("#" + ajax_id).parent().find('span').text(' * ' + data);
                        }
               });
    });
});
</script>

HTML view视图 代码段

<?php echo form_open('/',array('id'=>'form'));?>

      <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tab">
      <tr>
    <td colspan="3">如您对我们的产品和服务有技术方面的疑问，我们对您反 映的有关问题，并尽力给您提供必要的帮助。</td>
    </tr>
<tr>
    <td width="13%">您的姓名：</td>
    <td width="74%"><input type="text" name="name" id="name" class="input_shuru" />
      <span class="red"> * <?php echo form_error('name')?></span></td>
    <td width="13%">&nbsp;</td>
</tr>
<tr>
    <td>留言主题：</td>
    <td><input type="text" name="title" id="title" class="input_shuru2" />
      <span class="red"> * <?php echo form_error('title')?></span></td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>电子邮件：</td>
    <td><input type="text" name="email" id="email" class="input_shuru" />
      <span class="red"> * <?php echo form_error('email')?></span></td>
    <td>&nbsp;</td>
</tr>
    <tr>
    <td>移动电话：</td>
    <td><input type="text" name="telphone" id="telphone" class="input_shuru" />      <span class="red"> * <?php echo form_error('telphone')?></span></td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>反馈内容：</td>
    <td><textarea name="content" cols="" rows="" class="text" id="content"></textarea>
      <span class="red"> * <?php echo form_error('content')?></span></td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>
      <input type="submit" name="button" id="button" value="提交" class="btn" /></td>
    <td>&nbsp;</td>
</tr>
</table>
</form>




PHP代码段

function form_books($ajax = false)
{
//规则省略
if ($this->form_validation->run() == FALSE)
                       {
                                if($ajax == false)
                                {
                                        $page = $this->input->post('page');
                                        $this->index($page);
                                }else
                                {
                                        echo form_error($ajax);       
                                }
                               
                       }
                       else
                       {
                                if($ajax == false)
                                {
                                        //保存到数据库
                                }
                       }

}

smilecc123 发表于 2014-4-14 17:49:30

这个很早就有了，应该蛮简单的:lol

一叶扁舟 发表于 2014-4-14 19:40:06

{:1_1:}多谢分享

dayrui 发表于 2014-4-14 20:00:27

感觉表单验证类纯属鸡肋

goyuquan 发表于 2014-4-15 10:39:34

大神对表格情有独衷啊

bob 发表于 2014-5-24 16:56:23

谢谢分享，学习了

查看完整版本: 表单验证不改变CI结构加入AJAX效果