在項(xiàng)目需求中有這樣一功能：在頁面彈出一個(gè)form表單，ajax無刷新提交表單，表單需通過驗(yàn)證。下面小編給大家介紹通過jQuery validate+artdialog+jquery form實(shí)現(xiàn)彈出表單思路詳解，需要的朋友參考下吧

功能描述：

在頁面彈出一個(gè)form表單，ajax無刷新提交表單，表單需通過驗(yàn)證。

適用范圍：

適用于在列表頁面新增，修改記錄。

需要加載的js文件：

jquery.min.js

artDialog.js

iframeTools.js

jquery.form.js

jquery.validate.js

實(shí)現(xiàn)思路：

在頁面中將表單放到一個(gè)隱藏的容器中，用artdialog彈出該form并對(duì)form加上jqueryvalidate驗(yàn)證，提交采用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">申請(qǐng)時(shí)間：</td>

<td><input readonly onFocus="this.blur()" id="bRegTime" type="text" value=""></td>

<td width=15% align="right" class="td_normal_title">審核時(shí)間：</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驗(yàn)證

$.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驗(yàn)證

$.validator.addMethod('checkUser', function() {

var validate=false;

var username = $("#username").val();

if(username != "0"){

validate = true;

}

return validate;

});

//form驗(yàn)證

$.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:"請(qǐng)輸入2個(gè)中文",

maxlength:"請(qǐng)輸入2個(gè)中文",

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實(shí)現(xiàn)彈出表單思路詳解，希望對(duì)大家有所幫助！