这几天在研究jquery的form插件。把自己做的例子贴出记录下,本人的记性不是特别好!
贴代码先:
表单就不贴子,有些多,大致说下吧,大部都是文件框(text),其中有一个4个单选框(radio),还有一个submit。
这个验证还有些问题,在提交的时候,虽然提示为能为空,但仍然提交成功,也就是说return false并不能阻止表单的提交。后来在网上求助,才找到解决 办法,把return false换成$('#add').preventDefault(); 就可以了
preventDefault() 这个函数的意思就是阻止默认的提交动作
$(function(){
$('#add').ajaxForm({
beforeSubmit:checkForm,//提交前
success:complate,//提交成功后
dataType:'json'//数据格式
});
function checkForm(){
$('input').each(function (index,arr){//选中所有input的标签,并循环
if($(this).attr('type') == 'text'){//如果类型为text,即文本框
if($(this).val() == ''){//看是否为空
$(this).focus();//定位焦点
$('#error').html('不能为空');//提示 //return false;
$('#add').preventDefault();//阻止表单提交
}
}
});
$('input:gt(6)').each(function (n,v){
var ck = /^\d*$/;//验证纯数字的正则
/*gt(6)它的意思从选择第六个input标签后的所有元素,与其相反的是lt(6);是选择第六个元素之前的所有元素。需注意的是这个起始是以0为开始的,跟数组一样,第一个元素是0!*/
if($(this).val() != '' && $(this).attr('type') == 'text'){//不为空且为文本框,因为最后是一个submit
if(!ck.test($(this).val())){//正则验证
$(this).focus();//焦点
$('#error').html('请输入数字'); //提示 //return false;
$('#add').preventDefault();//阻止表单提交
}
}
});
}
//下面是验证成功后的一些提示信息
function complate(data){
if(data.status == 1){
$('#sub').attr('disabled',true);//禁用按钮,防止重复提交
$('#error').html(data.info);
//alert('提交成功');
}
else{
$('#error').html(data.info);
}
}
});
分享到:
相关推荐
文件压缩包里有jquery.form.js和使用说明文档 jquery表单验证插件_jquery.form.js
jquery表单验证插件jquery.form.js.pdf
jquery.form.js ,在form验证所需的js文件
form表单提交验证调转,jquery-confirm插件,弹出提醒框................
我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?...
主要介绍了使用jquery.form.js实现图片上传的方法,涉及jquery使用表单插件jquery.form.js进行图片上传的提交、类型验证、执行结果回调显示等技巧,非常简单实用,需要的朋友可以参考下
概述:本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案。 方式一:是通过jquery.validate的submitHandler选项,即当表单通过验证时执行回调函数。在这个回调函数中通过jquery.form来提交表单...
本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法。分享给大家供大家参考。具体分析如下: 这个框架集合form提交、验证、上传的功能。 这个框架必须和jquery完整版结合,否则使用min则无效。 ...
jQuery formValidator高级表单验证,前端输入数据状态判断
jQuery Live Form Validation是一个用于创建表单验证的jQuery插件。支持自定义校验规则,既可以在输入的时候实时校验,也可以在提交的时候校验。提示信息的样式完全可以通过CSS定义。
使用FormValidation进行表单验证,使用到了jQuery和Bootstrap框架等相关技术
包含Jquery1.6,JqueryUI界面插件,JqueryForm表单异步提交插件,Jqueryvsdoc,VS2008提示插件,JqueryValidate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 、表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家。 1.点击表单项,显示帮助提示 2.鼠标离开表...
FormWizard是一个jQuery插件,只需花费很少的精力即可将常规HTML表单转换为向导。 该插件通过与以下jQuery插件集成来支持AJAX表单提交,表单验证以及浏览器的后退和前进按钮: jQuery表单 jQuery验证 用法 显然,...
本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下 引入脚本: [removed][removed] [removed][removed] //前端代码: <form id=f1> <input class=input-text ...
jquery验证form,表单,操作cookie 插件
在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写作代码量很少。 <div id="g_cn" style="display:none;w
Ajax-Form-Validation-JQuery.zip,使用jquery进行表单验证的概念,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...
jQuery EasyUI 1.5.2 版本更新内容 Bug(修复) form:修复在调用“reset”方法的时候会导致input输入框初始值消失的BUG; textbox:修复在调用“destroy”方法的时候无法清除字段标签的BUG; datagrid:修复在不...
2): 如果需要让某表单为必填项这需要添加属性“required="true"”,这样标题提示将会多出一个红星,并且未通过验证是不允许提交的,否则即使为空也可以提交; 3):如果需要对某控件添加加验证,这需要添加属性...