虽然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表单验证插件实现代码的详细解析： 1. **验证准备**： 在开始编写验证逻辑之前，你需要创建一个包含待验证表单元素的HTML结构。这通常包括输入字段、标签和其他必要的表单元素。同时，为了...
`jQuery Validate` 是一个流行的 JavaScript 库，用于在前端实现高效、灵活的表单验证。这个库是 jQuery 生态系统的一部分，它简化了对 HTML 表单数据的验证过程，提高了用户体验，确保用户输入的数据在提交到服务器...
从给定的文件信息来看，文件主要介绍了jquery.validate.js的表单验证功能。jquery.validate.js是一个强大的jQuery插件，可以帮助开发者快速实现表单验证。以下是该文件中提及的关键知识点： 1. jquery.validate.js...
jQuery Validation Engine 是一个功能强大的表单验证插件，以其简单易用和丰富的自定义选项而受到开发者的青睐。 ## 1. jQuery Validation Engine 插件简介 jQuery Validation Engine 是一款基于 jQuery 库的验证...
jQuery Validate 是一款强大的表单验证插件，基于 jQuery 框架开发而成。它能够帮助开发者轻松实现客户端表单验证功能，大大提高了用户体验并减少了服务器端的压力。通过简单地配置选项，即可启用各种内置验证规则。...
jQuery Validate框架极大地简化了客户端表单验证，它提供了丰富的预设规则和自定义功能，可以灵活地处理各种验证需求。通过学习和实践，开发者可以快速地在项目中应用这个强大的验证工具，提升用户体验，减少无效...
总结，jQuery Validate是前端开发中不可或缺的工具，它大大简化了表单验证的复杂性，提供了丰富的验证规则和高度可定制的选项，让开发者能更专注于业务逻辑，提高用户体验。通过理解并熟练运用jQuery Validate，可以...
jQuery Validate插件是基于jQuery的一个非常实用的表单验证库，它可以极大地简化前端表单验证的工作流程，使得开发者能够快速实现各种复杂的验证逻辑。此插件提供了丰富的内置验证方法，并且支持自定义规则，非常...
总结来说，jQuery Validate插件是jQuery中强大的表单验证工具，它的灵活性和扩展性使得开发者能够轻松应对各种验证场景，同时配合中文使用库，可以更好地适应中文环境，提升用户的使用体验。无论你是初学者还是经验...
jQuery Validate是一款广泛使用的jQuery插件，专门用于前端表单验证。它能够简化JavaScript验证代码的编写，提高开发效率，并保证用户输入的有效性。下面详细介绍该插件的核心知识点和使用方法。 首先，表单验证是...
《jQuery.validate.js：高效表单验证的艺术》 在网页开发中，用户输入的验证是必不可少的一环，它能确保数据的正确性和安全性。jQuery.validate.js是jQuery库的一个插件，专为实现表单验证提供了强大的支持。这个...
《深入学习jQuery Validate表单验证（二）》 在本文中，我们将深入探讨jQuery Validate插件，这是一个强大的JavaScript库，用于实现高效的表单验证。它提供了丰富的验证规则和自定义错误消息，使得创建用户友好的...
jQuery Validate是一个广泛使用的jQuery插件，它简化了前端表单验证的过程。以下是对jQuery Validate插件基本使用方法及功能拓展的详细知识点。 ### 表单验证的重要性 表单验证不仅是用户界面友好的重要组成部分，...
《jQuery-formValidator：高效精准的表单验证工具详解》 在网页开发中，表单验证是必不可少的一环，它能够确保用户输入的数据符合预设的规则，提高数据的准确性和安全性。jQuery-formValidator是一款强大的jQuery...
jQuery Validate是一个广泛使用的jQuery插件，它提供了一套丰富的表单验证方法，极大地简化了客户端的表单验证过程。它支持常见的验证规则，比如电子邮件和URL验证，同时也允许开发者自定义验证规则。 在开始使用...
jQuery Validate 是一个非常流行的 JavaScript 库，用于在客户端对 HTML 表单进行验证。这个插件使得表单验证变得简单而高效，可以避免用户提交无效数据到服务器，从而提高用户体验和减轻服务器负担。 ### 第一章 ...
`jquery.validate`是一款用于前端页面表单验证的强大插件。它可以帮助开发者快速实现表单字段的有效性检查，提高用户体验的同时减少服务器端的压力。该插件支持多种验证规则，并且可以自定义错误提示信息，使得开发...