實戰jQuery和PHP CodeIgniter表單驗證

時間  2019-11-07
標籤 實戰 jquery php codeigniter 表單 驗證 欄目 JQuery 简体版
原文   原文鏈接

 前言javascript

　　在Web建站中，表單的合法性驗證是十分重要的一個環節，其中包括客戶端瀏覽器的Javascript的驗證和服務端的驗證。在本文中將指導讀者使用jQuery中的validate驗證框架實現瀏覽器端的驗證代碼編寫工做，validate框架是一個十分簡單實用的驗證框架，能大大提升客戶端驗證代碼的的編寫工做，同時，本文使用的是php中十分流行的CodeIgniter框架進行服務端的驗證編寫工做。本文閱讀對象爲對jQuery及對PHP CodeIgniter框架有必定認識的讀者。php

　　準備工做css

　　咱們必須下載CodeIgniter及jQuery，版本以下：html

　　1.CodeIgniter　2.0.2(下載地址：http://codeigniter.com/downloads/)java

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

　　3.jQuery validate框架，(下載地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/)web

　　設置CodeIgniter瀏覽器

　　咱們須要自動加載url而且須要使用CodeIgniter中的form表單助手類，因此咱們在應用的autoload.php中的第67行添加以下代碼：app

　　$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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程