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验证，提交采用jqueryformajax提交，由于都是用现成的插件写作代码量很少。
<divid="g_cn"style="display:none;width:700px;">
<tableid="base_info"class="tb_normal"width="96%">
<!--新闻内容-->
<tr>
<tdwidth=20%align="right"class="td_normal_title">花名：</td>
<td><inputreadonlyonFocus="this.blur()"type="text"id="bHname"value=""></td>
<tdwidth=20%align="right"class="td_normal_title">花名拼音：</td>
<td><inputreadonlyonFocus="this.blur()"id="bSpell"type="text"value=""></td>
</tr>
<tr>
<tdwidth=15%align="right"class="td_normal_title">姓名：</td>
<td><inputreadonlyonFocus="this.blur()"id="bEmpName"type="text"value=""></td>
<tdwidth=15%align="right"class="td_normal_title">性别：</td>
<td><inputreadonlyonFocus="this.blur()"id="bH_sex"type="text"value=""></td>
</tr>
<tr>
<tdwidth=15%align="right"class="td_normal_title">部门：</td>
<td><inputreadonlyonFocus="this.blur()"id="bDept"type="text"value=""></td>
<tdwidth=15%align="right"class="td_normal_title">职务：</td>
<td><inputreadonlyonFocus="this.blur()"id="bPosition"type="text"value=""></td>
</tr>
<tr>
<tdwidth=15%align="right"class="td_normal_title">申请时间：</td>
<td><inputreadonlyonFocus="this.blur()"id="bRegTime"type="text"value=""></td>
<tdwidth=15%align="right"class="td_normal_title">审核时间：</td>
<td><inputreadonlyonFocus="this.blur()"id="bAuditTime"type="text"value=""></td>
</tr>
<tr>
<tdwidth=15%align="right"class="td_normal_title">花名出处：</td>
<td><inputreadonlyonFocus="this.blur()"id="bFrom"type="text"value=""></td>
<tdwidth=15%align="right"class="td_normal_title">花名注释：</td>
<td><inputreadonlyonFocus="this.blur()"id="bRemark"type="text"value=""></td>
</tr>
</table>
</div>
a
<scriptlanguage="javascript"type="text/javascript">
//form验证
$.validator.addMethod('checkHname',function(){
varvalidate=false;
varhname=$("#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('varresult='+data);
validate=result.pass;
strHnameValideResult=result.message;
if(validate===true||validate==='true'){
$('#spell').val(result.pinyin);
$('#hname').val(hname);
}
}
});
returnvalidate;
});
//form验证
$.validator.addMethod('checkUser',function(){
varvalidate=false;
varusername=$("#username").val();
if(username!="0"){
validate=true;
}
returnvalidate;
});
//form验证
$.validator.addMethod('checkSex',function(){
varvalidate=false;
$("input[name='h_sex']").each(function(){
if($(this).attr("checked")=="true"){
validate=true;
}
})
returnvalidate;
});
$('#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(){
varoptions={
target:'#output2',
success:showResponse//post-submitcallback
};
$('#myForm').ajaxForm(options);
varalt=null;
$("#List_ViewTabletr").click(function(){
varempid=$(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){
varresult=$.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();
returnfalse;
}
},
{
name:'关闭',
callback:function(){
}
}
]
});
}
});
}
});
functionshowResponse(data){
if(alt!=null){
alt.close();
}
if(data=='success'){
artDialog.alert('保存成功');
}else{
art.dialog.close();
artDialog.alert('保存失败');
}
}
});
</script>
以上所述是小编给大家介绍的jQueryvalidate+artdialog+jqueryform实现弹出表单思路详解，希望对大家有所帮助！