虽然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不是很熟悉 所以样式难看了点,只要稍微改下即可
欢迎提出宝贵意见 谢谢
分享到:
相关推荐
jquery.validate.extend.js
本文实例介绍了jQuery Validate表单验证,分享给大家供大家参考,具体内容如下 一、添加一个另外一个插件jquery.validate.messages_cn.js。 改变默认提示方式。 /* * Translated default messages for the jQuery...
jquery.validate.extension.js文件
表单效验
jQuery.extend 函数详解 Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
原生js实现jquery $.extend方法 通过遍历对象属性来实现
更多用法,可参才: http://jobj.googlecode.com/svn/trunk/FormValidate/demo.html 加入方法: extend, 加入验证模式 4,同3,但是当验证不通过时,立即停止向下检查。在模式3下,如果发生错误,会把错误记录,并向...
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jquery.fn.extend(object);给jQuery对象添加方法。 $.extend({ add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加...
表单进行无刷新提交,ajax技术 if (!this.length) { log('ajaxSubmit: skipping submit process - no element selected'); return this; } var method, action, url, $form = this; if (typeof options == ...
表单<input type=”text” id=”rate” name=”rate” required=”true” class=”easyui-validatebox” validType=”rateCheck[0,1000]” maxlength=”6″ /> $.extend($.fn.validatebox.defaults.rules,...
NULL 博文链接:https://bijian1013.iteye.com/blog/2255035
主要介绍了jQuery.extend 与 jQuery.fn.extend的用法及区别,结合实例形式分析了jQuery.extend与jQuery.fn.extend的功能、使用方法及区别,需要的朋友可以参考下
jQuery:jQuery.extend函数详解
jquery $.fn.extend 引用事件
代码如下:/* Jquery 表单验证插件 janchie 2010.1 janchie@163.com 1.01版 */ (function($){ $.fn.extend({ valid:function(){ if( ! $(this).is(“form”) ) return; //获取参数 var items = $.isArray(arguments[0...
jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : ...
jQuery_extend 函数详解
NULL 博文链接:https://gghaomm.iteye.com/blog/1746699
Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,dest是要整合的空间可以使{} 或者不写 src是一个JSON表达式表示的javascript对象…. 因此里面可以添加方法属性等等… 我么通过不同...