jQuery表单插件 jQuery.form

合集下载

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

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

在项目需求中有这样一功能:在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证。

下面小编给大家介绍通过jQuery validate+artdialog+jquery form实现弹出表单思路详解,需要的朋友参考下吧功能描述:在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证。

适用范围:适用于在列表页面新增,修改记录。

需要加载的js文件:jquery.min.jsartDialog.jsiframeTools.jsjquery.form.jsjquery.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实现弹出表单思路详解,希望对大家有所帮助!。

JQuery提交表单 Form.js官方插件介绍

JQuery提交表单 Form.js官方插件介绍

JQuery提交表单Form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用。

1、JQuery框架下载/2、Form插件下载/jquery/form/#download3、Form插件的简单入门第二步:jquery.js和form.js文件的包含表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。

ajaxForm增加所有需要的事件监听器,为AJAX提交表单做好准备。

ajaxForm不能提交表单。

在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。

ajaxForm接受0个或1个参数。

这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

可链接(Chainable):可以。

实例:$('#myFormId').ajaxForm();ajaxSubmit马上由AJAX来提交表单。

大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。

ajaxSubmit接受0个或1个参数。

这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

可链接(Chainable):可以。

实例:// 绑定表单提交事件处理器$('#myFormId').submit(function() {// 提交表单$(this).ajaxSubmit();// 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回falsereturn false;});formSerialize将表单串行化(或序列化)成一个查询字符串。

这个方法将返回以下格式的字符串:name1=value1&name2=value2。

可链接(Chainable):不能,这个方法返回一个字符串。

实例:var queryString = $('#myFormId').formSerialize();// 现在可以使用$.get、$.post、$.ajax等来提交数据$.post('myscript.php', queryString);fieldSerialize将表单的字段元素串行化(或序列化)成一个查询字符串。

jQueryformValidator4.0表单验证插件更新日志

jQueryformValidator4.0表单验证插件更新日志

r 4.0ver这次升级要感谢很多在博客里不断留言的网友,特别感谢网友”在博客上替我回答网友的提问,再次感谢。

1、这次升级精简了代码。

2、提高校验的速度。

如果控件的a me相同,则只校验一次,加快校验速度3、修复4个状态为空时,没有隐藏提示的问题。

4、修改配置里的e rror函数,增加一个“错误列表”参数。

你可以把所有的错误 ‎ 示在 ‎$.form:"form1",i st){//遍历所有的错误消o n(msg1){alert(msg1)});},false;}});5、针对问题比较多的t or函数,进行如下修改a、支持同组的所有表单值都传递给服务器端必须为每个控件增加e属性,否则是不会传递过去的。

b、去掉参数。

在服务器端,你可以通过a me为获取触发验证的控件ID名c、为o r增加a x参数(值为,false,默认),表示t or是否把该表单提交给服务器6、修正参数(如果输入的值非法,则恢复原来的值)不起作用的问题6、o r支持多个正则表达式与和或的校验,详见用户手册和a、增加属性:e Type,比较类型,默认值"||","||"表示或的关系,"&&"表示并列关系b、原p属性支持接收数组范例如下::"请输入你的手机或者电话号码,可以为空哦s:"格式例如:-88或11位手机号码e ct:"谢谢你的合作",onemp y:"你真的不想留手机或电话了吗?r:"你输入的手机或电话格式不正确"});7、增加函数p(),来重新定位自动构建的提示层自动构建提示层所在的网页如果在a me里,如果刚开始是隐藏的, 示的时候,就会全部团聚在左上角。

所以当 示页面的时候,要 式的调用该函数。

官方对s et的解释:Note:t.r 3.3ver在升级的过程发现了一些b ug,在这个版本里做了修正;使用新版的Q uery类库,精简了不少代码。

jQuery formValidator表单验证插件

jQuery formValidator表单验证插件

jQuery formValidator表单验证插件是什么?jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。

你可以划分多个校验组,每个组的校验都是互不影响。

对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)脚本控制。

目前支持5种大的校验方式,分别是:inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、compareValidator(提供2个对象的比较,目前可以比较字符串和数值型)、ajaxValidator(通过ajax到服务器上做数据校验)、regexValidator(提供可扩展的正则表达式库)、functionValidator (可使用外部函数来做校验)本插件于其他校验控件最大的区别有3点:1、校验功能可以扩展。

对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制,别的表单校验控件是代码里写死的,而formValidator是通过外部js文件来扩展的,你可以通过写正则表达式和函数来无限的扩展这些功能。

