input 正则 表单 验证
兼容IE8浏览器
表单验证插件推荐使用jquery.validate.min.js，原因：
1，插件从2006年持续更新直到现在，通用大部分功能，目前最新的1.15.0。
2，作者是jquery UI的组长是大牛，以后学习插件看看作者是不是大牛。
大概感受下代码风格：
$('#form').validate({
debug:true,
rules:{
username:{ //rules里的属性是，表单的name属性值
required:{
depends:function(element){ //在rules中的每一个规则有一个depends属性,只有满足条件时候才返回true。
return $('#pass').is(':filled'); //只有当密码填写后，username的必填才开启
}
},
minlength:{
param:2,
depends:function(){} //当满足条件时，就输出参数param:2
},
maxlength:5,
remote:{
url:'check.php',
type:'get',
data:{name:'陈',age:33}
}
},
pass:{
required:true,
minlength:2,
maxlength:5
}
}, //rules对象闭合
messages:{
username:{
required:'必填',
minlength:jQuery.format('帐号不得小于{0}');, //帐号不得小于2位
maxlength:'jQuery.format('帐号必须在{0}-{1}');', //帐号要在2到5之间
remote:'用户名不存在'
},
pass:{
required:'必填',
minlength:'长度至少2位',
maxlength:'长度不能超过5位'
}
},
submitHandler:function(form){ //当表单验证都成功时，这里还可以修改提交方式使用ajax提交
console.log( $('form').serialize() );
},
invalidHandler:function(event,validator){ //表单填写失败后的回调
alert(validator.numberOfInvalids()) ;
},
groups:{
login:'username pass ok_pass' // 让3个出错元素的信息，在一个地方显示,与errorPlacement配合使用
},
errorPlacement:function(error,element){ //错误信息放在哪里，与groups配合使用
if( $(element[0]).attr('id')=='username' ){
error.appendTo( $('.usererro') ); //将用户名错误的信息指定在一个地方显示
}
},
onsubmit:true, //默认是true,如果是false,点击提交表单时所有的表单是不验证的，只有填写表单才验证
errorClass:'errorclass', //自定义错误信息class
validClass:'rightclass', //自定义正确时的class
errorElement: "em", //修改错误信息的laber标签
wrapper: "li", //用什么样的容器包裹错误信息
errorLabelContainer: "#messageBox", //把错误信息统一放在一个容器里
highlight:function(element,errorClass,validClass){ //给未通过验证的表单添加效果
},
unhighlight:function(element,errorClass,validClass){ //去除未通过验证的表单添加效果
},
showErrors:function(errorMap,errorList){ //动态更新错误信息条目，其实它的功能是时时更新的作用
var error=this.numberOfInvalids();
if(error){
$('.myerror').html('目前有'+error+'条错误信息');
}else{
$('.myerror').hide();
}
this.defaultShowErrors(); //显示默认错误信息
}，
onfocusout:false, //默认值为true,如果false时，失去焦点就不会验证表单了,建议不修改
onkeyup:false ,//默认为true,建议不修改
onclick:false, //,建议不修改
focusInvalid:false, //验证错误后无法获取焦点,建议不修改
ignoreTitle:true, //建议开启，禁止读取title的值为错误信息
});
基本验证方法(以下方法适用于90%的表单)：
required:true //必填
remote //远程校验，例如注册帐号先匹配下是否有重复的帐号，免得提交了在去匹配。
minlength:2 //最小长度
maxlength:10 //最大长度
rangelength //长度范围 如：[2,10]
min:2 //设置最小值
max:10 //设置最大值
range:[2,10] //取值范围
email:true //邮箱格式
url:true // url格式，要有http://
data:true // 宽松型时间格式（不太推荐）
dataISO:true // 严格时间格式 时间格式可以是2011-11-11、2011/11/11、2011-11/21
number:true //数字类型
digits:true //正整数
equalTo:’#pass’ //检查是否与某一个表单的值一样,要于id是pass的值一致
ignore:’#pass’ //跳过验证
高级方法：
$(‘#form’).valid() //检查#form下的所有表单是否填写正确，有一个错误，返回false,都对返true
$(‘#pass’).rules(); //获取某一表单规则
$(‘#pass’).rules(‘add’,{min:2,max:10}); //动态添加规则
$(‘#pass’).rules(‘remove’,’min max’); //动态删除规则
validator对象
$(‘#form’).validate(); //返回一个validator对象
var validator=$(‘#form’).validate();
validate()方法默认返回一个validator对象，所以对象中就有很多方法可以使用：
validator.form() //验证所有表单是否符合规则，类似valid()
validator.element(‘#pass’) //验证某一个表单是否符合规则
validator.resetForm() //隐藏所有错误提示
validator.showErrors({username:’动态添加错误信息’}) //为某一个元素添加错误信息
validator.numberOfInvalids() //提交表单时候 返回，出错表单的数量
validator静态方法
jQuery.format();
jQuery.validator.setDefaults({ //修改默认配置
debug: true //默认为validator对象的debug开启，以后遇到多个form就不需要一个个起开启了
});
jQuery.validator.addClassRules({
name: { //有class="name"的表单都会有以下规则
required: true,
minlength: 2
},
zip: { //有class="zip"的表单都会有以下规则
required: true,
digits: true,
minlength: 5,
maxlength: 5
}
});
选择器
$( “input:blank” ) //选择所有空的表单
:filled //选择所有不为空的
:unchecked //选择所有没有被选中的
自定义验证规则
$.validator.addMethod(‘postcode’,function(value,element,params){
//自定义规则
},’错误信息’);
例如：
$('#code').rules('add', {
required : true,
code : true,
messages : {
required : '邮编不得为空！',
},
});
$.validator.addMethod('code', function (value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, '请输入正确的邮政编码！');
以后需要添加什么规则就自己套用
—————————————————————
以上方法是写在js中，还有另外一种写法是用class和在当前属性中写相应的属性名和值
$(‘#form’).validate(); //执行一下
<input type=”text” class=”required” minlength=”2″>
学习站点：http://www.verycd.com/topics/2956408/ 47-49
http://www.imooc.com/video/7474