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


Posted in Javascript onApril 18, 2016

功能描述:

在页面弹出一个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实现弹出表单思路详解,希望对大家有所帮助!

Javascript 相关文章推荐
Cookie 小记
Apr 01 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
详解js常用分割取字符串的方法
May 15 Javascript
js实现旋转的星空效果
Nov 01 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 #Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 #Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 #Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 #Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 #Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 #Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 #Javascript
You might like
php框架Phpbean说明
2008/01/10 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
在keras里实现自定义上采样层
2020/06/28 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
人事专员职责
2014/02/22 职场文书
工作经历证明书范文
2014/11/02 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书