jQuery validate+artdialog+jquery form实现弹出表单思路详解

功能描述：
在页面弹出一个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实现弹出表单思路详解，希望对大家有所帮助！