validate表单验证

一、完善的配置

"VALIDATION_OPTION": function(){
		return {
			onfocusout: function(element) {
				$(element).closest(‘.form-group‘).removeClass(‘has-error‘);
				$(element).valid();
			},
			onkeyup: function(element) {
				$(element).closest(‘.form-group‘).removeClass(‘has-error‘);
				$(element).valid();
			},
			onclick:function(element) {
				$(element).closest(‘.form-group‘).removeClass(‘has-error‘);
				$(element).valid();
			},
			errorElement: ‘div‘,
			errorClass: ‘help-block has-error‘,
			highlight: function (error,element) {
				$(error).closest(‘.form-group‘).addClass(‘has-error‘);
			},
			errorPlacement: function(error, element) {
				element.popover({
					content:error.outerHTML(),
					html:true,
					placement:"bottom",
					trigger:"focus"
				});
			},
			success: function (error,element) {
				$(element).popover(‘destroy‘);
				$(error).closest(‘.form-group‘).removeClass(‘has-error‘);//.addClass(‘has-info‘);
			},
			messages : {
				"required" : "此项为必填.",
				"email" : "请输入一个合法的email地址",
				"url" : "请输入一个合法的url地址.",
				"date" : "请输入一个合法的日期.",
				"number" : "请输入一个合法的数字.",
				"digits" : "请输入一个正整数.",
				"mobile" : "请输入一个合法的手机号码",
				"phone" : "请输入一个合法的电话号码",
				"pwd" : "密码只能是6-16位的数字字母下划线的组合.",
				"isDate" : "请输入正确的日期(格式为xxxx-xx-xx)",
				"maxlength": $.validator.format("此项最多只能输入{0}个字符"),
				"minlength": $.validator.format("此项至少需要输入{0}个字符"),
		        "rangelength": $.validator.format("此项需要输入{0}到{1}个字符"),
		        "range": $.validator.format("Please enter a value between {0} and {1}."),
		        "max": $.validator.format("Please enter a value less than or equal to {0}."),
		        "min": $.validator.format("Please enter a value greater than or equal to {0}.")
			}
		};
	},

  

$.validator.addMethod("mobile",function(value,element){
	if( !value )return true;
	return /^(?:13|15|17|18)[0-9]{9}$/.test(value);
});

$.validator.addMethod("pwd",function(value,element){
	var a = /^[a-zA-Z_0-9]{6,16}$/.test(value);
	return /^[a-zA-Z_0-9]{6,16}$/.test(value);
});

$.validator.addMethod("phone",function(value,element){
	if( !value )return true;
	return /^(?:[0-9]{3,4}-)?[0-9]{7,8}$/.test(value);
});
$.validator.addMethod("digits",function(value,element){
	if( !value )return true;
	return this.optional(element) || /^\d+$/.test(value);
});
$.validator.addMethod("number",function(value,element){
	if( !value )return true;
	return this.optional(element) || /^\d+(\.\d+)?$/.test(value);
});

$.validator.addMethod("isDate", function(value, element){
	if( !value )return true;
	var ereg = /^(\d{1,4})(-)(\d{1,2})(-)(\d{1,2})$/;
	var r = value.match(ereg);
	if (r == null) return false;
	var d = new Date(r[1], r[3] - 1, r[5]);
	var result = (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[5]);
	return this.optional(element) || (result);
},"请输入正确的日期(格式为xxxx-xx-xx)");

$.validator.messages = $.extend($.validator.messages,Const.VALIDATION_OPTION().messages);

注意:1、后续方法中的  if( !value )return true;  代码可以完成如果输入可以为空,在未输入值或者值被清空时,不会验证

   2、 onfocusout、onkeyup、onclick三个参数的配置可以确保输入框值变化的时候进行验证,避免上一次验证的结果残留下来

     3、isDate时间格式判断的时候,会与其他的时间插件冲突,导致错误提示不会出现

时间: 2024-10-10 01:58:08

validate表单验证的相关文章

【干货】Laravel --Validate (表单验证) 使用实例

前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验证规则来验证输入的 HTTP 请求.要掌握 Laravel 强大的验证特性,让我们先看一个完整的验证表单并返回错误信息给用户的例子. 在这之前如果您是首次接触 Laravel 而且并不知道路由如何跳转到指定的控制器 可以查看博主的Restfulapi或者Laravel官网对路由的介绍,在这里就不做介

summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http://www.cnblogs.com/jingmin/p/6592325.html 2.在使用summernote编辑完文本,使用validate进行表单验证出现问题的解决方案 小编在使用summernote富文本编辑器编辑完文章内容,并且上传了图片,对于编写的内容使用了validate进行了表单验

基于jQuery的Validate表单验证

表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋友问我要一个表单的验证,所以我就稍微整理了一下~  基本上有了这个表单验证插件,基本上一些常用的验证都可以搞定了~ 如果搞不定,没关系,我们还可以基于Validate来写一个自己的验证插件, 我把它取名为message_zh.js,我们可以在里面扩展自己需要的验证~~ 既然Validate是基于jQ

jquery validate 表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

jQuery Validate 表单验证插件----自定义校验结果样式

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"

jQuery Validate 表单验证插件----自定义一个验证方法

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"

validate表单验证插件

1.引入validate.js包 <script src="xx/xx/jquery.validate.min.js"></script> 2.表单验证 //表单验证 $("#formSubmit").validate({ debug:true, //调试模式,取消submit默认的提交功能 rules:{ name:{ required:true, checkEmpty:true }, email:{ required:true, emai

jquery validate表单验证插件-推荐

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的

jquery.validate 表单验证

这个是我星期六的时候研究了一天的成果,虽然效率有点低吧,自学能力有点弱,不过自己还是很满意了吧,现在能自己套到程序中并成功运行,达到自己想要的效果 首先引用 Jquery Jquery.Vaildate 自定义方法,正则验证 jQuery.validator.addMethod("isPhone", function(value, element) { var length = value.length; var mobile = /^[1][345789]\d{9}$/; retur

【开发】Form Validate 表单验证 扩展应用

目录: ★.文本输入框(easyui-textbox) ★.数字框(easyui-numberbox) ★.时间(easyui-datebox) ★.文本域(easyui-textbox easyui-validatebox) ★.下拉框(easyui-combobox) 特别说明: 验证机制的关闭和启用.可以采用 data-options="novalidate:true" 先关闭元素的验证机制,再在表单提交之际开启验证.这样可以避免用户在第一次看到表单时就全显示红色提示的情形. 示