2、实现了校验代码于html代码的完全分离。

你的所有信息都无需配置在校验表单元素上,你只要在js上配置你的信息。

使美工(界面)和javascript工程师的工作不交织在一起3、你只需写一行代码就能完成一个表单元素的所有校验。

你只需要写一行代码就能完成一下所有的控制∙支持所有类型客户端控件的校验∙支持jQuery所有的选择器语法,只要控件有唯一ID和type属性∙支持函数和正则表达式的扩展。

提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。

∙支持2种校验模式。

第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式)∙支持多个校验组。

jQueryform插件之formDdata参数校验表单及验证后提交

jQueryform插件之formDdata参数校验表单及验证后提交

jQueryform插件之formDdata参数校验表单及验证后提交Form Plugin API ⾥提供了很多有⽤的⽅法可以让你轻松的处理表单⾥的数据和表单的提交过程。

测试环境:部署到Tomcat中的web项⽬。

⼀、引⼊依赖js<script src="jquery-1.3.1.js" type="text/javascript"></script><script src="jquery.form.js" type="text/javascript"></script>⼆、初始化回调函数。

⾸先,我们初始化这个表单,给它⼀个 beforeSubmit 回调函数 - 这是⼀个⽤来校验的函数。

$(document).ready(function() {$('#myForm').ajaxForm({target:'#output1', // ⽤服务器返回的数据更新 id为output1的内容.beforeSubmit: validate // 提交前,验证});});三、校验规则function validate(formData, jqForm, options) {// formdata是数组对象,每个对象拥有名称和值.// 数据如下⾯的格式:// [// { name: username , value: usernameValue },// { name: password , value: passwordValue }// ]for (var i=0; i < formData.length; i++) {if (!formData[i].value) {alert('⽤户名,地址和⾃我介绍都不能为空!');return false;}}var queryString = $.param(formData); //组装数据//alert(queryString); //类似: name=1&add=2return true;}四、详细代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>jQuery form插件的使⽤--⽤ formData 参数校验表单</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="jquery-1.3.1.js" type="text/javascript"></script><script src="jquery.form.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {$('#myForm').ajaxForm({target: '#output1', // ⽤服务器返回的数据更新 id为output1的内容.beforeSubmit: validate // 提交前,验证});});function validate(formData, jqForm, options) {// formdata是数组对象,每个对象拥有名称和值.// 数据如下⾯的格式:// [// { name: username , value: usernameValue },// { name: password , value: passwordValue }// ]for (var i=0; i < formData.length; i++) {if (!formData[i].value) {alert('⽤户名,地址和⾃我介绍都不能为空!');return false;}}var queryString = $.param(formData); //组装数据//alert(queryString); //类似: name=1&add=2return true;}</script></head><body><h3> Demo 5 :jQuery form插件的使⽤--⽤ formData 参数校验表单,验证后提交(简单验证). </h3><form id="myForm" action="ajax2.jsp" method="post">名称: <input type="text" name="name" id="name" /> <br/>地址: <input type="text" name="address" id="address"/><br/>⾃我介绍: <textarea name="comment" id="comment" ></textarea> <br/><input type="submit" id="test" value="提交" /> <br/><div id="output1" ></div></form></body></html>以上所述是⼩编给⼤家分享的jQuery form插件之formDdata参数校验表单及验证后提交的全部内容,希望对⼤家有所帮助。

jquery常用插件

jquery常用插件

jquery常用插件表单验证插件——validate该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({options})其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。

例如,当点击表单中的“提交”按钮时,调用validate插件验证用户名输入是否符合规则,并将异常信息显示在页面中,如下图所示:在浏览器中显示的效果:从图中可以看出,在页面中导入了validate插件,当用户在输入框中录入用户名时,自动根据规则进入验证,并显示提示信息,验证成功后,表单才能提交。

表单插件——form通过表单form ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:$(form). ajaxForm ({options})其中form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数。

例如,在页面中点击“提交”按钮,调用form插件的示:在浏览器中显示的效果:从图中可以看出,当点击“提交”按钮时,调用form表单插件中的ajaxForm()方法向指定的服务器以aj ax方式发送数据,服务器接收后返回并将数据显示。

图片灯箱插件——lightBox该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:$(linkimage).lightBox({options})其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,以列表的方式在页面中展示全部的图片,当用户单击其中某张图片时,通过引入的图片插件,采用“灯箱”的方式显示所选的图片,如下图所示:在浏览器中显示的效果:图片放大镜插件——jqzoom在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的果,调用格式如下:$(linkimage).jqzoom({options})其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

表单验证jquery插件formvalidator使用方法详解手册

表单验证jquery插件formvalidator使用方法详解手册

第三方手册——jQuery formValidator手册PHPCMS V9中使用的表单验证框架为jQuery formValidator什么是jQuery formValidator?jQuery formValidator表单验证插件是客户端表单验证插件。

在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等。

在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来进行表单元素的校验,而这些校验在平时开发中不停的重复书写。

常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等。

一般要判断的表单元素比较多,开发过程就显得枯燥无味——重复的代码不断重复,而且可能还要兼容多种浏览器,更多的考虑因素使人头疼不已。

由于每个要校验的页面虽然逻辑基本相同,但是在大多数情况下,出于种种原因,开发者宁愿再编写一套JS文件,为了便于管理。

jQuery formValidator表单插件致力于改善这一过程。

你只关心业务逻辑,而无需关系实现过程,只需简单的配置,无需写代码就能实现表单的检验。

它包括常规检验功能和可扩展校验功能。

针对每个表单元素你只需要写一行配置信息就能完成校验。

而这些配置信息无需写入表单元素,实现了js代码和html代码的分离。

这样做的好处,使B/S开发过程中,分工更加明确,页面设计着只需关心他的页面(设计的时候不必担心把脚本弄坏了),javascript开发者只需关心脚本的开发。

而插件本身包含的校验方式可以有无数种,只要你扩展正则表达式和函数。

本插件于同类校验插件最大的区别:校验功能可以扩展;实现了校验代码于html代码的完全分离;你只需写一行配置信息就能完成一个表单元素的所有校验。

插件本身提供了很多回调函数,使调用者能最大限度的发挥自己的想象能力来完成自己的业务需求。

在同一个页面你可以拥有很多个校验组,你只需在提交的按钮那里调用 return jQuery.formValidator.pageIsValid('校验组号') 来完成多个组的校验,互不干扰。

jquery formbuilder用法

jquery formbuilder用法

jquery formbuilder用法一、前言jQuery Formbuilder是一款功能强大的表单生成器插件,它能够帮助开发者快速构建各种类型的表单,支持多种表单控件和验证方式。

本文将详细介绍jQuery Formbuilder的用法,包括其基本概念、使用方法、常见用法和注意事项。

二、基本概念jQuery Formbuilder是一个基于jQuery的插件,它提供了一系列表单构建工具和API,帮助开发者创建、管理和提交表单。

Formbuilder允许开发者自定义表单的外观和功能,支持各种表单控件和验证方式,如文本框、下拉框、单选框、复选框、文件上传等。

此外,Formbuilder还提供了丰富的表单数据处理和发送功能,方便开发者进行数据收集和发送。

三、使用方法1. 引入插件:在使用jQuery Formbuilder之前,需要将其引入到网页中。

可以通过下载插件文件或使用CDN链接来引入。

2. 创建表单:使用Formbuilder的API创建表单。

可以通过调用相关方法来添加各种表单控件和验证方式。

3. 添加控件:可以使用Formbuilder提供的各种控件类,如text、select、checkbox、radio等,来添加各种类型的表单控件。

还可以使用自定义控件类来创建自定义的表单控件。

4. 添加验证:可以使用Formbuilder提供的验证方法,如required、minlength、email等,来添加各种类型的表单验证。

还可以使用自定义验证方法来创建自定义的表单验证。

5. 处理表单数据:可以使用Formbuilder提供的数据处理方法,如submitForm、validateForm等,来提交表单数据和处理验证结果。

四、常见用法1. 动态生成表单:可以使用Formbuilder的API动态生成表单,根据不同的条件和数据生成不同的表单控件和验证方式。

2. 表单分组:可以将多个表单控件分组,以便于管理和提交数据。

用法大全

用法大全

jQuery formValidator使用说明说明:jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面的分离。

对一个表单对象,你只需要写一行代码就可以轻松实现20种以上的脚本控制。

现支持一个表单元素累加很多种校验方式,采用配置信息的思想,而不是把信息写在表单元素上,能比较完美的实现ajax请求。

并结合jquery.boxy实现遮罩提示。

一、所需元素jquery-1.3.2.js (需要jquery-1.3.2以上版本) formValidator.js (表单验证基础js) formValidatorRegex.js(表单验证所需正则js) jquery.boxy.js (遮罩提示js) validator.css (表单验证样式) boxy.css(遮罩提示样式)二、使用说明a) 使用方法i. 加载所需js和css文件 ii.初始化验证控件($.formValidator.initConfig({formid:"form1",onerror:function(msg){Boxy.alert("<c enter>"+msg+"</center>",null,{title:"提示信息"});}});)iii. 表单验证($("#nl").formValidator({onshow:"请输入的年龄(1-99岁之间)",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了"}).inputValidator({min:1,max:99,type:"value",onerrormin:"你输入的值必须大于等于1",onerror:"年龄必须在1-99之间,请确认"}).defaultPassed();});)b) 参数说明:初始化验证控件:initConfig1. Formid (form 表单 id)2. Debug(是否使用debug模式,默认false) 3. Validatorgroup (验证表单分组)4. Alertmsg(alert输出提示信息,默认false) 5. Boxyalertmsg (boxy.alert输出提示信息,默认false) 6. Validobjectids (多个表单id,用“,”分隔) 7. Onsuccess (成功时回调涵数) 8. Onerror (失败时回调涵数)9. Submitonce(是否提交表单,默认false)10. Autotip(是否使用自动验证提示,默认false)ii.表单验证验证方式有如下几种 1. formValidator(基础验证)初始参数:validatorgroup : "1",jQuery formValidator使用说明说明:jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面的分离。

jQuery表单验证插件FormValidation实现个性化错误提示

jQuery表单验证插件FormValidation实现个性化错误提示
jQuery表单验证插件formValidation实现个性化错误提示
上期在[jQuery插件Validate验证表单实现javascript表单验证功能]和[jQuery插件Validation验证表单实现javascript表单智能验证功能]中分别介绍了两个实现表单验证的jQuery插件,这里介绍另外一个表单验证插件formValidation,这个插件与前面两个插件的最大区别在于它实现了个性化的错误提示信息,显示在表单元素右上角类似于提示条
<option value="4">biuuu_4</option>
</select>
四,验证电话号码
<input class="validate[required,custom[telephone]] text-input" type="text" name="telephone"/>
<script src="jquery.validationEngine.js" type="text/javascript"></script>
<link rel="stylesheet" href="validationEngine.jquery.css" type="text/css" media="screen" />
<input class="validate[required] radio" type="radio" name="radiogoupe" value="9"/>

jquery表单验证插件(jquery.validate.js)的3种使用方式

jquery表单验证插件(jquery.validate.js)的3种使用方式

jquery表单验证插件(jquery.validate.js)的3种使⽤⽅式jquery 验证⾮常简单,下⾯总结常⽤的三种⽅式:第⼀种⽅式:也是⽐较标准的⽅式:⾸先引⼊jquery 插件和 jquery 验证插件:第⼀步:引⼊插件复制代码代码如下:<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script>第⼆步:定义表单的错误输出:复制代码代码如下:<style type="text/css">#frm label.error {color: Red;}</style>第三步:添加错误处理⽅法;jquery验证,需要有:1:定义验证⽅法2:添加验证规则下⾯贴出常⽤的验证⼩例⼦,⼀看就明⽩了。

先看效果图:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script><style type="text/css">#frm label.error {color: Red;}</style></head><script type="text/javascript">$(document).ready(function(){$("#clickme").click(function(){alert("Hello World");});$( "#frm" ).validate({rules: {username: {required: true,minlength: 4,maxlength: 20,byteMaxLength:20,valiEnglish:true},postcode: {postcodeVal:true},number: {byteMaxLength:5,numFormat:5},identifier: {sfzhValidate:true}},messages: {username: {required: "请输⼊⽤户名4--20个英⽂字符",minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!")},number: {numFormat: $.format("请输⼊{0}数字")}}});jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod("numFormat",function(value,element,param){return this.optional(element) || /^\d*$/.test(value);}//,$.validator.format("请输⼊数字{0}位以内"));//number(9,3)jQuery.validator.addMethod("numFormat63",function(value,element){return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);},$.validator.format("请输⼊合法数字,精度格式123456.0"));jQuery.validator.addMethod("postcodeVal",function(value,element){return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);},$.validator.format("请输⼊合法的邮编"));jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);},$.validator.format("请输⼊字母或数字"));jQuery.validator.addMethod("sfzhValidate",function(value,element){return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);},$.validator.format("请输⼊合法⾝份证号"));jQuery.validator.addMethod("valiEnglish",function(value,element){return this.optional(element) || /^[a-zA-Z ]*$/.test(value);},$.validator.format("请输⼊字母或者空格"));});</script><body><form id="frm" name="frm" method="post" action=""><label>⽤户名:<input type="text" name="username" id="username" /></label><p><label>邮编 :<label></label></label><label><input type="text" name="postcode" id="postcode" /><br /></label></p><p><label>数字 :<input type="text" name="number" id="number" /></label><br /><label>⾝份证号:<input type="text" name="identifier" id="identifier" /></label>&nbsp;<label><input type="button" name="clickme" id="clickme" value="click me" /></label></p></form></body></html>这是⼀个完整的验证⽰例,关于引⼊的代码已经上传,可以下⾯讲解其中的重点⽅法:jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod() ⽅法,有三个参数,第⼀个参数: “byteMaxLength” 是定义⽅法名,必须保证⽅法名唯⼀,是⼀个identifier标志。

Jquery.form插件实现跨域异步上传功能

Jquery.form插件实现跨域异步上传功能

Jquery.form插件实现跨域异步上传功能Jquery.form插件实现跨域异步上传功能导语:下面我们借助了Jquery.form插件实现跨域异步上传功能,但是对于IE10以下的浏览器来说,我们就不能用这种方式了,如果我们换个思路让服务端去重写向我们的客户端,由客户端(与文件上传页面在同域下)来返回相关数据即可,下面是店铺给大家提供的Jquery.form插件实现跨域异步上传功能代码实现,大家可以参考阅读,更多详情请关注店铺。

1、Jquery.form的使用<form method="post" action="http://127.0.0.1:801/Home/UploadResult"enctype="multipart/form-data" id="form1"><input name="qdctvfile" id="qdctvfile11" type="file" onchange="eventStart()"></form><script type="text/javascript">$("#form1").ajaxForm({beforeSerialize: function () {var filepath = $("#qdctvfile11").val()var extStart = stIndexOf(".");var ext = filepath.substring(extStart, filepath.length).toUpperCase();if (ext != ".PNG" && ext != ".JPG") {alert("图片仅支持png,jpg格式");$("#qdctvfile11").val("");return false;}},success: function (data) {alert(data);}});function eventStart(obj) {$("#form1").submit();}注意,代码中的eventStart方法是指在选择文件后,自动提交表单,而ajaxForm表示提交表单为异常方式,success回调方法是指异步返回表单地址的返回值。

jQuery表单验证插件即将奉上

jQuery表单验证插件即将奉上

jQuery表单验证插件即将奉上1⽉11⽇中午提供下载,包括API帮助⽂档和源码,还有⽰例代码,谢谢⼤家的⽀持jQuery formValidator表单验证插件它是基于jQuery类库,实现了js脚本于页⾯的分离,把插件所有的全局函数压进⼀个对象,避免了函数命名冲突,体现了类的封装性。

⾟苦⼀个周末,终见成果,欢迎⼤家调⽤《formValidator表单验证插件》注:如果跟我写的⼏个⽇期控件、数字控件结合使⽤,那代码量将更少,建议把⽇期控件和数字控件设置为:只控制输⼊,即OnlyInput=true。

API帮助⽂档已经写好,jQuery的链式操作可以使插件实现⼀⾏代码实现⼀个对象的所有控制主要功能包括:1、⽹页上⽂字提⽰(图上的采⽤这个模式)或者弹出窗⼝提⽰2、呈现时的提⽰3、可以为空,空时的提⽰4、获得焦点提⽰5、发⽣不同种错误,给出不同的提⽰6、可以为空,不为空时要检验控制7、长度控制8、范围控制9、2个对象⽐较控制10、选择个数控制11、Ajax读取数据12、正则表达式控制13、同个页⾯,你可以划分多个校验组,每个组的校验都是互不影响的14、单个对象或者整个校验组验证完成、或者出错,有额外的回调函数提供1-12的功能,对⼀个对象,你只需要写⼀⾏代码就可以轻松实现(效果请看图)先挂⼏句代码给⼤家看看例1:要求输⼊2次密码,都不能为空,⽽且两次输⼊要⼀致,不同错误给出不同提⽰$("#password1").formValidator({onshow:"请输⼊密码",onfocus:"两次密码必须⼀致哦",oncorrect:"密码⼀致"}).InputValidator({min:1,onerror:"密码不能为空,请确认"}).CompareValidator({desID:"password2",operateor:"=",onerror:"2次密码不⼀致,请确认"});例2:要求输⼊年龄,不能为空,长度必须为1-2位,⽽且要在10-60之间,不同错误给出不同提⽰$("#nl").formValidator({onshow:"请输⼊的年龄(10-60岁之间)",onfocus:"只能输⼊10-60之间的数字哦",oncorrect:"恭喜你,你输对了"}).InputValidator({min:1,max:2,onerror:"年龄的长度必须是1-2位,请确认"}).InputValidator({min:10,max:60,type:"value",onerror:"年龄必须在10-60之间,请确认"});第⼆篇原创预告:的⽇期控件,绝对⽐cnblogs控件组提供的⽇期控件使⽤第三篇原创预告:的数字控件第四篇原创预告:万能查询窗⼝(你看过powerbuilder版本的万能查询吗?我的,⽐这个好),基于json轻量集的数据载体,利⽤ajax技术,实习⽆刷新。

jquery表单插件form使用方法详解

jquery表单插件form使用方法详解

jquery表单插件form使⽤⽅法详解传统的表单提交,都是页⾯跳转的形式,但是现在更流⾏ajax提交,那么如果希望有表单提交的简便,也有ajax的效果,有什么解决办法吗?怎么使⽤两种使⽤⽅式:第⼀种⽅式<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.9.1.min.js"></script><script src="js/jquery-form.js"></script><script>// 使⽤ajaxForm$(function(){$("#myForm").ajaxForm(function(){$("#output1").html("提交成功").show();})})</script></head><body><form id="myForm"><input type="text" name="username"><input type="text" name="password"><input type="submit" value="提交"><div id="output1" style="display: none"></div></form></body></html>第⼆种⽅式<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.9.1.min.js"></script><script src="js/jquery-form.js"></script><script>$(function(){//⽅式⼆与⽅式⼀效果⼀样$("#myForm").submit(function(){// 使⽤ajaxSubmit$(this).ajaxSubmit(function(){$("#output1").html("提交成功").show();});return false;})})</script></head><body><form id="myForm"><input type="text" name="username"><input type="text" name="password"><input type="submit" value="提交"><div id="output1" style="display: none"></div></form></body></html>感觉上第⼀种要更⽅便⼀点。

jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)

jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)

jQuery插件之jQuery.Form.js⽤法实例分析(附demo⽰例源码)本⽂实例讲述了jQuery插件之jQuery.Form.js⽤法。

分享给⼤家供⼤家参考,具体如下:⼀、jQuery.Form.js 插件的作⽤是实现Ajax提交表单。

⽅法:1.formSerilize() ⽤于序列化表单中的数据,并将其⾃动整理成适合AJAX异步请求的URL地址格式。

2.clearForm() 清除表单中所有输⼊值的内容。

3.restForm 重置表单中所有的字段内容。

即将所有表单中的字段恢复到页⾯加载时的默认值。

疑问:ajaxForm()与ajaxSubmit()的区别:答案:$("#form1").ajaxForm(); 相当于以下两⾏:$("#form1".submit)(function(){$("#form1").ajaxSubmit();return false;})也就是说ajaxFrom()会⾃动阻⽌表单提交。

⽽ajaxSubmit()不会⾃动阻⽌表单提交,想阻⽌表单提交,要⾃⼰return false;技巧1:如果希望表单提交完成后不跳转,那么⼀⾏简单的代码就能够实现,⼏乎与不使⽤表单提交是⼀样的:$("#MailForm").ajaxSubmit(function(message) {alert("表单提交已成功!");});注意:ajaxForm()与ajaxForm()都可以没有参数或者接受1个参数。

该参数既可以是⼀个回调函数,也可以是⼀个options对象。

该对象功能⾮常强⼤,说明如下:var options={url:url, //form提交数据的地址type:type, //form提交的⽅式(method:post/get)target:target, //服务器返回的响应数据显⽰在元素(Id)号确定beforeSubmit:function(), //提交前执⾏的回调函数success:function(), //提交成功后执⾏的回调函数dataType:null, //服务器返回数据类型clearForm:true, //提交成功后是否清空表单中的字段值restForm:true, //提交成功后是否重置表单中的字段值,即恢复到页⾯加载时的状态timeout:6000 //设置请求时间,超过该时间后,⾃动退出请求,单位(毫秒)。

jQuery.form.js的使用详解

jQuery.form.js的使用详解

jQuery.form.js的使⽤详解⾯临问题:form表单submit之后,后端会返回提⽰信息。

但原⽣html⽆法获取后端返回的数据,就造成了这样⼀种局⾯:提交之后,页⾯发⽣跳转,在⼀个空⽩页⾯上显⽰了后端返回的json数据,⽤户体验0分。

解决办法:使⽤jquery.form.js步骤⾃定义控制提交函数var submitChange=function () {$("form").ajaxSubmit(function (message) {alert(message.text);window.location.href="/index" rel="external nofollow" ;});return false;}//这个函数⼀是处理了后端返回的数据,⼆是返回了⼀个false,阻断了原⽣submit事件的发⽣。

改造form表单(添加onsubmit事件,返回⾃定义处理函数)<form action="/do" onsubmit="return submitChange();"></form>最后注意要把Js⽂件引⼊哦!⽐如:<script src="https:///ajax/libs/jquery.form/4.2.1/jquery.form.min.js" integrity="sha384-tIwI8+qJdZBtYYCKwRkjxBGQVZS3gGozr3CtI+5JF/oL1JmPEHzCEnIKbDbLTCer" crossorigin="anonymous"></script>以上所述是⼩编给⼤家介绍的jQuery.form.js的使⽤详解,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。

jQuery Form Plugin教程

jQuery Form Plugin教程

fieldSerialize
将表单里的元素序列化成字符串。当你只需要将表单的部分元素序列化时可以用到这个 方法。 这个方法将返回一个形如: name1=value1&name2=value2的字符串。 是否可以连环调用: 否, 这个方法返回的是一个字符串。
例子:
var queryString = $('#myFormId .specialFields').fieldSerialize();
2/15
2010-4-2
jQuery Form Plugin
var value = $('#myFormId :password').fieldValue(); alert('The password is: ' + value[0]);
resetForm
通过调用表单元素的内在的DOM 上的方法把表单重置成最初的状态。 是否可以连环调用: 是
例子:resetForm();
clearForm
清空表单所有元素的值。这个方法将会清空所有的文本框,密码框,文本域里的值,去 掉下拉列表所有被选中的项,让所有复选框和单选框里被选中的项不再选中。 是否可以连环调用: 否
$('#myFormId').clearForm();
clearFields
清空某个表单域的值。这个可以用在只需要清空表单里部分元素的值的情况。 是否可以连环调用: 否
$('#myFormId .specialFields').clearFields();
可选参数项对象
ajaxForm 和 ajaxSubmit 都支持大量的可选参数,它们通过可选参数项对象传入。可选参数项 对象只是一个简单的 JavaScript对象,里边包含了一些属性和一些值:

jqueryform的beforeSubmit提交前的回调函数

jqueryform的beforeSubmit提交前的回调函数

jqueryform的beforeSubmit提交前的回调函数ajaxForm()和ajaxSubmit()⽅法可以接受0个或1个参数,当为单个参数时,该参数可以是⼀个回调函数,也可以是⼀个options对象。

以下是⼀个options对象.var options={target:'#output1', //把服务器返回内容放⼊id为output1的元素中beforeSubmit:showRequest, //提交前的回调函数success:showResponse, //提交后的回调函数//url:url, //默认是form的action,如果申明,则会覆盖//type:type, //默认是form的method('get' or 'post'),如果申明,则会覆盖//dateType:null, //'xml','script',or 'json'(接受服务端返回的类型)//clearForm:true, //成功提交后,清除所有表单元素的值//resetForm:true, //成功提交后,重置所有表单的值//timeout:3000 //限制请求的时间,当请求⼤于3秒后,跳出请求}定义上⾯options后,就可以把此对象传递给ajaxForm()⽅法,$("#myForm").ajaxForm(options);或是$("#myForm").submit(function(){$(this).ajaxSubmit(options);return false;});在以上options中指定了两个回调函数,即beforeSubmit:showRequest和success:showResponse各函数参数如下:funtion showRequest(formData,jqForm,options){var queryString = $.param(formData);return true;}此回调函数有三个参数.第1个参数formdata是数组对象[{name:myname},{value:myvalue}],在这⾥,使⽤$.param()⽅法把它转化为字符串,得到类似"name=1&address=2",需要注意的是当表单提交时,form插件会以Ajax的⽅式⾃动提交这些数据.第2个参数jqForm是⼀个jQuery对象,它封装了表单的元素,如果需要访问jqForm的dom元素,可以把jqForm转换为DOM对象。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

这是一个全面支持表单的jQuery插件,支持文件上传,包含以下一些方法:-ajaxForm-ajaxSubmit- formToArray- formSerialize- fieldSerialize- fieldValue- clearForm- clearFields- resetForm使用时你必须依次引入jquery.js、jquery.form.js,并且顺序不能颠倒示例代码:// wait for the DOM to be loaded$(document).ready(function() {// bind 'myForm' and provide a simple callback function$('#myForm').ajaxForm(function() {alert("Thank you for your comment!");});});项目主页:/jquery/form/下载地址:/jquery/form/jquery.form.js表单插件API英文原文:/jquery/form/#api表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。

ajaxForm()增加所有需要的事件监听器,为AJAX提交表单做好准备。

ajaxForm不能提交表单。

在document的ready函数中,使用a jaxForm来为AJAX提交表单进行准备。

ajaxForm接受0个或1个参数。

这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

可链接(Chainable):可以。

实例:$('#myFormId').ajaxForm();ajaxSubmit()马上由AJAX来提交表单。

大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。

ajaxSubmit接受0个或1个参数。

这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

可链接(Chainable):可以。

实例:// 绑定表单提交事件处理器$('#myFormId').submit(function() {// 提交表单$(this).ajaxSubmit();// 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回falsereturn false;});formSerialize()将表单串行化(或序列化)成一个查询字符串。

这个方法将返回以下格式的字符串:name1=value1&name2=value2。

可链接(Chainable):不能,这个方法返回一个字符串。

实例:var queryString = $('#myFormId').formSerialize();// 现在可以使用$.get、$.post、$.ajax等来提交数据$.post('myscript.php', queryString);fieldSerialize()将表单的字段元素串行化(或序列化)成一个查询字符串。

当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。

这个方法将返回以下格式的字符串:name1=value1&name2=value2。

可链接(Chainable):不能,这个方法返回一个字符串。

实例:var queryString = $('#myFormId .specialFields').fieldSerialize();fieldValue()返回匹配插入数组中的表单元素值。

从0.91版起,该方法将总是以数组的形式返回数据。

如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。

可链接(Chainable):不能,该方法返回数组。

实例:// 取得密码输入值var value = $('#myFormId :password').fieldValue();alert('The password is: ' + value[0]);resetForm()通过调用表单元素原有的DOM方法,将表单恢复到初始状态。

可链接(Chainable):可以。

实例:$('#myFormId').resetForm();clearForm()清除表单元素。

该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。

可链接(Chainable):可以。

$('#myFormId').clearForm();clearFields()清除字段元素。

只有部分表单元素需要清除时才方便使用。

可链接(Chainable):可以。

$('#myFormId .specialFields').clearFields();Options对象ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。

Options只是一个Jav aScript对象,它包含了如下一些属性与值的集合:target指明页面中由服务器响应进行更新的元素。

元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个D OM元素。

默认值:null。

url指定提交表单数据的URL。

默认值:表单的action属性值type指定提交表单数据的方法(method):“GET”或“POST”。

默认值:表单的method属性值(如果没有找到默认为“GET”)。

beforeSubmit表单提交前被调用的回调函数。

“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。

如果“beforeSubmit”回调函数返回false,那么表单将不被提交。

“beforeSubmit”回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。

表单数组接受以下方式的数据:[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]默认值:nullsuccess表单成功提交后调用的回调函数。

如果提供“success”回调函数,当从服务器返回响应后它被调用。

然后由dataType选项值决定传回responseText还是responseXML的值。

默认值:nulldataType期望返回的数据类型。

null、“xml”、“script”或者“json”其中之一。

dataType提供一种方法,它规定了怎样处理服务器的响应。

这个被直接地反映到jQuery.httpData方法中去。

下面的值被支持:'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。

同时,如果“success”回调方法被指定,将传回resp onseXML值。

'json':如果dataType == 'json',服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。

'script':如果dataType == 'script',服务器响应将求值成纯文本。

默认值:null(服务器返回responseText值)semanticBoolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and you r form contains an input element of type="image".布尔标志,表示数据是否必须严格按照语义顺序(slower?)来进行提交。

注意:一般来说,表单已经按照语义顺序来进行了串行化(或序列化),除了type="image"的input元素。

如果你的服务器有严格的语义要求,以及表单中包含有一个type= "image"的input元素,就应该将semantic设置为true。

(译注:这一段由于无法理解,翻译出来可能语不达意,但请达人指正。

)默认值:falseresetForm布尔标志,表示如果表单提交成功是否进行重置。

Default value: nullclearForm布尔标志,表示如果表单提交成功是否清除表单数据。

默认值:null实例:// 准备好Options对象var options = {target: '#divToUpdate',url: 'comment.php',success: function() {alert('Thanks for your comment!');} };// 将options传给ajaxForm$('#myForm').ajaxForm(options);其他方法不做总结了,用的话大家在google上baidu一下相信会有很多令你满意的答案的。

本文电子文档下载。

相关文档
最新文档