【IT168 专稿】
前言
在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行添加如下代码：
建立视图层文件
接下来，我们开始编写页面的HTML页代码，我们将用户填写的表单命名为form_view,当校验成功提交后，如果没任何错误，则显示成功提示信息的页面命名为success_view,当然，我们先编写页面的头部和尾部的代码如下：
Views/common/Header.php:
<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
<p> Tutorial by Gazpo.com.</p>
</div>
</div> <!-- /wrapper -->
</body> <!-- closing body -->
</html>
在form_view.php用户填写的表单页中，我们引入了CodeIgniter框架提供的表单助手类，
利用了其中的form_open标签，代码如下：
<?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
<?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，代码如下：
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文件夹中，代码为：
public function index()
{
$this->load->view('form_view');
}
现在，我们已经可以看下表单的效果了，在浏览器中输入如下URL访问：
http://localhost/form_validation/index.php/form
即可看到如下图界面：
