【IT168专稿】在上一篇中，我们了解了准备工作、CSS设置，以及CodeIgniter控制层文件，本篇将继续实战jQuery和PHP CodeIgniter表单验证。
设置jQuery Validate插件进行验证
jQuery Validate插件设置了大量常见的验证规则，如验证email,电话，日期等。我们先看下如何定义设置jQuery Validate的验证规则，比如定义了两个规则，分别验证用户名和email:
required: true,
email: true
},
name: {
required: true,
minlength: 3,
maxlength:25,
},
其中,required属性设置为true，表明该字段需要进行验证。比如这里设置了名称字段需要验证，最小输入的长度为3，最长的长度为25。而如果我们要新增加自己的校验规则，比如要名称字段只能输入的是字母，则可以编写自己的校验方法，并且使用正则表达式，代码如下：
return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Please enter only letters");
这里，通过addMethod方法，增加了一个名为lettersonly的校验方法，并且使用正则表达式。下面是完成的一个js校验文件，如下：
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中库文件的验证助手类，即：
然后设置验证规则，比如象名称字段，设置规则为：
即名称字段必须为字母，最小长度为3，最大长度为25，该字段不能为空。
当服务端验证通过后，返回到成功页，验证失败后返回到失败提示信息页，如下：
{
$this -> load -> view( 'form_view' );
}
else
{
$this -> load -> view( 'success_view' );
}
显示表单的错误信息
我们再在表单的每个字段中，添加显示服务端验证的出错信息的代码，比如：
CodeIgniter默认显示表单错误信息是用段落的形式，不大友好，我们修改下验证助手的设置方法，设置成在每个表单字段后，用进行分隔，即：
在通过了客户端浏览器及服务端的双重验证后，就可以提交数据，保存到数据库了，我们这个例子中不保存到数据库，只是简单再次罗列出来，代码如下：
$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攻击。
最后，完成的控制层代码如下：
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的视图页面代码如下所示，显示用户输入的字段信息：
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'); ?>
最后，读者可以在这里下载本文的代码。
