Codeigniter和jQuery - 验证表单数据

时间:2013-08-26 13:28:28

标签: javascript jquery forms codeigniter validation

我使用Codeigniter + jQuery组合进行了很多自己的编码。我当前的项目有很多不同类型的输入,当数据不同时,我必须以不同的方式处理它。一个字段可以是电子邮件字段,一个字段可以是数字字段,只允许数字和逗号等。您明白了。

我做了很简单的例子,我一直在做什么。因此,当按下提交时,我使用正则表达式匹配检查每个输入的数据,如果出现问题,那么它将改变该输入的颜色,并在某些字段上告知错误。很简单。

这种方法有效,但是当我有很多输入时,它变得非常混乱并且很难维护,我的意思是如果用户禁用了javascript,我必须要有PHP回退。所以我对jQuery和PHP方面进行了相同的检查。

其他事情是安全。我认为我对于漏洞利用/ XSS攻击几乎过于偏执,我经常用正则表达式删除所有不需要的字符,之后我检查其他正则表达式,如果剩下的数据是有效的。

如果有人能告诉我们是否有更好的方法来实现Codeigniter和jQuery之间的数据处理/验证,我将不胜感激。

应用/控制器/使用example.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Example extends CI_Controller {

  function __construct()
  {
    parent::__construct();

    $this->load->helper('url');
  }

  public function index()
  {
    $this->load->view('example_view');
  }

  public function jquery()
  {
    echo "Username: ". $this->input->post('userName');
    echo "userAge: ". $this->input->post('userAge');
    echo "userEmail: ". $this->input->post('userEmail');
  }
}
?>

应用/视图/ example_view.php

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>My test</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  </head>

  <body>
    <div id="status"></div> <br />

    <form id="userForm">
      <label for="userName">Username:</label>
      <input type="text" name="userName" id="userName" /> <br />

      <br />

      <label for="userAge">Age:</label>
      <input type="text" name="userAge" id="userAge" /> </br >

      <br />

      <label for="userEmail">E-Mail:</label>
      <input type="text" name="userEmail" id="userEmail" /> </br >

      </br >

      <input type="submit" name="sendData" value="Send it" />
    </form>
  </body>
</html>


<script>
$("#userForm").submit(function(event) {

    event.preventDefault();

    var error = 0;

    if($("#userForm").match('/regexp_here/'))
    {
      $("#userName").addClass('alert');
      error++;
    }
    else
    {
      $("#userName").removeClass('alert');
    }

    if($("#userAge").match('/regexp_here/'))
    {
      $("#userAge").addClass('alert');
      error++;
    }
    else
    {
      $("#userAge").removeClass('alert');
    }

    if($("#userEmail").match('/regexp_here/'))
    {
      $("#userEmail").addClass('alert');
      error++;
    }
    else
    {
      $("#userEmail").removeClass('alert');
    }

    if(error == 0)
    {
      $.ajax({
        type: 'POST',
        url: 'example/jquery/',
        data: { 
          userName: userName, 
          userAge: userAge, 
          userEmail: userEmail
        },
        success:function(data) 
        {
          $("status").html(data);
        },
        error:function() 
        {
          $("status").html("Well, it was error...");
        }
      });
    }
    else { }
});
</script>

0 个答案:

没有答案