jquery.validate 添加验证规则方法_用了validator如何加上required为true_风行傲天的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

正直的跑步鞋 · 深圳口述史 | ...· 1 周前 ·

温暖的小马驹 · 广州版宋山木被指以培训为幌子 ...· 3 周前 ·

玩滑板的键盘 · 专利-电气与控制工程学院· 1 月前 ·

高大的蟠桃 · 国内首架大型双发长航时无人机成功首飞-新华网· 3 月前 ·

酒量小的骆驼 · history4_抖抖音· 1 年前 ·

/**
* 必填项,空格不行
*/
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 : "请选择完成度",
//});

在检索结果表格中Input需要验证时，由于是行数是动态的，所以要动态的增加验证规则，怎么加最快呢。 1.下面的方法在20条数据时，如果每条有4个Input时，需要1秒左右的时候 function addRules1(str, tableId){ for(var i=0;i... iView表单组件使用async- valid a tor 验证器对表单域中数据进行验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。完整的验证规则请参照开源项目 async- valid a tor 。验证方... 为防止用户犯错，尽可能让用户更早地发现并纠正错误。 Element中Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。注意：prop对应表单域 model 字段，使用 valid ate 方法时，该属性是必填的。在data里配置要校验字段和校验规则： required : true ；message:""不符合校验规则时的提示信息；trigger:""校验触发方式设置除此之外，我们还可以使用 valid a tor 验证器. (1) required : true 必输字段 (2)remote:"check.php" 使用ajax 方法调用check.php 验证输入值 (3)email: true 必须输入正确格式的电子邮件 (4)url: true 必须输入正确格式的网址 (5)d ate : true 我们主要使用响应式表单来进行 valid a tor 方法验证首先在 @NgModule 中导入 @angular/forms 库中的 ReactiveFormsModule： app.module.ts import { ReactiveFormsModule } from '@angu jQuery . valid a tor .addMethod("regex", //addMethod第1个参数: 方法名称 function(value,element,params){//addM 我需要一些帮助 . 我正在尝试创建一个包装下拉值的自定义组件，并根据是否需要显示/隐藏默认的--Select--选项 . (我想稍后将其他自定义逻辑应用于此组件)如何通过父级的被动形式设置我的自定义控件中的 Valid a tor . required ？我是Angular的新手，但不是AngularJS父页面html：id="siteType"formControlName="code"[items]="... 今天公司突然提出要将页面中必填的输入框设置成红色，开始是想省事点直接到页面上在必填的输入框中加入样式，这样需要一个一个也页面的改，而且感觉写的很死！后来经过讨论决定采用一种灵活的方式加入样式。经过一天的努力终于成功找到解决办法实现代码如下，虽然代码不长但是却花费了我一天的时间，在里面我又学到了许多知识。通用方法代码： /*** 将页面中的必填选项输入框... struts框架在提供了 valid a tor 的验证框架， valid a tor 负责为页面的form提供数据验证， valid a tor 提供了很多内置的验证规则，提供了灵活的配置验证规则下面简单的介绍下怎么使用 valid ate 加入到你的页面中去1）首先你的 actionFrom 应该继承 valid a tor from (或者 valid atrorActionFrom,为了不把这篇简单的介绍搞的那么