extend jquery validate myValidate 表单验证

最新推荐文章于 2019-05-26 14:57:41 发布
最新推荐文章于 2019-05-26 14:57:41 发布
阅读量357 收藏
点赞数
文章标签： jQuery EXT json CSS prototype ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sharpwave/article/details/83698008
版权
虽然jquery validate 已经算是很好用了，不过为了更进一步的方便应用真正实现 html和js 的隔离，我花了周末两天时间 继承jquery的validate 写了比较方便的验证，使用方法多说不宜，直接看代码吧 

优点 
 1 使用者直接在js里 配置自己的 验证信息和提示信息用json格式 
config.rules验证规则
config.messages 验证提示信息
config.help  获得焦点时的 tip  
2 使用者不用自己在写 div lable 或者span 程序动态生成
3 使用时 只需要#('form').myValidate(configs); 即可 非常方便
4 支持 select radio checkbox 的验证同时  支持  正整数（自然数） 验证 更多业务逻辑请自己添加验证方法





/*
　*　validate　0.1
　*　Copyright　(c)　2010 LiboLi
　*　Date:　2010-08-21
　*　use this validation maybe easier to kown jQuery validation
　*/

(function($){ 
	jQuery.fn.myValidation=function(options){
    // init prototype with attributes and method
		if(!options)
			options={};
		var scope=this;
		this.rules=options.rules;
		this.messages=options.messages;
		this.help=options.help;
     //init checkbox and radio with a flag
		this.configs={'checkbox':{},'radiobox':{}};
     // this method to find the span element which follow form elements  ,the default count of 50 for some OOM debuger
		this.spanNext=function(spanElement){
			var i=0
			while(spanElement.attr('tagName')!='SPAN'&&i<50){
						i++;
		        		spanElement=spanElement.next();
		        	}
		       return spanElement; 	
		}

    //this method 
		this.each(function(){
			//bind focus blur
			var params=["input","select"];
			for(var o in params){
				$(this).find(params[o]).bind('focus',function(e){
					var temp=scope.spanNext($(this).next())
					temp.html(this.title);
					temp.removeClass()
					temp.addClass("info");
				}).bind('blur',function(e){
					var temp=scope.spanNext($(this).next())
					if(this.title==temp.html())
		           	 	temp.html("");
		           	temp.removeClass();

		           	if(temp.find('label').length==0){
		           		temp.html("...");
		           		temp.addClass("yes");
		           	}else{
		           		temp.removeClass();
		           	}

				});
			}

			//setAttribute for form elements
	    	for (i = 0, max = this.elements.length; i < max; i++) {
	    		e = this.elements[i];
	    		eName = e.name;

	    		var errorElement=document.createElement("span");
	    		  errorElement.className="error";
	    		  errorElement.setAttribute("for",eName);

           		 if(scope.help[eName])
			      		e.title=scope.help[eName];

		    	switch(e.type){
		    		case 'checkbox':
		    			var temp=scope.configs.checkbox[eName];
		    			if(temp==null){
		    				scope.configs.checkbox[eName]=eName;
		    				e.parentNode.appendChild(errorElement);	

		    			}
		    			break;
		    		case 'radio':

		    			var temp=scope.configs.radiobox[eName];
		    			if(temp==null){
		    				scope.configs.radiobox[eName]=eName;
		    				e.parentNode.appendChild(errorElement);	

		    			}
		    			break;
		    		case 'button':
		    		//	debugger
		    			break;
		    		case 'submit':
		    		//	debugger;
		    			break;
		    		case 'reset':
		    		//	debugger
		    			break;	
		    		default:
		    				e.parentNode.appendChild(errorElement);	



		    	}
            }
	    });

		  //validate the positive integer

	    jQuery.validator.addMethod("positiveValid", function(value, element, param){
	        return this.optional(element) || /^\+?[1-9][0-9]*$/.test(value);
        });	    jQuery.validator.classRuleSettings.positiveValid={positiveValid:true,messages:{positiveValid:"Please enter a valid digits number."}}


		var result = jQuery.extend({}, this.validate( {
		    	 messages:this.messages ,
		    	 rules:this.rules,
		        errorPlacement: function(error, element) {
		        	var tempEle=scope.spanNext(element.next());
		                tempEle.html("");
		            error.appendTo(tempEle);
		        },
		        focusCleanup: false,
		        debug: false,
		       // errorElement:'span',
		        submitHandler: function(form) {
		            form.submit();
		        }
		       }));

		       if(result.valid!=null)
				return result.valid();

	};

})(jQuery);  

