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 相关文章推荐
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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通过session防url攻击方法
2014/12/10 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
浅谈angularJS 作用域
2015/07/05 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python验证码图片处理(二值化)
2019/11/01 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
python 6行代码制作月历生成器
2020/09/18 Python
基于PyTorch中view的用法说明
2021/03/03 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
2014年医学生毕业自我鉴定
2014/03/26 职场文书
安全承诺书格式
2014/05/21 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
运动会致辞稿
2015/07/29 职场文书
2015国庆节感想
2015/08/04 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js