实战jQuery跟PHP CodeIgniter表单验证
实战jQuery和PHP CodeIgniter表单验证
原文发表在 http://tech.it168.com/a2011/0818/1234/000001234617.shtml
上,乃本人作品,转载请注明:
前言
在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:
在header.php中，我们引入了必须引入的jquery类库和jquery validate框架类库文件。
Views/common/footer.php
在form_view.php用户填写的表单页中，我们引入了CodeIgniter框架提供的表单助手类，
利用了其中的form_open标签，代码如下：
load->view('common/header'); ?>
'form');
echo form_open('form/process', $attributes); ?>
Form Validation with CodeIgniter and jQuery
Male
Female
load->view('common/footer'); ?>
Views/success_view.php
load->view('common/header'); ?>
Form was submitted successfully!
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 Validate插件进行验证
jQuery Validate插件设置了大量常见的验证规则，如验证email,电话，日期等。我们先看下如何定义设置jQuery Validate的验证规则，比如定义了两个规则，分别验证用户名和email:
email: {
required: true,
email: true
},
name: {
required: true,
minlength: 3,
maxlength:25,
},
其中,required属性设置为true，表明该字段需要进行验证。比如这里设置了名称字段需要验证，最小输入的长度为3，最长的长度为25。而如果我们要新增加自己的校验规则，比如要名称字段只能输入的是字母，则可以编写自己的校验方法，并且使用正则表达式，代码如下：
$.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Please enter only letters");
这里，通过addMethod方法，增加了一个名为lettersonly的校验方法，并且使用正则表达式。下面是完成的一个js校验文件，如下：
(document).ready(function() {
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Please enter only letters");
// validate contact form on keyup and submit
$("#form").validate({
//set the rules for the fild names
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: "Name is required..",
},
password: {
required: "Please provide a password.",
minlength: "Password must be at least 5 characters long",
maxlength: "Password can not be more than 15 characters"
},
email: "Valid email is required.",
agree: "You must agree to our terms.",
gender: "Gender is required",
state: "Select state"
},
//错误提示信息的放置位置
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' ));
//load the data
$data['name'] = $this -> name;
$data['password'] = $this -> password;
$this -> load -> vars( $data );
$this -> load -> view( 'success_view' );
注意这里，我们还调用了xss_clean方法防止跨站RSS攻击。
最后，完成的控制层代码如下：
application/controllers/form.php
class Form extends CI_Controller {
public function index()
{
$this->load->view('form_view');
}
public function process()
{
$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', 'Email address', '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', 'Minimum length for %s is %s characters');
$this -> form_validation -> set_message( 'max_length', 'Maximum length for %s is %s characters');
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;
//load the data and success view.
$this -> load -> vars( $data );
$this -> load -> view( 'success_view' );
}
}
}
当用户的输入完全正确后，success_view的视图页面代码如下所示，显示用户输入的字段信息：
views/success_view.php
load->view('common/header'); ?>
Thank you,
Form was submitted successfully!
We have received following data:
Your name:
Email:
Password:
Gender:
State:
Terms:
load->view('common/footer'); ?>
最后，读者可以在这里(http://gazpo.com/gazpo-files/tut10-form/form_validation.zip)下载本文的代码。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
解决方法：您的组织要求您更改 PIN 码
Oct 04, 2023 pm 05:45 PM
“你的组织要求你更改PIN消息”将显示在登录屏幕上。当在使用基于组织的帐户设置的电脑上达到PIN过期限制时，就会发生这种情况，在该电脑上，他们可以控制个人设备。但是，如果您使用个人帐户设置了Windows，则理想情况下不应显示错误消息。虽然情况并非总是如此。大多数遇到错误的用户使用个人帐户报告。为什么我的组织要求我在Windows11上更改我的PIN？可能是您的帐户与组织相关联，您的主要方法应该是验证这一点。联系域管理员会有所帮助！此外，配置错误的本地策略设置或不正确的注册表项也可能导致错误。即
Windows 11 上调整窗口边框设置的方法：更改颜色和大小
Sep 22, 2023 am 11:37 AM
Windows11将清新优雅的设计带到了最前沿;现代界面允许您个性化和更改最精细的细节，例如窗口边框。在本指南中，我们将讨论分步说明，以帮助您在Windows操作系统中创建反映您的风格的环境。如何更改窗口边框设置？按+打开“设置”应用。WindowsI转到个性化，然后单击颜色设置。颜色更改窗口边框设置窗口11“宽度=”643“高度=”500“>找到在标题栏和窗口边框上显示强调色选项，然后切换它旁边的开关。若要在“开始”菜单和任务栏上显示主题色，请打开“在开始”菜单和任务栏上显示主题
如何在 Windows 11 上更改标题栏颜色？
Sep 14, 2023 pm 03:33 PM
默认情况下，Windows11上的标题栏颜色取决于您选择的深色/浅色主题。但是，您可以将其更改为所需的任何颜色。在本指南中，我们将讨论三种方法的分步说明，以更改它并个性化您的桌面体验，使其具有视觉吸引力。是否可以更改活动和非活动窗口的标题栏颜色？是的，您可以使用“设置”应用更改活动窗口的标题栏颜色，也可以使用注册表编辑器更改非活动窗口的标题栏颜色。若要了解这些步骤，请转到下一部分。如何在Windows11中更改标题栏的颜色？1.使用“设置”应用按+打开设置窗口。WindowsI前往“个性化”，然
OOBELANGUAGE错误Windows 11 / 10修复中出现问题的问题
Jul 16, 2023 pm 03:29 PM
您是否在Windows安装程序页面上看到“出现问题”以及“OOBELANGUAGE”语句？Windows的安装有时会因此类错误而停止。OOBE表示开箱即用的体验。正如错误提示所表示的那样，这是与OOBE语言选择相关的问题。没有什么可担心的，你可以通过OOBE屏幕本身的漂亮注册表编辑来解决这个问题。快速修复–1.单击OOBE应用底部的“重试”按钮。这将继续进行该过程，而不会再打嗝。2.使用电源按钮强制关闭系统。系统重新启动后，OOBE应继续。3.断开系统与互联网的连接。在脱机模式下完成OOBE的所
Windows 11 上启用或禁用任务栏缩略图预览的方法
Sep 15, 2023 pm 03:57 PM
任务栏缩略图可能很有趣，但它们也可能分散注意力或烦人。考虑到您将鼠标悬停在该区域的频率，您可能无意中关闭了重要窗口几次。另一个缺点是它使用更多的系统资源，因此，如果您一直在寻找一种提高资源效率的方法，我们将向您展示如何禁用它。不过，如果您的硬件规格可以处理它并且您喜欢预览版，则可以启用它。如何在Windows11中启用任务栏缩略图预览？1.使用“设置”应用点击键并单击设置。Windows单击系统，然后选择关于。点击高级系统设置。导航到“高级”选项卡，然后选择“性能”下的“设置”。在“视觉效果”选
Windows 11 上的显示缩放比例调整指南
Sep 19, 2023 pm 06:45 PM
在Windows11上的显示缩放方面，我们都有不同的偏好。有些人喜欢大图标，有些人喜欢小图标。但是，我们都同意拥有正确的缩放比例很重要。字体缩放不良或图像过度缩放可能是工作时真正的生产力杀手，因此您需要知道如何对其进行自定义以充分利用系统功能。自定义缩放的优点：对于难以阅读屏幕上的文本的人来说，这是一个有用的功能。它可以帮助您一次在屏幕上查看更多内容。您可以创建仅适用于某些监视器和应用程序的自定义扩展配置文件。可以帮助提高低端硬件的性能。它使您可以更好地控制屏幕上的内容。如何在Windows11
华为GT3 Pro和GT4的差异是什么？
Dec 29, 2023 pm 02:27 PM
许多用户在选择智能手表的时候都会选择的华为的品牌，其中华为GT3pro和GT4都是非常热门的选择，不少用户都很好奇华为GT3pro和GT4有什么区别，下面就就给大家介绍一下二者。华为GT3pro和GT4有什么区别一、外观GT4：46mm和41mm，材质是玻璃表镜+不锈钢机身+高分纤维后壳。GT3pro：46.6mm和42.9mm，材质是蓝宝石玻璃表镜+钛金属机身/陶瓷机身+陶瓷后壳二、健康GT4：采用最新的华为Truseen5.5+算法，结果会更加的精准。GT3pro：多了ECG心电图和血管及安
10种在 Windows 11 上调整亮度的方法
Dec 18, 2023 pm 02:21 PM
屏幕亮度是使用现代计算设备不可或缺的一部分，尤其是当您长时间注视屏幕时。它可以帮助您减轻眼睛疲劳，提高易读性，并轻松有效地查看内容。但是，根据您的设置，有时很难管理亮度，尤其是在具有新UI更改的Windows11上。如果您在调整亮度时遇到问题，以下是在Windows11上管理亮度的所有方法。如何在Windows11上更改亮度[10种方式解释]单显示器用户可以使用以下方法在Windows11上调整亮度。这包括使用单个显示器的台式机系统以及笔记本电脑。让我们开始吧。方法1：使用操作中心操作中心是访问
