实战jQuery和PHP CodeIgniter表单验证

 前言

  在Web建站中,表单的合法性验证是十分重要的一个环节,其中包括客户端浏览器的Javascript的验证和服务端的验证。在本文中将指导读者使用jQuery中的validate验证框架实现浏览器端的验证代码编写工作,validate框架是一个十分简单实用的验证框架,能大大提高客户端验证代码的的编写工作,同时,本文使用的是php中十分流行的CodeIgniter框架进行服务端的验证编写工作。本文阅读对象为对jQuery及对PHP CodeIgniter框架有一定认识的读者。

  准备工作

  我们必须下载CodeIgniter及jQuery,版本如下:

  1.CodeIgniter 2.0.2(下载地址:http://codeigniter.com/downloads/)

  2.jQuery 1.6.1 (下载地址:http://code.jquery.com/jquery-1.6.1.min.js)

  3.jQuery validate框架,(下载地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/)

  设置CodeIgniter

  我们需要自动加载url并且需要使用CodeIgniter中的form表单助手类,所以我们在应用的autoload.php中的第67行添加如下代码:

  $autoload['helper'= array('url', 'form');

  建立视图层文件

  接下来,我们开始编写页面的HTML页代码,我们将用户填写的表单命名为form_view,当校验成功提交后,如果没任何错误,则显示成功提示信息的页面命名为success_view,当然,我们先编写页面的头部和尾部的代码如下:

  Views/common/Header.php:

  

<!DOCTYPE> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Form Validation - Gazpo.com</title> 
        <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css" /> 
        <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> 
  
    </head> 
    <body> 
        <div id="wrapper"> <!-- close it in footer -->
      在header.php中,我们引入了必须引入的jquery类库和jquery validate框架类库文件。
  Views/common/footer.php
   <div id="footer"> 
            <p> Tutorial by Gazpo.com.</p> 
        </div> 
    </div>  <!-- /wrapper  -->
    </body> <!-- closing body -->
</html>

  在form_view.php用户填写的表单页中,我们引入了CodeIgniter框架提供的表单助手类,

  利用了其中的form_open标签,代码如下:

<!-- include header -->
<?php $this->load->view('common/header'); ?> 
  
    <!-- CodeIgniter Form tag -->
    <?php $attributes = array('id' => 'form'); 
          echo form_open('form/process', $attributes); ?> 
  
    <h2>Form Validation with CodeIgniter and jQuery</h2> 
  
    <div class="field"> 
    <label for="name">Name</label> 
    <input class="input" id="name" name="name" type="text" /> 
    </div> 
  
    <div class="field"> 
    <label for="password">Password</label> 
    <input class="input" id="password" name="password" type="password" /> 
    </div>  
  
    <div class="field"> 
    <label for="email">Email</label> 
    <input class="input" id="email" name="email" type="text" /> 
    </div>     
  
    <div class="field"> 
    <label for="gender">Select Gender</label> 
    <div class = "gender-fields"> 
    <input type="radio" class="radio" name="gender" value="male">Male 
    <input type="radio" class="radio" name="gender" value="female">Female 
    </div> 
    </div>  
  
    <div class="field"> 
    <label for="state">Select State</label> 
    <select class="state" name="state"> 
        <option class="droplist" ></option> 
        <option class="droplist" >Alabama</option> 
        <option class="droplist" >Alaska</option> 
        <option class="droplist" >Arizona</option> 
    </select> 
    </div> 
  
    <div class="field"> 
    <label for="agree">Terms</label> 
    <input type="checkbox" class="checkbox" name="terms" value="agree" /> 
    </div> 
  
    <input type="submit" name="submit" class="submit" value="Submit"> 
    </form> 
  
<!-- include footer -->
<?php $this->load->view('common/footer'); ?>

  Views/success_view.php

<!-- load header -->
<?php $this->load->view('common/header'); ?> 
  
<!-- main content -->
<h3>Form was submitted successfully! </h3> 
  
<!-- load footer -->
<?php $this->load->view('common/footer'); ?>

  在显示成功页面中,只是简单显示一句成功提交的信息即可。

设置CSS

  下面为了表单的美观,我们设置一下CSS,注意我们使用的是CSS3,代码如下:

  

body {

  font-family: arial,verdana,sans-serif;

  color:#333333;

  font-size:13px;

  margin: 0 auto;

  background: #f5f5f5;

  }

  #wrapper {

  margin: 0 auto;

  position: relative;

  background:#FFFFFF;

  width: 900px;

  border:10px solid #eaeaea;

  }

  #form {

  padding: 10px;

  }

  #form .field {

  margin-bottom:15px;

  }

  #form label{

  display: block;

  float: left;

  font-weight: bold;

  margin-right:10px;

  text-align: right;

  width: 120px;

  line-height: 35px;

  font-size:14px;

  cursor: pointer;

  }

  #form .checkbox{

  margin-top:10px;

  }

  #form .input{

  -moz-border-radius: 7px;

  -webkit-border-radius: 7px;

  background-color: #eaeaea;

  background: -moz-linear-gradient(top, #ffffff, #f2f2f2);

  background: -webkit-gradient(linear, left top, left bottom,

  color-stop(0.0, #ffffff), color-stop(1.0, #f2f2f2));

  border: 1px solid #cacaca;

  font-family: inherit;

  color: #797979;

  font-size: 15px;

  padding: 8px 10px;

  width: 300px;

  font-weight: bold;

  }

  #form .state{

  border: 1px solid #b9bdc1;

  padding: 5px;

  font-size: 15px;

  font-family: inherit;

  font-weight: bold;

  color: #797979;

  }

  #form :focus{

  -webkit-box-shadow: 0px 0px 4px #aaa;

  -moz-box-shadow: 0px 0px 4px #aaa;

  box-shadow: 0px 0px 4px #aaa;

  }

  #form .gender-fields{

  padding-top:10px;

  }

  #form span.error {

  color:red;

  padding-left:10px;

  }

  #form .info{

  margin-left:130px;

  font-size: 12px;

  font-style:italic;

  color: #999;

  }

  #form .submit{

  -moz-border-radius: 15px;

  -webkit-border-radius: 15px;

  font-family: arial,verdana,sans-serif;

  background-color: #dedede;

  background: -moz-linear-gradient(top, #ffffff, #eaeaea);

  background: -webkit-gradient(linear, left top, left bottom,

  color-stop(0.0, #ffffff), color-stop(1.0, #eaeaea));

  border: 1px solid #dedede;

  color: #484848;

  font-size:14px;

  font-weight: bold;

  padding: 8px 10px;

  cursor: pointer;

  margin-left:220px;

  }

  /*-- Table design to display data in success view --*/

  #display_data{

  padding:10px;

  }

  #display_data .name{

  font-style: italic;

  text-decoration:underline;

  }

  #display_data table{

  border:1px solid #e5eff8;

  margin:10px 0px;

  border-collapse:collapse;

  }

  #display_data tr.even{

  background:#f7fbff

  }

  #display_data tr.odd .title {

  background:#f4f9fe;

  }

  #display_data td {

  border-bottom:1px solid #e5eff8;

  border-right:1px solid #e5eff8;

  color:#678197;

  padding:5px 8px;

  }

  #display_data td.title{

  font-weight: bold;

  width:100px;

  text-align:right;

  }

  #display_data td.info{

  font-style: italic;

  width:200px;

  }

  #footer {

  width:60%;

  margin:20px auto;

  }


编写CodeIgniter的控制层文件

  接下来,我们要在CodeIgniter中编写控制层文件,以加载视图文件,将控制层文件命名为form.php,放在applications/controller文件夹中,代码为:

  

class Form extends CI_Controller {

  public function index()

  {
  $this->load->view('form_view');
  }


  现在,我们已经可以看下表单的效果了,在浏览器中输入如下URL访问:

  http://localhost/form_validation/index.php/form

实战jQuery和PHP CodeIgniter表单验证

你可能感兴趣的:(实战jQuery和PHP CodeIgniter表单验证)