$("form['validate'=true]").myValidation();


html 代码 调用如下 


<html> 
<head>
<script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.metadata.js"></script>
<script type="text/javascript" src="jquery/jquery.validate.js"></script>
<!-- <script type="text/javascript" src="<c:url value="/resource/js/common/myValidate.js"/>"></script>  #FFF2E9  -->
<script type="text/javascript" src="jquery.myValidate.js"></script>

<style type="text/css">

 .error {
    color: red;
    font-size: 12px;
    font-weight: normal;
    margin-top: 1px;
    position:float;
    background: url(images/icon-error.gif) no-repeat 20px center;

}
 .info {
    color: red;
    font-size: 12px;
    font-weight: normal;
    margin-top: 1px;
    background: url(images/icon-info.gif) no-repeat 2px center height:16 width(16);
}
 .yes {
    color: red;
    font-size: 12px;
    font-weight: normal;
    margin-top: 1px;
    background: url(images/icon-yes.gif) no-repeat 2px center;
}

</style>

<style type="text/css">
.tableRt {
    width: 80%;
    background-color: #C0C0C0;
    border-style: outset;
    border-color: #FFFFFF;
    float: center;
    padding: 2;
    border-width: 0
}
.tableOut {
    width: 80%;
    background-color: #DFE6EE;
    border-style: outset;
    border-color: #DFE6EE;
    float: left;
    padding: 5;
    border-width: 1
}
.tableTitleTr {
    font-family: "Verdana", "Arial";
    font-size: 14px;
    color: #FFFF00;
    background-color:#5A8ECE;
}
.active_buttonHR {
    cursor:pointer;
    background-color:#EDF1F3;
    border-top:1px solid #FFFFFF;
    border-left:1px solid #FFFFFF;
    border-bottom:1px solid #6B8896;
    border-right:1px solid #6B8896;
    font-family: "Tahoma"; color:#000000; font-size:9pt;
    line-height:100%;
    text-decoration:none;
    color:#000000;
    padding:2px 2px 2px 2px
}
/*mouse over button style*/
.active_buttonHR_mouseover {
    cursor: pointer;
    background-color:#DEE9F8;
    border-top:1px solid #BCC6CD;
    border-left:1px solid #BCC6CD;
    border-bottom:1px solid #FFFFFF;
    border-right:1px solid #FFFFFF;
    font-family: "Tahoma"; color:#0064FF; font-size:9pt;
    line-height:100%;
    text-decoration:none;
    color:#202EEA;
    padding:2px 2px 2px 2px

}


</style>

<script type="text/javascript">
$().ready(function(){

	var configs={};
	configs.rules={'orgId':{required:true,positiveValid:true}};
	configs.messages={'orgId':{required:"must input ",positiveValid:'please input positive'}};
	configs.help={orgId:'helpTitle'};
	configs.rules.schoolName={required:true}
	configs.messages.schoolName={required:"please select"}
	configs.help.schoolName="schoolName help";

	configs.rules.email={required:true,email:true}
	configs.messages.email={required:"please input email",email:'valid email'}
	configs.help.email="email help";

	configs.rules.sex={required:true}
	configs.messages.sex={required:"please select sex"}
	configs.help.sex="sex help";

	configs.rules.address={required:true}
	configs.messages.address={required:"please select address"}
	configs.help.address="address help";

	 $("form[validate=true]").myValidation(configs);
//	 $("#form1").myValidation(configs);
});

</script>

