【IT168专稿】在上一篇中，我们了解了准备工作、CSS设置，以及CodeIgniter控制层文件，本篇将继续实战jQuery和PHP CodeIgniter表单验证。
设置jQuery Validate插件进行验证
jQuery Validate插件设置了大量常见的验证规则，如验证email,电话，日期等。我们先看下如何定义设置jQuery Validate的验证规则，比如定义了两个规则，分别验证用户名和email:
email: {
required: true,
email: true
},
name: {
required: true,
minlength: 3,
maxlength:25,
},
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");
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());
}
});
});
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中，则分别设置了当出现错误时，错误信息追加在页面上显示的位置。
