|
在项目需求中有这样一功能：在页面弹出一个form表单，ajax无刷新提交表单，表单需通过验证。下面小编给大家介绍通过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实现弹出表单思路详解，希望对大家有所帮助！ | 
发表于 2016-4-18 10:04:18