</head>  
<body>
    <table>
        <tr>
            <td>
                 <table align="center" border =1 width=500>   
                      <form action="" name="form1" id="form1" method="POST" validate=true>   

                          <tr>   
                              <td class="tableTitleTr" align="right">orgId : </td>
                              <td>
                              <input name="orgId"  type="text"  class="text"/>
                              </td>   
                          </tr>   

                          <tr>   
                              <td class="tableTitleTr" align="right">schoolName : </td>
                              <td>
                              <select name="schoolName" >
                              	<option value="" selected>select</option>
                              	<option value="1">university</option>
                              	<option value="2">collage</option>
                              </select>
                              </td>   
                          </tr>   
                          <tr>   
                              <td class="tableTitleTr" align="right">email : </td>
                              <td><input  name="email"  type="text" />
                              </td>   
                          </tr>  

                           <tr>   
                              <td class="tableTitleTr" align="right">sex : </td>
                              <td>
                              <input  name="sex"  type="radio" value="1">man</input>
                              <input  name="sex"  type="radio" value="0">woman</input>
                              </td>   
                          </tr>  

                           <tr>   
                              <td class="tableTitleTr" align="right">address : </td>
                              <td>
                              <input  name="address"  type="checkbox" value="1">address1</input>
                           	 	<input  name="address"  type="checkbox" value="2">address2</input>

                              </td>   
                          </tr>  
                          <tr>   
                              <td class="tableTitleTr" align="right">Test : </td>
                              <td>

                             <input type="text" name="text"><span class="error">xxx</span>

                              </td>   
                          </tr>  


                          <tr>   
                              <td colspan="2" align="center" ><input class="active_buttonHR" onmouseover=javascript:this.className='active_buttonHR_mouseover' onmouseout=javascript:this.className='active_buttonHR' type="submit" value="Add" /></td>   
                          </tr>        
                      </form>   
                </table>     
            </td>
        </tr>
    </table>   
</body>  
</html>


