jQuery validate+artdialog+jquery form實現(xiàn)彈出表單思路詳解
功能描述:
在頁面彈出一個form表單,ajax無刷新提交表單,表單需通過驗證。
適用范圍:
適用于在列表頁面新增,修改記錄。
需要加載的js文件:
jquery.min.js
artDialog.js
iframeTools.js
jquery.form.js
jquery.validate.js
實現(xiàn)思路:
在頁面中將表單放到一個隱藏的容器中,用artdialog彈出該form并對form加上jqueryvalidate驗證,提交采用jqueryform ajax提交,由于都是用現(xiàn)成的插件寫作代碼量很少。
<div id="g_cn" style="display:none;width:700px;"> <table id="base_info" class="tb_normal" width="96%"> <!-- 新聞內(nèi)容 --> <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">職務(wù):</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: '該花名已使用或不符合規(guī)則' }, 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: '關(guān)閉', 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實現(xiàn)彈出表單思路詳解,希望對大家有所幫助!
- 分享2個jQuery插件--jquery.fileupload與artdialog
- artdialog的圖片/標(biāo)題以及關(guān)閉按鈕不顯示的解決方法
- 給artDialog 5.02 增加ajax get功能詳細介紹
- artDialog 4.1.5 Dreamweaver代碼提示/補全插件 附下載
- artDialog雙擊會關(guān)閉對話框的修改過程分享
- JS中artdialog彈出框控件之提交表單思路詳解
- artDialog+plupload實現(xiàn)多文件上傳
- plupload+artdialog實現(xiàn)多平臺上傳文件
- jQuery對話框插件ArtDialog在雙擊遮罩層時出現(xiàn)關(guān)閉現(xiàn)象的解決方法
- Jquery彈出窗口插件 LeanModal的使用方法
- 使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
- jQuery插件artDialog.js使用與關(guān)閉方法示例
相關(guān)文章
從零開始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)
我們經(jīng)常要使用腳本處理各種業(yè)務(wù)邏輯, 最常見的就是數(shù)組和對象的操作. jQuery工具函數(shù)為我們操作對象和數(shù)組提供了便利條件.2011-02-02關(guān)于jQuery EasyUI 中刷新Tab選項卡后一個頁面變形的解決方法
這篇文章主要介紹了關(guān)于jQuery EasyUI 中刷新Tab選項卡后一個頁面變形的解決方法,需要的朋友可以參考下2017-03-03jQuery事件綁定on()、bind()與delegate() 方法詳解
這篇文章主要詳細介紹了jQuery事件綁定的三種方法,分別是on()、bind()與delegate(),十分的淺顯易懂,有需要的小伙伴可以參考下。2015-06-06JQuery 無廢話系列教程(一) jquery入門 [推薦]
貝殼(就是本文作者了)也屬于剛剛會用點JQuery的那一類型, 在學(xué)習(xí)過程中也遇到挺多問題,特別是在開始入門的時候.一直準(zhǔn)備寫些有關(guān)JQuery的文章,但又恐自己文筆及表達能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯誤或者不合適的理解望廣大朋友直接指出批評.2009-06-06jquery.validate 自定義驗證方法及validate相關(guān)參數(shù)
jquery.validate是一個基于jquery的非常優(yōu)秀的驗證框架,我們可以通過它迅速驗證一些常見的輸入,并且可以自己擴充自己的驗證方法,而且對國際化也有非常好的支持,通過本文給大家介紹jquery.validate 自定義驗證方法及validate相關(guān)參數(shù),需要的朋友一起學(xué)習(xí)吧2016-01-01jQuery+slidereveal實現(xiàn)的面板滑動側(cè)邊展出效果
WEB開發(fā)中有時需要在頁面上設(shè)置一個控制面板,默認是不顯示的,當(dāng)用戶有需要時可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實例給大家介紹一下面板滑動展示效果。2015-03-03