实战jQuery和PHP CodeIgniter表单验证
原文发表在http://tech.it168.com/a2011/0818/1234/000001234617.shtml
上,乃本人作品,转载请注明:
前言
在Web建站中，表单的合法性验证是十分重要的一个环节，其中包括客户端浏览器的Javascript的验证和服务端的验证。在本文中将指导读者使用jQuery中的validate验证框架实现浏览器端的验证代码编写工作，validate框架是一个十分简单实用的验证框架，能大大提高客户端验证代码的的编写工作，同时，本文使用的是php中十分流行的CodeIgniter框架进行服务端的验证编写工作。本文阅读对象为对jQuery及对PHPCodeIgniter框架有一定认识的读者。
准备工作
我们必须下载CodeIgniter及jQuery，版本如下：
1.CodeIgniter 2.0.2(下载地址：http://codeigniter.com/downloads/)
2.jQuery1.6.1(下载地址：http://code.jquery.com/jquery-1.6.1.min.js)
3.jQueryvalidate框架，(下载地址：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>
<metacharset="UTF-8">
<title>FormValidation-Gazpo.com</title>
<linkrel="stylesheet"type="text/css"href="<?phpechobase_url();?>css/style.css"/>
<scripttype="text/javascript"src="<?phpechobase_url();?>js/jquery-1.6.1.min.js"></script>
<scripttype="text/javascript"src="<?phpechobase_url();?>js/jquery.validate.js"></script>
<scripttype="text/javascript"src="<?phpechobase_url();?>js/jquery.validate-rules.js"></script>
</head>
<body>
<divid="wrapper"><!--closeitinfooter-->
在header.php中，我们引入了必须引入的jquery类库和jquery validate框架类库文件。
Views/common/footer.php
<divid="footer">
TutorialbyGazpo.com.
</div>
</div><!--/wrapper-->
</body><!--closingbody-->
</html>
在form_view.php用户填写的表单页中，我们引入了CodeIgniter框架提供的表单助手类，
利用了其中的form_open标签，代码如下：
<!--includeheader-->
<?php$this->load->view('common/header');?>
<!--CodeIgniterFormtag-->
<?php$attributes=array('id'=>'form');
echoform_open('form/process',$attributes);?>
<h2>FormValidationwithCodeIgniterandjQuery</h2>
<divclass="field">
<labelfor="name">Name</label>
<inputclass="input"id="name"name="name"type="text"/>
</div>
<divclass="field">
<labelfor="password">Password</label>
<inputclass="input"id="password"name="password"type="password"/>
</div>
<divclass="field">
<labelfor="email">Email</label>
<inputclass="input"id="email"name="email"type="text"/>
</div>
<divclass="field">
<labelfor="gender">SelectGender</label>
<divclass="gender-fields">
<inputtype="radio"class="radio"name="gender"value="male">Male
<inputtype="radio"class="radio"name="gender"value="female">Female
</div>
</div>
<divclass="field">
<labelfor="state">SelectState</label>
<selectclass="state"name="state">
<optionclass="droplist"></option>
<optionclass="droplist">Alabama</option>
<optionclass="droplist">Alaska</option>
<optionclass="droplist">Arizona</option>
</select>
</div>
<divclass="field">
<labelfor="agree">Terms</label>
<inputtype="checkbox"class="checkbox"name="terms"value="agree"/>
</div>
<inputtype="submit"name="submit"class="submit"value="Submit">
</form>
<!--includefooter-->
<?php$this->load->view('common/footer');?>
Views/success_view.php
<!--loadheader-->
<?php$this->load->view('common/header');?>
<!--maincontent-->
<h3>Formwassubmittedsuccessfully!</h3>
<!--loadfooter-->
<?php$this->load->view('common/footer');?>
在显示成功页面中，只是简单显示一句成功提交的信息即可。
设置CSS
下面为了表单的美观，我们设置一下CSS，注意我们使用的是CSS3，代码如下：
body{
font-family:arial,verdana,sans-serif;
color:#333333;
font-size:13px;
margin:0auto;
background:#f5f5f5;
}
#wrapper{
margin:0auto;
position:relative;
background:#FFFFFF;
width:900px;
border:10pxsolid#eaeaea;
}
#form{
padding:10px;
}
#form.field{
margin-bottom:15px;
}
#formlabel{
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,lefttop,leftbottom,
color-stop(0.0,#ffffff),color-stop(1.0,#f2f2f2));
border:1pxsolid#cacaca;
font-family:inherit;
color:#797979;
font-size:15px;
padding:8px10px;
width:300px;
font-weight:bold;
}
#form.state{
border:1pxsolid#b9bdc1;
padding:5px;
font-size:15px;
font-family:inherit;
font-weight:bold;
color:#797979;
}
#form:focus{
-webkit-box-shadow:0px0px4px#aaa;
-moz-box-shadow:0px0px4px#aaa;
box-shadow:0px0px4px#aaa;
}
#form.gender-fields{
padding-top:10px;
}
#formspan.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,lefttop,leftbottom,
color-stop(0.0,#ffffff),color-stop(1.0,#eaeaea));
border:1pxsolid#dedede;
color:#484848;
font-size:14px;
font-weight:bold;
padding:8px10px;
cursor:pointer;
margin-left:220px;
}
/*--Tabledesigntodisplaydatainsuccessview--*/
#display_data{
padding:10px;
}
#display_data.name{
font-style:italic;
text-decoration:underline;
}
#display_datatable{
border:1pxsolid#e5eff8;
margin:10px0px;
border-collapse:collapse;
}
#display_datatr.even{
background:#f7fbff
}
#display_datatr.odd.title{
background:#f4f9fe;
}
#display_datatd{
border-bottom:1pxsolid#e5eff8;
border-right:1pxsolid#e5eff8;
color:#678197;
padding:5px8px;
}
#display_datatd.title{
font-weight:bold;
width:100px;
text-align:right;
}
#display_datatd.info{
font-style:italic;
width:200px;
}
#footer{
width:60%;
margin:20pxauto;
}
编写CodeIgniter的控制层文件
接下来，我们要在CodeIgniter中编写控制层文件，以加载视图文件，将控制层文件命名为form.php,放在applications/controller文件夹中，代码为：
classFormextendsCI_Controller{
publicfunctionindex()
{
$this->load->view('form_view');
}
现在，我们已经可以看下表单的效果了，在浏览器中输入如下URL访问：
http://localhost/form_validation/index.php/form
即可看到如下图界面：
设置jQueryValidate插件进行验证
jQueryValidate插件设置了大量常见的验证规则，如验证email,电话，日期等。我们先看下如何定义设置jQueryValidate的验证规则，比如定义了两个规则，分别验证用户名和email:
email:{
required:true,
email:true
},
name:{
required:true,
minlength:3,
maxlength:25,
},
其中,required属性设置为true，表明该字段需要进行验证。比如这里设置了名称字段需要验证，最小输入的长度为3，最长的长度为25。而如果我们要新增加自己的校验规则，比如要名称字段只能输入的是字母，则可以编写自己的校验方法，并且使用正则表达式，代码如下：
$.validator.addMethod("lettersonly",function(value,element){
returnthis.optional(element)||/^[a-z]+$/i.test(value);
},"Pleaseenteronlyletters");
这里，通过addMethod方法，增加了一个名为lettersonly的校验方法，并且使用正则表达式。下面是完成的一个js校验文件，如下：
(document).ready(function(){
jQuery.validator.addMethod("lettersonly",function(value,element){
returnthis.optional(element)||/^[a-z]+$/i.test(value);
},"Pleaseenteronlyletters");
//validatecontactformonkeyupandsubmit
$("#form").validate({
//settherulesforthefildnames
rules:{
name:{
required:true,
minlength:3,
maxlength:25,
lettersonly:true
},
email:{
required:true,
email:true
},
password:{
required:true,
minlength:5,
maxlength:15
},
gender:{
required:true
},
state:{
required:true
},
agree:{
required:true
},
},
//设置错误信息
messages:{
name:{
required:"Nameisrequired..",
},
password:{
required:"Pleaseprovideapassword.",
minlength:"Passwordmustbeatleast5characterslong",
maxlength:"Passwordcannotbemorethan15characters"
},
email:"Validemailisrequired.",
agree:"Youmustagreetoourterms.",
gender:"Genderisrequired",
state:"Selectstate"
},
//错误提示信息的放置位置
errorElement:"span",
errorPlacement:function(error,element){
error.appendTo(element.parent());
}
});
});
这里，通过设置messages来设置当用户填入非法数据时，要显示的提示信息，而errElement和errorPlacement中，则分别设置了当出现错误时，错误信息追加在页面上显示的位置
服务端CodeIgniter的验证
接下来，我们要编写服务端的验证。首先，我们要通过引入CodeIgniter中库文件的验证助手类，即：
$this->load->library('form_validation');
然后设置验证规则，比如象名称字段，设置规则为：
$this->form_validation->set_rules('name','Name','trim|required|alpha|min_length[3]|max_length[25]');
即名称字段必须为字母，最小长度为3，最大长度为25，该字段不能为空。
当服务端验证通过后，返回到成功页，验证失败后返回到失败提示信息页，如下：
if($this->form_validation->run()===FALSE)
{
$this->load->view('form_view');
}
else
{
$this->load->view('success_view');
}
显示表单的错误信息
我们再在表单的每个字段中，添加显示服务端验证的出错信息的代码，比如：
Name
CodeIgniter默认显示表单错误信息是用段落的形式，不大友好，我们修改下验证助手的设置方法，设置成在每个表单字段后，用进行分隔，即：
$this->form_validation->set_error_delimiters('','');
在通过了客户端浏览器及服务端的双重验证后，就可以提交数据，保存到数据库了，我们这个例子中不保存到数据库，只是简单再次罗列出来，代码如下：
$this->name=$this->security->xss_clean($this->input->post('name'));
$this->email=$this->security->xss_clean($this->input->post('email'));
//loadthedata
$data['name']=$this->name;
$data['password']=$this->password;
$this->load->vars($data);
$this->load->view('success_view');
注意这里，我们还调用了xss_clean方法防止跨站RSS攻击。
最后，完成的控制层代码如下：
application/controllers/form.php
classFormextendsCI_Controller{
publicfunctionindex()
{
$this->load->view('form_view');
}
publicfunctionprocess()
{
$this->load->library('form_validation');
$this->form_validation->set_error_delimiters('','');
$this->form_validation->set_rules('name','Name','trim|required|alpha|min_length[3]|max_length[15]');
$this->form_validation->set_rules('password','Password','trim|required|min_length[4]|max_length[15]');
$this->form_validation->set_rules('email','Emailaddress','trim|required|valid_email');
$this->form_validation->set_rules('gender','Gender','required');
$this->form_validation->set_rules('state','State','required');
$this->form_validation->set_rules('terms','Terms','required');
//设置校验显示信息
$this->form_validation->set_message('min_length','Minimumlengthfor%sis%scharacters');
$this->form_validation->set_message('max_length','Maximumlengthfor%sis%scharacters');
if($this->form_validation->run()===FALSE)
{
$this->load->view('form_view');
}
else
{
$this->name=$this->security->xss_clean($this->input->post('name'));
$this->password=$this->security->xss_clean($this->input->post('password'));
$this->email=$this->security->xss_clean($this->input->post('email'));
$this->gender=$this->input->post('gender');
$this->state=$this->input->post('state');
$this->terms=$this->input->post('terms');
$data['name']=$this->name;
$data['password']=$this->password;
$data['email']=$this->email;
$data['gender']=$this->gender;
$data['state']=$this->state;
$data['terms']=$this->terms;
//loadthedataandsuccessview.
$this->load->vars($data);
$this->load->view('success_view');
}
}
}
当用户的输入完全正确后，success_view的视图页面代码如下所示，显示用户输入的字段信息：
views/success_view.php
load->view('common/header');?>
Thankyou,
Formwassubmittedsuccessfully!
Wehavereceivedfollowingdata:
Yourname:
Email:
Password:
Gender:
State:
Terms:
load->view('common/footer');?>
最后，读者可以在这里(http://gazpo.com/gazpo-files/tut10-form/form_validation.zip)下载本文的代码。