bootstrap form validate
吴才俊
bootstrap form validate
/**
* 必填项,空格不行
*/
jQuery.validator.addMethod("required2", function(value, element, param) {
value = value.trim();
// check if dependency is met
if ( !this.depend( param, element ) ) {
return "dependency-mismatch";
}
if ( element.nodeName.toLowerCase() === "select" ) {
// could be an array for select-multiple or a string, both are fine this way
var val = $( element ).val();
return val && val.length > 0;
}
if ( this.checkable( element ) ) {
return this.getLength( value, element ) > 0;
}
return value.length > 0;
});
/**
* 验证手机号
*/
jQuery.validator.addMethod("phone", function(value, element, param) {
return this.optional(element) || /^1[1-9]\d{9}$/.test(value);
}, $.validator.format("请输入正确的手机号"));
/**
* 验证固定电话号
*/
jQuery.validator.addMethod("tel", function(value, element, param) {
return this.optional(element) || /^(0\d{2,3})?(\d{7,8})((\d{3,}))?$/.test(value);
}, $.validator.format("请输入正确的固定电话号"));
/**
* 验证固定电话或手机号
*/
jQuery.validator.addMethod("telOrPhone", function(value, element, param) {
return this.optional(element) || /^1[1-9]\d{9}$/.test(value) || /^(0\d{2,3})?(\d{7,8})((\d{3,}))?$/.test(value);
}, $.validator.format("请输入正确的电话号码"));
/**
* 验证邮箱
*/
jQuery.validator.addMethod("email2", function(value, element, param) {
return this.optional(element) || /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(value);
}, $.validator.format("请输入正确的邮箱"));
/**
* 验证身份证号
*/
jQuery.validator.addMethod("cardID", function(value, element, param) {
// 15位和18位身份证号码的正则表达式
var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
// 如果通过该验证，说明身份证格式正确，但准确性还需计算
if (regIdCard.test(value)) {
if (value.length == 18) {
// 将前17位加权因子保存在数组里
var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
// 这是除以11后，可能产生的11位余数、验证码，也保存成数组
var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2);
// 用来保存前17位各自乖以加权因子后的总和
var idCardWiSum = 0;
for (var i = 0; i < 17; i++) {
idCardWiSum += value.substring(i, i + 1) * idCardWi[i];
}
// 计算出校验码所在数组的位置
var idCardMod = idCardWiSum % 11;
// 得到最后一位身份证号码
var idCardLast = value.substring(17);
// 如果等于2，则说明校验码是10，身份证号码最后一位应该是X
if (idCardMod == 2) {
return this.optional(element) || (idCardLast == "X" || idCardLast == "x");
} else {
// 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
return this.optional(element) || idCardLast == idCardY[idCardMod];
}
}
} else {
return this.optional(element) || regIdCard.test(value);
}
}, $.validator.format("请输入正确的身份证号"));
/**
* 验证银行卡号
* Luhm校验规则：16位银行卡号（19位通用）:
* 1.将未带校验位的 15（或18）位卡号从右依次编号 1 到 15（18），位于奇数位号上的数字乘以 2。
* 2.将奇位乘积的个十位全部相加，再加上所有偶数位上的数字。
* 3.将加法和加上校验位能被 10 整除。
*/
jQuery.validator.addMethod("bankNo", function(value, element, param) {
if (value.length < 16 || value.length > 19) {
// 校验失败 银行卡号长度必须在16到19之间
$(element).data('error-msg', '银行卡号长度必须在16到19之间');
return this.optional(element) || false;
}
// 全数字
var num = /^\d*$/;
if (!num.exec(value)) {
// 校验失败 银行卡号必须全为数字
$(element).data('error-msg', '银行卡号必须全为数字');
return this.optional(element) || false;
}
// 开头6位
var strBin = "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
if (strBin.indexOf(value.substring(0, 2)) == -1) {
// 校验失败 银行卡号开头6位不符合规范
$(element).data('error-msg', '银行卡号开头6位不符合规范');
return this.optional(element) || false;
}
// 取出最后一位（与luhm进行比较）
var lastNum = value.substr(value.length - 1, 1);
// 前15或18位
var first15Num = value.substr(0, value.length - 1);
var newArr = new Array();
// 前15或18位倒序存进数组
for (var i = first15Num.length - 1; i > -1; i--) {
newArr.push(first15Num.substr(i, 1));
}
// 奇数位*2的积 <9
var arrJiShu = new Array();
// 奇数位*2的积 >9
var arrJiShu2 = new Array();
// 偶数位数组
var arrOuShu = new Array();
for (var j = 0; j < newArr.length; j++) {
if ((j + 1) % 2 == 1) {
// 奇数位
if (parseInt(newArr[j]) * 2 < 9)
arrJiShu.push(parseInt(newArr[j]) * 2);
else
arrJiShu2.push(parseInt(newArr[j]) * 2);
} else
// 偶数位
arrOuShu.push(newArr[j]);
}
// 奇数位*2 >9 的分割之后的数组个位数
var jishu_child1 = new Array();
// 奇数位*2 >9 的分割之后的数组十位数
var jishu_child2 = new Array();
for (var h = 0; h < arrJiShu2.length; h++) {
jishu_child1.push(parseInt(arrJiShu2[h]) % 10);
jishu_child2.push(parseInt(arrJiShu2[h]) / 10);
}
// 奇数位*2 < 9 的数组之和
var sumJiShu = 0;
// 偶数位数组之和
var sumOuShu = 0;
// 奇数位*2 >9 的分割之后的数组个位数之和
var sumJiShuChild1 = 0;
// 奇数位*2 >9 的分割之后的数组十位数之和
var sumJiShuChild2 = 0;
var sumTotal = 0;
for (var m = 0; m < arrJiShu.length; m++) {
sumJiShu = sumJiShu + parseInt(arrJiShu[m]);
}
for (var n = 0; n < arrOuShu.length; n++) {
sumOuShu = sumOuShu + parseInt(arrOuShu[n]);
}
for (var p = 0; p < jishu_child1.length; p++) {
sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]);
sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]);
}
// 计算总和
sumTotal = parseInt(sumJiShu) + parseInt(sumOuShu) + parseInt(sumJiShuChild1) + parseInt(sumJiShuChild2);
// 计算Luhm值
var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;
var luhm = 10 - k;
if (lastNum == luhm && lastNum.length != 0) {
// Luhm验证通过
return this.optional(element) || true;
} else {
// 银行卡号必须符合Luhm校验
$(element).data('error-msg', '请输入正确的银行卡号');
return this.optional(element) || false;
}
}, function(params, element) {
// $.validator.format("请输入正确的银行卡号")
return $(element).data('error-msg');
});
/**
* 校验日期格式 yyyy-MM-dd, yyyy/MM/dd
*/
jQuery.validator.addMethod("isDate", function(value, element, param) {
var reg = value.match(/^(\d{1,4})(-|\/)(\d{1,2})(-|\/)(\d{1,2})$/);
if (reg == null)
return false;
var date = new Date(reg[1], reg[3] - 1, reg[5]);
var result = (date.getFullYear() == reg[1] && (date.getMonth() + 1) == reg[3] && date.getDate() == reg[5]);
return this.optional(element) || result;
}, $.validator.format("请输入正确的日期"));
/**
* 长日期格式 "YYYY-MM-DD HH:MM:SS" || "YYYY/MM/DD HH:MM:SS"
*/
jQuery.validator.addMethod("isDatetime", function(value, element, param) {
// var result = value.match(/^(d{4})(-|\/)(d{1,2})2(d{1,2}) (d{1,2}):(d{1,2}):(d{1,2})$/);
var result = value.match(/^(\d{4})(-|\/)(\d{1,2})(-|\/)(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
if (result == null)
return false;
var date = new Date(result[1], result[3] - 1, result[5], result[6], result[7], result[8]);
var result = (date.getFullYear() == result[1]
&& (date.getMonth() + 1) == result[3]
&& date.getDate() == result[5]
&& date.getHours() == result[6]
&& date.getMinutes() == result[7] && date.getSeconds() == result[8]);
return this.optional(element) || (result);
}, $.validator.format("请输入正确的日期"));
/**
* 长日期格式 "YYYY-MM-DD HH:MM" || "YYYY/MM/DD HH:MM"
*/
jQuery.validator.addMethod("isDatetime2", function(value, element, param) {
var result = value.match(/^(\d{4})(-|\/)(\d{1,2})(-|\/)(\d{1,2}) (\d{1,2}):(\d{1,2})$/);
if (result == null)
return false;
var date = new Date(result[1], result[3] - 1, result[5], result[6], result[7]);
var result = (date.getFullYear() == result[1]
&& (date.getMonth() + 1) == result[3]
&& date.getDate() == result[5]
&& date.getHours() == result[6]
&& date.getMinutes() == result[7]);
return this.optional(element) || (result);
}, $.validator.format("请输入正确的日期"));
var FormValidation = function () {
var __slice = [].slice;
var handleValidation = function(form) {
// var formValidation = $('.formValidation');
var formValidation = $(form);
// var error = $('.alert-danger', formValidation);
// var success = $('.alert-success', formValidation);
var error = $(formValidation);
var success = $(formValidation);
formValidation.validate({
// 进行调试模式（表单不提交）
// debug : true,
// 用什么标签标记错误，默认是 label
errorElement: 'span',
// 指定错误提示的 css 类名，可以自定义错误提示的样式
errorClass: 'help-block help-block-error',
// 提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点
focusInvalid: false,
// 忽略某些元素不验证
ignore: "",
rules: {
// 名字 name：标签name属性值
name : {
// 最小长度
minlength : 2,
// 是否必填
required2 : true
},
// 邮箱 name：标签email属性值
email : {
required : false,
// 验证类型
email2 : true
},
// 验证十进制数字（包括小数的）
number : {
required2 : true,
number : true
},
number1 : {
required2 : true,
number : true
},
number2 : {
required2 : true,
number : true
},
number3 : {
required2 : false,
number : true
},
// 整数
digits : {
required2 : true,
digits : true
},
digits1 : {
required2 : true,
digits : true
},
digits2 : {
required2 : true,
digits : true
},
digits3 : {
required : false,
digits : true
},
digits4 : {
required : false,
digits : true
},
digits5 : {
required : false,
digits : true
},
// 电话
phone : {
required2 : true,
phone : true
},
phone1 : {
required : false,
phone : true
},
phone2 : {
required : false,
phone : true
},
tel : {
required : false,
tel : true
},
telOrPhone : {
required2 : true,
telOrPhone : true
},
telOrPhone1 : {
required : false,
telOrPhone : true
},
// 身份证号 cardID：标签name属性值
cardID : {
// 是否必填
required : false,
// 验证类型
cardID : true
},
bankCardNo : {
required2 : true,
bankNo : true
},
bankCardNo1 : {
required : false,
bankNo : true
},
require : {
required2 : true
},
require1 : {
required2 : true
},
string : {
required2 : true
},
string1 : {
required2 : true
},
string2 : {
required2 : true
},
string3 : {
required2 : true
},
string4 : {
required2 : true
},
string5 : {
required2 : true
},
string6 : {
required2 : true
},
// 选择框
select : {
required2 : true
},
select1 : {
required2 : true
},
select2 : {
required2 : true
},
select3 : {
required2 : true
},
date : {
required2 : true,
isDate : true
},
date1 : {
required2 : true,
isDate : true
},
date2 : {
required2 : true,
isDate : true
},
date3 : {
required2 : true,
isDate : true
},
date4 : {
required2 : true,
isDate : true
},
datetime : {
required2 : true,
isDatetime2 : true
},
datetime1 : {
required2 : true,
isDatetime2 : true
},
datetime2 : {
required2 : true,
isDatetime2 : true
},
from : {
required2 : true
},
to : {
required2 : true
}
},
messages : {
name : {
required2 : "请输入用户名",
minlength : "用户名必需由两个汉字组成"
},
email : "请输入一个正确的邮箱",
phone : "请输入一个正确的手机号",
phone1 : "请输入一个正确的手机号",
phone2 : "请输入一个正确的手机号",
telOrPhone : {
required2 : "请输入一个正确的固定电话或手机号"
},
cardID : "请输入正确的身份证号",
bankCardNo : {
required2 : "请输银行卡号",
minlength : "银行卡号长度最少16位"
},
bankCardNo1 : {
minlength : "银行卡号长度最少16位"
},
topic : "请选择两个主题",
require : "该字段为必填",
require1 : "该字段为必填",
select : "该字段为必选项",
select1 : "该字段为必选项",
select2 : "该字段为必选项",
select3 : "该字段为必选项",
number : "请输入数字",
number1 : "请输入数字",
number2 : "请输入数字",
digits : "请输入整数",
digits1 : "请输入整数",
digits2 : "请输入整数",
string : "请输入内容",
string1 : "请输入内容",
string2 : "请输入内容",
string3 : "请输入内容",
string4 : "请输入内容",
string5 : "请输入内容",
string6 : "请输入内容",
date : "请选择日期",
date1 : "请选择日期",
date2 : "请选择日期",
date3 : "请选择日期",
date4 : "请选择日期",
datetime : "请选择日期",
datetime1 : "请选择日期",
datetime2 : "请选择日期",
},
// display error alert on form submit
// 当未通过验证的表单提交时，可以在该回调函数中处理一些事情。该回调函数有两个参数：第一个为一个事件对象，第二个为验证器
invalidHandler: function (event, validator) {
success.hide();
error.show();
App.scrollTo(error, -200);
},
// 指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement: function (error, element) {
var icon = $(element).parent('.input-icon').children('i');
icon.removeClass('fa-check').addClass("fa-warning");
// 错误提示位置
if ($(element).parents('.modal').length > 0) {
icon.attr("data-original-title", error.text()).tooltip({'container': $(element).parents('.modal')});
} else {
icon.attr("data-original-title", error.text()).tooltip({'container': 'body'});
}
},
// 可以给未通过验证的元素加效果、闪烁等
highlight: function (element) {
// set error class to the control group
$(element).closest('.form-group').removeClass("has-success").addClass('has-error');
},
// 通过验证时触发
unhighlight: function (element) {
// 对不必填的校验移除样式
$(element).closest('.form-group').removeClass("has-success").removeClass('has-error');
$(element).parent('.input-icon').children('i').removeClass('fa-check').removeClass("fa-warning");
},
success: function (label, element) {
var icon = $(element).parent('.input-icon').children('i');
$(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
icon.removeClass("fa-warning").addClass("fa-check");
},
submitHandler: function (form) {
success.show();
error.hide();
// submit the form
form[0].submit();
}
});
}
return {
init : function(form) {
handleValidation(form);
},
// 校验表单
form : function(formEl) {
formEl = formEl || '.formValidation';
var status = $(formEl).validate().form();
if (!status) {
// 判断是否是modal窗口
var modal = $(formEl).parents('.modal');
// 是modal窗口
if (modal.length > 0) {
var modalBody = modal.find(".modal-body");
modalBody.animate({
scrollTop: $('.has-error').offset().top - modalBody.offset().top + modalBody.scrollTop()
}, 'slow');
}
}
return status;
},
element : function(formEl, element) {
if (arguments.length > 0) {
if (arguments.length >= 2) {
formEl = arguments[0];
element = arguments[1];
} else {
element = arguments[0]
formEl = $(element).closest('form').length > 0 ? "#" + $(element).closest('form')[0].id : '.formValidation';
}
var status = $(formEl).validate().element(element);
if (!status) {
// 滚动到当前元素位置
FormValidation.scrollTo($(element), 0);
}
return status;
}
return false;
},
// 把前面验证的 FORM 恢复到验证前原来的状态
resetForm : function(formEl) {
formEl = formEl || '.formValidation';
$(formEl).validate().resetForm()
},
scrollTo: function(el, offeset) {
var pos = (el && el.size() > 0) ? el.offset().top : 0;
if (el) {
if ($('body').hasClass('page-header-fixed')) {
pos = pos - $('.page-header').height();
} else if ($('body').hasClass('page-header-top-fixed')) {
pos = pos - $('.page-header-top').height();
} else if ($('body').hasClass('page-header-menu-fixed')) {
pos = pos - $('.page-header-menu').height();
}
pos = pos + (offeset ? offeset : -1 * el.height());
}
$('html,body').animate({
scrollTop: pos
}, 'slow');
},
};
}();
jQuery(document).ready(function() {
FormValidation.init('.formValidation');
});
//重写
//$.extend($('#editSystemForm').validate().settings.rules, {
// string : {
// required : true
// }
//});
//$.extend($('#editSystemForm').validate().settings.messages, {
// string : "请选择完成度",
//});
类似资料：