前段的表单验证,重复性高,虽然网上一大堆js代码,每当邮件,电话号码什么的验证,直接copy,但是有了这个框架真实美包包。
jquery validate 验证框架,本来想详细写写用法,发现坛子里paskaa几年前写过,不知道为何帖子沉了。
详细使用:
http://www.iteye.com/topic/276661
http://www.iteye.com/topic/280295
官方文档参考:http://docs.jquery.com/Plugins/Validation
官方那个,我感觉这个文档写的不是很详细,读了几遍还是发现有些没讲清楚
既然有了前面的东东,我发帖的主要是为了分享好东东,并且写写我们项目里demo
面对如下一个表单验证:
如果需要自己写js,那么真实悲剧啊,下面是不使用框架的代码
那个写的一个叫累,写了这么多后,发现居然没有处理获取焦点后,提示消失
$(document).ready(function() {
$("#errorAuthor").hide();
$("#errorContent").hide();
$("#errorverifyCode").hide();
$("#errorverifyCodeError").hide();
$("#verifyImage").click(function(){
$(this).attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
});
$("#cmmAuthor").click(function() {
$("#errorAuthor").hide();
});
$("#cmmContent").click(function() {
$("#errorContent").hide();
});
$("#verifyCode").click(function() {
$("#errorverifyCode").hide();
$("#errorverifyCodeError").hide();
$.get("../productComment/prd_comt_verifyCode.action", function(data){
if(data=="error"){
$("#errorverifyCodeError").show();
return ;
}
});
});
});
function changeVerifyCode() {
$("#verifyImage").attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
}
function submitForm() {
var author=$("#cmmAuthor").attr("value");
var content=$("#cmmContent").attr("value");
var verifyCode=$("#verifyCode").attr("value");
var value=$("#verifyCode").attr("value");
if(author==""){
$("#errorAuthor").show();
return ;
}
if(content==""){
$("#errorContent").show();
return ;
}
if(verifyCode==""){
$("#errorverifyCode").show();
return ;
}
$("form:first").submit();
}
只需要做出如下更改:
先引入lib
引用
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/core/jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script>
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/jquery.validate.min.js" type="text/javascript" language="javascript"></script>
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/jquery.validate.messages_cn.js" type="text/javascript" language="javascript"></script>
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/additional-methods.js" type="text/javascript" language="javascript"></script>
然后直接写就可以了
<script type="text/javascript" >
$(document).ready(function() {
$("#verifyImage").click(function(){
$(this).attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
});
$("#productComment").validate({
rules: {
cmmAuthor: {
required: true
},
cmmContent: {
required: true
},
verifyCode:{
required: true,
remote: "../productComment/prd_comt_verifyCode.action"
}
},
messages: {
cmmAuthor:{
required: "请输入您的姓名或昵称"
},
cmmContent:{
required: "请输入您的评论"
},
verifyCode:{
required: "请输入验证码",
remote: "验证码不正确"
}
},
errorPlacement: function(error,element){
$("#errorMessage").append(error);
$("#errorMessage").append($("<br/>"));
},
success: function(label) {
}
});
});
remote为ajax验证,如果返回值是true,那么无提示,不返回就提示错误信息,这个比jqury写ajax还方便。
测试:
什么都不输入,提交
输入错误验证码,提交
以上demo只是基本的使用,你还可以复杂的控制,比如在里面控制错误显示,demo里面的错误显示是自己在html里面控制的<span id="errorMessage" style="color: red;">,必须放到form表单内,否则错误提示在你时间触发时候不会消失,只会又生成一个提示,非常bug。
用框架控制,就紧跟message方法后面
// 定义错误信息提示的位置和样式
errorElement: "em", // 定义错误标记标签,<em>error</em>
errorPlacement: function(error,element){
element.nextAll("i").addClass("error");
element.nextAll("i").append(error);
},
// 定义验证成功相关样式和事件
success: function(label) {
}
});
- 大小: 14.6 KB
- 大小: 21.2 KB
- 大小: 19.1 KB
分享到:
相关推荐
随机性抽号器,省时省力 随机性抽号器,省时省力 随机性抽号器,省时省力
省时省力的混凝土浇注机可能具有便捷的维护通道,方便工作人员进行日常检查和清洁,减少停机时间,延长设备使用寿命。同时,可能采用耐用的材料和部件,以应对混凝土对设备的磨损。 最后,环保和能源效率也是现代...
ZBlog站群一键部署教程:省时省力的站群搭建方案
标题中的“行业文档-设计装置-省时省力安全装膜机”暗示了这是一个关于机械设备设计的专题,重点在于介绍一种能节省时间和劳动力,并且在操作过程中保障安全的薄膜包装设备。这种装膜机可能广泛应用于食品、药品、...
测试计划模板分享,测试计划模板分享,有了他,省时省力
摄像头相机调用程序,可直接调用,无需其他驱动,省时省力
淘宝买家的贴心小棉袄——按您的设定搜索宝贝——省时省力
**ASP.NET** 是一个由微软开发的用于构建动态Web应用和服务的框架。它提供了多种机制来增强Web应用程序的功能性和灵活性。其中,“过滤器”就是一种非常重要的机制。与Java中的`ServletFilter`类似,ASP.NET中的过滤...
IBM WebSphere Commerce专业版为新的B2B网站提供引擎,而IBM WebSphere Commerce商业版则是尚在开发中的B2C网站的基础。两个网站都把IBM WebSphere Application Server作为JavaServer Pages(JSP)和servlet的运行...
省时省力,时间就是金钱,效率就是实力,不要让领导怀疑你的能力,相信你懂。 《jQuery 1.3》 《jQuery 1.4参考手册》 《jQuery 1.7中文手册》 《jQuery 1.11》 《jQuery 3.1参考手册》 《jQuery.api_1.4.4》 ...
标题中的“设计师的省时省力工具库__设计帮”暗示了这个压缩包可能包含一系列专为设计师优化的工具或应用程序,旨在提高他们的工作效率。这些工具可能包括图形编辑器、图标库、模板集、颜色选择器、布局工具、字体...
1、禁止未经确认的网卡接入网络,提高整个局域网安全性; 2、监控各用户所用IP,防止IP盗用;实时检测各用户的IP、MAC、主机名并记录以供查询; 3、监视所有接入网络的网卡信息,防止未登记的机器接入网络;...
项目描述:结合xlrd库读取Excel文件,利用smtplib库通过邮箱服务器发送... 邮件内容使用HTML格式编写,logging模块记录邮件发送的详细信息,便于监控和问题排查; tqdm库生成了发送进度条,展示了邮件发送的进度。
只需要把表名写上,数据库名称写上就可以直接生成实体类了,不用自己在去写
有了 jQuery EasyUI 框架的辅助,构建起网页来轻而易举哦! easyui 是一系列基于 jQuery 用户接口插件的集合。 easyui 提供构建现代交互 javascript 应用的必备功能。 有了 easyui 之后不必再狂写 javascript 代码...
这些方法都是使用"CZ-Ppt2Txt For MS PowerPoint"这款软件来实现的。 1. **窗口界面下转换文件** 这种方法适合大多数用户,操作直观。首先启动软件,然后在"Manual Convert"标签页下点击"Add Folders",选择包含要...
JavaScript是一种动态编程语言,用于实现网页的交互功能,如表单验证、动画效果、异步请求等。JavaScript与HTML、CSS配合,可以构建动态且用户友好的前端应用。初学者需要掌握变量、函数、对象等基础语法,以及DOM...
此外,使用Excel的模板和数据验证功能可以帮助提高效率,减少错误,并确保格式的一致性。 总之,自动编制现金流量表是财务人员提升工作效率的关键技能,通过熟练运用Excel的功能,结合利润表和资产负债表的数据,...
3. **插件使用**:通过加载插件,可以扩展NSIS的功能,如Inno Setup的`innosetup-plugin`可以添加更多的功能,如网络连接、注册表编辑等。 4. **多语言支持**:利用`.lang`文件和`!insertmacro MUI_LANGUAGE`命令,...
无论你是初学者还是经验丰富的开发者,它都能提供强大的支持,帮助你在表单验证方面省时省力,提升开发效率。结合其丰富的文档和示例,你可以轻松掌握并应用到自己的项目中,确保表单数据的准确无误。在实际使用过程...