jQuery validate+artdialog+jquery form实现弹出表单思路详解
更新时间:2016年4月19日 10:00 点击:1707
功能描述:
在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证。
适用范围:
适用于在列表页面新增,修改记录。
需要加载的js文件:
jquery.min.js
artDialog.js
iframeTools.js
jquery.form.js
jquery.validate.js
实现思路:
在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写作代码量很少。
<div id="g_cn" style="display:none;width:700px;"> <table id="base_info" class="tb_normal" width="96%"> <!-- 新闻内容 --> <tr> <td width=20% align="right" class="td_normal_title">花名:</td> <td><input readonly onFocus="this.blur()" type="text" id="bHname" value=""></td> <td width=20% align="right" class="td_normal_title">花名拼音:</td> <td><input readonly onFocus="this.blur()" id="bSpell" type="text" value=""></td> </tr> <tr> <td width=15% align="right" class="td_normal_title">姓名:</td> <td><input readonly onFocus="this.blur()" id="bEmpName" type="text" value=""></td> <td width=15% align="right" class="td_normal_title">性别:</td> <td><input readonly onFocus="this.blur()" id="bH_sex" type="text" value=""></td> </tr> <tr> <td width=15% align="right" class="td_normal_title">部门:</td> <td><input readonly onFocus="this.blur()" id="bDept" type="text" value=""></td> <td width=15% align="right" class="td_normal_title">职务:</td> <td><input readonly onFocus="this.blur()" id="bPosition" type="text" value=""></td> </tr> <tr> <td width=15% align="right" class="td_normal_title">申请时间:</td> <td><input readonly onFocus="this.blur()" id="bRegTime" type="text" value=""></td> <td width=15% align="right" class="td_normal_title">审核时间:</td> <td><input readonly onFocus="this.blur()" id="bAuditTime" type="text" value=""></td> </tr> <tr> <td width=15% align="right" class="td_normal_title">花名出处:</td> <td><input readonly onFocus="this.blur()" id="bFrom" type="text" value=""></td> <td width=15% align="right" class="td_normal_title">花名注释:</td> <td><input readonly onFocus="this.blur()" id="bRemark" type="text" value=""></td> </tr> </table> </div> a <script language="javascript" type="text/javascript"> //form验证 $.validator.addMethod('checkHname', function() { var validate=false; var hname = $("#r_c").val().replace(/\s/g,'').substr($("#r_c").val().length-2,2); $.ajax({ url : "/mipdemo/app/hname/index.php?r=hname/checkHname", data : { 'hname':hname, 'empid':$("#username").val() }, type : "get", async : false, cache : false, timeout : 10000, success : function(data) { eval('var result ='+ data); validate = result.pass; strHnameValideResult = result.message; if(validate === true || validate === 'true'){ $('#spell').val(result.pinyin); $('#hname').val(hname); } } }); return validate; }); //form验证 $.validator.addMethod('checkUser', function() { var validate=false; var username = $("#username").val(); if(username != "0"){ validate = true; } return validate; }); //form验证 $.validator.addMethod('checkSex', function() { var validate=false; $("input[name='h_sex']").each(function(){ if($(this).attr("checked")=="true"){ validate = true; } }) return validate; }); $('#myForm').validate({ errorPlacement: function(error, element){ if(element.attr("name") != "h_sex"){ element.parent().find('label').remove(); }else{ element.parent().find('label.onError,label.onCorrect').remove(); } element.parent().append(error.attr('class','onError')); }, success: function(label){ label.removeClass("onCorrect").removeClass("onError"); label.addClass('onCorrect').text(''); }, onkeyup: true, rules : { r_a:{ min:1 }, r_b:{ required:true }, r_c:{ required:true, minlength:2, maxlength:2, checkHname:true }, h_sex:{ required:true } }, messages : { r_a:{ min:'作品类型必选' } , r_b:{ required:'作品名称必填' }, r_c:{ required:'花名必填', minlength:"请输入2个中文", maxlength:"请输入2个中文", checkHname: '该花名已使用或不符合规则' }, h_sex:{ required:"性别必选" } } }); $(document).ready(function() { var options = { target: '#output2', success: showResponse // post-submit callback }; $('#myForm').ajaxForm(options); var alt =null; $("#List_ViewTable tr").click(function(){ var empid = $(this).find("input[type='checkbox']").val(); if(empid != ""){ $.ajax({ url : "/mipdemo/app/hname/index.php?r=hname/userInfo", data : { 'empid':empid }, type : "get", cache : false, timeout : 10000, success : function(data) { var result = $.parseJSON(data); $("#bHname").val(result.hname); $("#bSpell").val(result.spell); $("#bEmpName").val(result.EmpName); $("#bH_sex").val(result.h_sex); $("#bDept").val(result.deptName); $("#bPosition").val(result.PositionName); $("#bRegTime").val(result.regtime); $("#bAuditTime").val(result.audit_time); $("#bFrom").val(result.r_a + result.r_b); $("#bRemark").val(result.r_d); if(alt !=null){ alt.close(); } alt=art.dialog({ title:'用户信息', content: document.getElementById('g_cn'), width:750, button: [ { name: '保存', focus: true, callback: function () { $('#myForm').submit(); return false; } }, { name: '关闭', callback: function () { } } ] }); } }); } }); function showResponse(data){ if(alt !=null){ alt.close(); } if(data=='success'){ artDialog.alert('保存成功'); }else{ art.dialog.close(); artDialog.alert('保存失败'); } } }); </script>
以上所述是小编给大家介绍的jQuery validate+artdialog+jquery form实现弹出表单思路详解,希望对大家有所帮助!
相关文章
- artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解,对本文感兴趣的朋友一起学习吧...2016-04-19
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- Query架构的开发人员能够创建一个插件代码来扩展其功能,从而能够产生一些最好的插件,让你的网站或任何给定的项目达到一个全新的水平。 ...2016-04-27
- 这篇文章主要介绍了jQuery Validate初步体验(二) 的相关资料,需要的朋友可以参考下...2015-12-14
- 这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
基于Bootstrap实现Material Design风格表单插件 附源码下载
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载,感兴趣的朋友参考下...2016-04-19- 本篇文章主要介绍了vue2 中如何实现动态表单增删改查实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-15
基于RequireJS和JQuery的模块化编程——常见问题全面解析
下面小编就为大家带来一篇基于RequireJS和JQuery的模块化编程——常见问题全面解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考...2016-04-17- 本文介绍在表单提交之前修改提交的值的方法,希望给需要的朋友一些帮助。...2016-04-17
- 本文主要介绍AngularJS表单的知识,这里整理了表单的基础知识和简单的示例代码,有需要的小伙伴可以参考下...2016-08-24
基于bootstrap插件实现autocomplete自动完成表单
这篇文章主要介绍了基于bootstrap插件实现autocomplete自动完成表单的相关资料,感兴趣的朋友可以参考一下...2016-05-09- 本文给大家分享的是如何在Node.js中使用jQuery的方法,包含步骤以及出错的处理,非常的详细,有需要的小伙伴可以参考下...2016-09-01
- JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。本文给大家介绍javascript的表单与验证-非空验证,对javascript表单验证相关知识感兴趣的朋友一起学习吧...2016-03-22
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
这篇文章主要介绍了JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结,非常不错,具有参考借鉴价值,需要的朋友参考下吧...2017-06-15- 这篇文章主要介绍了jquery插件EasyUI中form表单提交实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-01-14
- 这篇文章主要介绍了jQuery中通过ajax的get()函数读取页面的方法,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了前端笔记之jquery部分,jQuery是一个兼容多浏览器的javascript库...2016-05-05
javascript表单处理具体实现代码(表单、链接、按钮)
这篇文章主要介绍了javascript表单处理具体实现代码,包括各种表单、链接、按钮控件介绍,感兴趣的朋友可以参考一下...2016-05-09- 在Node.js中使用jQuery的做法,需要先安装jquery,npm install jquery ,安装后的版本是 3.1.0,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24