唉 懒得写注释了，自己看吧，哪看不懂就留言吧 哈哈 哪不懂了就先googlr下 如何写jquery插件，附件是例子 直接 本地运行 validateDemo.html便可见效果，由于哥们对css不是很熟悉 所以样式难看了点，只要稍微改下即可
欢迎提出宝贵意见 谢谢
sharpwave
关注
jquery.validate.extend.js
08-30
jquery.validate.extend.js
[jquery] jquery validate表单验证插件的基本使用方法及功能拓展
qq_14993591的博客
10-14 456
1 表单验证的准备工作 1.点击表单项，显示帮助提示　 2.鼠标离开表单项时，开始校验元素　 3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒 2 jquery validate插件实现表单验证的小例子 在引入jquery validate插件前，需要先引入它所依赖的文件jquery.js 在jquery.validate.extend.js文件中对jquery validate原有的功能进行了扩展，并修改了相关默认选项 <script src="jquery.js"></scr
关于JQuery Validate的那点事
代码是糖，甜到哀伤
01-21 345
项目中表单提交需要表单验证，所以用了JQuery Validate，昨天遇到了意见及其坑的事情，JQuery Validate就是不通过，最后仔细看了自己的代码，发现了问题。 错误版本 <script type="text/javascript" src="${contextPath}/js/epaylinks/function/e_replaceCard.js"></script><!--jq
jQuery.validate学习笔记
倔强的晓奇
04-24 5271
jQuery的validate验证功能十分强大，但是能够自定义验证方法更具有灵活性，所以我只是把自定义的说明一下。 添加自定义方法是使用jquery的jQuery.validator.addMethod方法，这个方法的完整定义如下： jQuery.validator.addMethod("myValidateName", function(value, element, param) { //
jquery validate表单验证插件
10-21
jQuery Validate是一款广泛使用的jQuery插件，专门用于前端表单验证。它能够简化JavaScript验证代码的编写，提高开发效率，并保证用户输入的有效性。下面详细介绍该插件的核心知识点和使用方法。 首先，表单验证是...
jQuery Validate表单验证插件实现代码
10-19
以下是对jQuery Validate表单验证插件实现代码的详细解析： 1. **验证准备**： 在开始编写验证逻辑之前，你需要创建一个包含待验证表单元素的HTML结构。这通常包括输入字段、标签和其他必要的表单元素。同时，为了...
深入学习jQuery Validate表单验证（二）
11-23
《深入学习jQuery Validate表单验证（二）》 在本文中，我们将深入探讨jQuery Validate插件，这是一个强大的JavaScript库，用于实现高效的表单验证。它提供了丰富的验证规则和自定义错误消息，使得创建用户友好的...
jQuery Validate表单验证插件的基本使用方法及功能拓展
10-20
jQuery Validate是一个广泛使用的jQuery插件，它简化了前端表单验证的过程。以下是对jQuery Validate插件基本使用方法及功能拓展的详细知识点。 ### 表单验证的重要性 表单验证不仅是用户界面友好的重要组成部分，...
validate的用法
fdk2zhang的博客
02-13 4万+
引入 &amp;amp;amp;lt;script type=&amp;amp;quot;text/javascript&amp;amp;quot; src=&amp;amp;quot;js/jquery-1.8.3.min.js&amp;amp;quot; &amp;amp;amp;gt;&amp;amp;amp;lt;/script&amp;amp;amp;gt; &amp;amp;amp;lt;script type=&a
表单校验插件Validate.js&自定义规则校验
henrly的博客
05-26 5301
一、jquery插件 网络上有许多成熟的插件供使用者参考，插件就是将jquery实现的常用操作进行封装，封装后的小框架就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而这些复杂功能的背后实现我们可以不必懂。 jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 U...
validate.js使用方法
Islandww的博客
05-05 3705
菜鸟教程 :http://www.runoob.com/jquery/jquery-plugin-validate.html 相关js css可以在这里下载 // 在键盘按下并释放及提交后验证提交表单 $(".myfrom").validate({ rules:{ title : { required: true }, newsdate :　{ required
jQuery-Validate验证插件的使用步骤详解
热门推荐
武哥聊编程
05-25 8万+
我们知道，用户在注册的时候，会有个表单页面，然后有些选项是必填的，有些要填的内容是有规范的，这些都要在用户提交之前进行验证才行，如果不符合要求，需要在右边显示一个友好的提示，让用户修改。 　　记得以前在学习Servlet的时候，实现一个简单的用户注册功能的验证是在后台做的，有些用了正则表达式，有些没用，但是都比较简单。流程是这样的，前台提交表单数据后，servlet获取数据
jquery validate使用和扩展规则
被殴打的攻城狮
12-08 3653
index.html {required:true,minlength:5,equalTo:'#password'} 在class里面如果需要使用{}必须加metadata.js --> 自定义扩展 --> label.error { padding-left: 2px; padding-bottom: 2px; font-weight: bold;
注解开发mybatis的mapper属性和字段不对应问题@Results—resultMap
Agly_Charlie的博客
10-10 2万+
注解开发—mybatis的mapper属性和字段不对应问题@Results—resultMapMybatis给我们提供了一种映射方式，如果属性的命名是遵从驼峰命名法的，数据列名遵从下划线命名。MyBatis支持使用注解来配置映射语句，不再需要在XML配置文件中配置。学习内容 @Results对应resultMap @Result对应result 这两个注解是应用在方法的级别上的，也就是在mappe
Spring 4 MVC 表单校验资源处理（带源码）
明明如月的技术博客
05-07 4535
【本系列其他教程正在陆续翻译中，点击分类：spring 4 mvc 进行查看】 【翻译 by 明明如月 QQ 605283073】 上一篇：Spring 4 MVC HelloWorld 纯注解方式（带源码） #项目下载地址：http://websystique.com/?smd_process_download=1&download_id=1258# 本文
当运行pychrm时遇到please select a valid interpreter怎么解决
qq_43595237的博客
01-27 1082
运行python文件出现，报错please select a valid interpreter 这是因为没有选择interpreter 解决方法如下 更改Pycharm的设置 打开settings（CTRL + ALT + S） 查找框输入interpreter 选择一个Project Interpreter 完成 ...
python学习笔记（二）更新中
踏云追月
03-05 1139
数据结构：序列 1。python包含6中内建的序列：列表，元组，字符串，Unicode字符串，buffer对象,xrang对象。 序列是一种数据结构，它包含的元素都进行了编号（从0开始）。典型的序列包括列表、字符串、元组。其中列表是可变的，而元组和字符串是不可变。 列表和元组的区别是列表可修改，元组不能修改，绝大部分情况下列表可以代替元组（用元组作为字典的K时不行，K不能修改）,。列
jQuery validate表单验证指南
5. **国际化支持**：jQuery.validate支持多语言验证提示，通过加载相应的语言文件，如`jQuery.validator.setDefaults({ messages: $.extend({}, $.validator.messages, yourMessages) });`来实现。 6. **错误消息...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值