- 浏览: 624466 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (819)
- java开发 (110)
- 数据库 (56)
- javascript (30)
- 生活、哲理 (17)
- jquery (36)
- 杂谈 (15)
- linux (62)
- spring (52)
- kafka (11)
- http协议 (22)
- 架构 (18)
- ZooKeeper (18)
- eclipse (13)
- ngork (2)
- dubbo框架 (6)
- Mybatis (9)
- 缓存 (28)
- maven (20)
- MongoDB (3)
- 设计模式 (3)
- shiro (10)
- taokeeper (1)
- 锁和多线程 (3)
- Tomcat7集群 (12)
- Nginx (34)
- nodejs (1)
- MDC (1)
- Netty (7)
- solr (15)
- JSON (8)
- rabbitmq (32)
- disconf (7)
- PowerDesigne (0)
- Spring Boot (31)
- 日志系统 (6)
- erlang (2)
- Swagger (3)
- 测试工具 (3)
- docker (17)
- ELK (2)
- TCC分布式事务 (2)
- marathon (12)
- phpMyAdmin (12)
- git (3)
- Atomix (1)
- Calico (1)
- Lua (7)
- 泛解析 (2)
- OpenResty (2)
- spring mvc (19)
- 前端 (3)
- spring cloud (15)
- Netflix (1)
- zipkin (3)
- JVM 内存模型 (5)
- websocket (1)
- Eureka (4)
- apollo (2)
- idea (2)
- go (1)
- 业务 (0)
- idea开发工具 (1)
最新评论
-
sichunli_030:
对于频繁调用的话,建议采用连接池机制
配置TOMCAT及httpClient的keepalive以高效利用长连接 -
11想念99不见:
你好,我看不太懂。假如我的项目中会频繁调用rest接口,是要用 ...
配置TOMCAT及httpClient的keepalive以高效利用长连接
10.表单校验组件ValidForm
10.1使用入门
1、引入css
请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的)。(之前发现有部分网友把整个style.css都引用在了页面里,然后发现样式冲突了)
2、引入js (jquery 1.4.2 以上版本都可以)
3、给需要验证的表单元素绑定附加属性
4、初始化,就这么简单
注:
1、Validform有非压缩、压缩和NCR三个版本提供下载,NCR是通用版,当你页面因编码问题,提示文字出现乱码时可以使用这个版本;
2、Validform没有限定必须使用table结构,它可以适用于任何结构,需要在tiptype中定义好位置关系。
10.2绑定附加属性
凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式。
如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非常强大的功能,通过它可以满足你的任何需求。
可以绑定的附加属性有:datatype、nullmsg、sucmsg、errormsg、ignore、recheck、tip、altercss、ajaxurl 和 plugin等。
绑定方法如下所示:
说明:
内置基本的datatype类型有: * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url
*:检测是否有输入,可以输入任何字符,不留空即可通过验证;
*6-16:检测是否为6到16位任意字符;
n:数字类型;
n6-16:6到16位数字;
s:字符串类型;
s6-18:6到18位字符串;
p:验证是否为邮政编码;
m:手机号码格式;
e:email格式;
url:验证字符串是否为网址。
自定义datatype的名称,可以由字母、数字、下划线、中划线和*号组成。
形如"*6-16"的datatype,Validform会自动扩展,可以指定任意的数值范围。如内置基本类型有"*6-16",那么你绑定datatype="*4-12"就表示4到12位任意字符。如果你自定义了一个datatype="zh2-4",表示2到4位中文字符,那么datatype="zh2-6"就表示2到6位中文字符。
5.2版本之后,datatype支持规则累加或单选。用","分隔表示规则累加;用"|"分隔表示规则多选一,即只要符合其中一个规则就可以通过验证,绑定的规则会依次验证,只要验证通过,后面的规则就会忽略不再比较。如绑定datatype="m|e",表示既可以填写手机号码,也能填写邮箱地址,如果知道填入的是手机号码,那么就不会再检测他是不是邮箱地址;datatype="zh,s2-4",表示要符合自定义类型"zh",也要符合规则"s2-4"。
注:
5.2.1版本之后,datatype支持:
直接绑定正则:如可用这样写datatype="/\w{3,6}/i",要求是3到6位的字母,不区分大小写;
支持简单的逻辑运算:如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform\.rjboy\.cn$/",
这个表达式的意思是:可以是手机号码;或者是邮箱地址,但字符长度必须在4到18位;或者是3到6位的字母,不区分大小写;或者输入validform.rjboy.cn,区分大小写。这里","分隔相当于逻辑运算里的"&&"; "|"分隔相当于逻辑运算里的"||";不支持括号运算。
nullmsg
当表单元素值为空时的提示信息,不绑定,默认提示"请填入信息!"。
如:nullmsg="请填写用户名!"
5.3版开始,对于没有绑定nullmsg的对象,会自动查找class为Validform_label下的文字作为提示文字:
如这样的html结构:
<span class="Validform_label">*用户名:</span><inputtype="text" val="" datatype="s" />
当这个文本框里没有输入时的出错信息就会是:"请输入用户名!"
这里Validform_label跟input之间的位置关系,不一定是要同级关系,同级里没有找到的话,它还会在同级的子级、父级的同级、父级的同级的子级里查找。
sucmsg 5.3+
当表单元素通过验证时的提示信息,不绑定,默认提示"通过信息验证!"。
如:sucmsg="用户名还未被使用,可以注册!"
5.3版开始,也可以在实时验证返回的json数据里返回成功的提示文字,请查看附加属性ajaxurl的介绍。
errormsg
输入内容不能通过验证时的提示信息,默认提示"请输入正确信息!"。
如:errormsg="用户名必须是2到4位中文字符!"
5.3版开始,Validform可以根据你绑定的datatype智能的输出相应出错信息,具体介绍请查看tipmsg
ignore
绑定了ignore="ignore"的表单元素,在有输入时,会验证所填数据是否符合datatype所指定数据类型,
没有填写内容时则会忽略对它的验证;
recheck
表单里面经常需要检查两次密码输入是否一致,recheck就是用来指定需要比较的另外一个表单元素。
如:recheck="password1",那么它就会拿当前元素的值跟该表单下,name为"password1"的元素比较。
tip
表单里经常有些文本框需要默认就显示一个灰色的提示文字,当获得焦点时提示文字消失,失去焦点时提示文字显示。tip属性就是用来实现这个效果。它通常和altercss搭配使用。
如<input type="text"value="默认提示文字" class="gray intxt"tip="默认提示文字" altercss="gray" />
altercss
它需要和tip属性配合使用,altercss指定的样式名,会在文本框获得焦点时被删除,没有输入内容而失去焦点时重新加上。
ajaxurl
指定ajax实时验证的后台文件的地址。
后台页面如valid.php文件中可以用 $_POST["param"] 接收到值,Ajax中会POST过来变量param和name。param是文本框的值,name是文本框的name属性。
5.2版本开始,可以在ajaxurl指定的url后绑定参数,如:
ajaxurl="valid.php?myparam1=value1&myparam2=value2";
5.3之前的版本中,该文件输出的字符会作为错误信息显示在页面上,如果验证通过需输出小写字母"y"。
在5.3版中,实时验证的返回数据做了调整,须是含有status值的json数据!跟callback里的ajax返回数据格式统一,建议不再返回字符串"y"或"n"。目前这两种格式的数据都兼容。
注:
如果ajax校验通过,会在该元素上绑定validform_valid值为true。可以通过设置该值来控制验证能不能通过,如验证码的验证,第一次验证通过后,不小心右点击了下验证码图片,验证码换了,但是仍然指示这个对象已经通过了验证,这时可以手动调整该值:$("#name")[0].validform_valid="false"。
怎样设置ajax的参数,具体可以查看Validform对象的config方法。
plugin
指定需要使用的插件。
5.3版开始,对于日期、swfupload和密码强度检测这三个插件,绑定了plugin属性即可以初始化对应的插件,可以不用在validform初始化时传入空的usePlugin了。
如,你要使用日期插件,5.3之前版本需要这样初始化:
$(".demoform").Validform({
usePlugin:{
datepicker:{}
}
});
5.3版开始,不需要传入这些空对象了,只需在表单元素上绑定plugin="datepicker"就可以,初始化直接这样:
$(".demoform").Validform();
10.3初始化参数说明
所有可用的参数如下:
$(".demoform").Validform({
btnSubmit:"#btn_sub",
btnReset:".btn_reset",
tiptype:1,
ignoreHidden:false,
dragonfly:false,
tipSweep:true,
showAllError:false,
postonce:true,
ajaxPost:true,
datatype:{
"*6-20":/^[^\s]{6,20}$/,
"z2-4":/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"username":function(gets,obj,curform,regxp){
//参数gets是获取到的表单元素值,obj为当前表单元素,curform为当前验证的表单,regxp为内置的一些正则表达式的引用;
var reg1=/^[\w\.]{4,16}$/,
reg2=/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;
if(reg1.test(gets)){returntrue;}
if(reg2.test(gets)){returntrue;}
returnfalse;
//注意return可以返回true或 false 或字符串文字,true表示验证通过,返回字符串表示验证失败,字符串作为错误提示显示,返回false则用errmsg或默认的错误提示;
},
"phone":function(){
// 5.0 版本之后,要实现二选一的验证效果,datatype的名称不需要以 "option_"开头;
}
},
usePlugin:{
swfupload:{},
datepicker:{},
passwordstrength:{},
jqtransform:{
selector:"select,input"
}
},
beforeCheck:function(curform){
//在表单提交执行验证之前执行的函数,curform参数是当前表单对象。
//这里明确return false的话将不会继续执行验证操作;
},
beforeSubmit:function(curform){
//在验证成功后,表单提交前执行的函数,curform参数是当前表单对象。
//这里明确return false的话表单将不会提交;
},
callback:function(data){
//返回数据data是json格式,{"info":"demo info","status":"y"}
//info: 输出提示信息;
//status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功,"n"表示提交失败,在ajax_post.php文件返回数据里自定字符,主要用在callback函数里根据该值执行相应的回调操作;
//你也可以在ajax_post.php文件返回更多信息在这里获取,进行相应操作;
//ajax遇到服务端错误时也会执行回调,这时的data是{ status:**, statusText:**, readyState:**, responseText:** };
//这里执行回调操作;
//注意:如果不是ajax方式提交表单,传入callback,这时data参数是当前表单对象,回调函数会在表单验证全部通过后执行,然后判断是否提交表单,如果callback里明确return false,则表单不会提交,如果return true或没有return,则会提交表单。
}
});
参数说明:【所有参数均为可选项】
必须是表单对象执行Validform方法,示例中".demoform"就是绑定在form元素上的class名称;
btnSubmit
指定当前表单下的哪一个按钮触发表单提交事件,如果表单下有submit按钮时可以省略该参数。示例中".btn_sub"是该表单下要绑定点击提交表单事件的按钮;
btnReset
".btn_reset"是该表单下要绑定点击重置表单事件的按钮;
tiptype
可用的值有:1、2、3、4和function函数,默认tiptype为1。( 3、4是5.2.1版本新增)
1=>自定义弹出框提示;
2=>侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
3=>侧边提示(会在当前元素的siblings对象中查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
4=>侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象,表单以ajax提交时不显示表单的提交状态);
如果上面的4种提示方式不是你需要的,你可以给tiptype传入自定义函数。通过自定义函数,可以实现你想要的任何提示效果:
tiptype:function(msg,o,cssctl){
//msg:提示信息;
//o:{obj:*,type:*,curform:*},
//obj指向的是当前验证的表单元素(或表单对象,验证全部验证通过,提交表单时o.obj为该表单对象),
//type指示提示的状态,值为1、2、3、4, 1:正在检测/提交数据,2:通过验证,3:验证失败,4:提示ignore状态,
//curform为当前form对象;
//cssctl:内置的提示信息样式控制函数,该函数需传入两个参数:显示提示信息的对象和当前提示的状态(既形参o中的type);
}
具体参见demo页。
tiptype不为1时,Validform会查找class为"Validform_checktip"的标签显示提示信息。tiptype=1时,会自动创建弹出框显示提示信息。
Validform_checktip和表单元素之间的位置关系,会根据tiptype的值有对应的结构,上面已经做了说明。
5.3版本开始,如果页面里没有显示出错信息的标签,会根据tiptype值自动创建Validform_checktip对象。
ignoreHidden
可用值: true | false。
默认为false,当为true时对:hidden的表单元素将不做验证;
dragonfly
可用值: true | false。
默认false,当为true时,值为空时不做验证;
tipSweep
可用值: true | false。
默认为false, 5.3版中做了修正,在各种tiptype下, 为true时提示信息将只会在表单提交时触发显示,各表单元素blur时不会触发信息提示;
showAllError
可用值: true | false。
默认为false,true:提交表单时所有错误提示信息都会显示;false:一碰到验证不通过的对象就会停止检测后面的元素,只显示该元素的错误信息;
postonce
可用值: true | false。
默认为false,指定是否开启二次提交防御,true开启,不指定则默认关闭;
为true时,在数据成功提交后,表单将不能再继续提交。
ajaxPost
可用值: true | false。
默认为false,使用ajax方式提交表单数据,将会把数据POST到config方法或表单action属性里设定的地址;
datatype
传入自定义datatype类型,可以是正则,也可以是函数。
datatyp:{
"zh2-4":/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"phone":function(gets,obj,curform,regxp){
//参数gets是获取到的表单元素值,
//obj为当前表单元素,
//curform为当前验证的表单,
//regxp为内置的一些正则表达式的引用。
//return false表示验证出错,没有return或者return true表示验证通过。
}
}
具体示例请参考demo页;
usePlugin
目前已整合swfupload、datepicker、passwordstrength和jqtransform四个插件,在这里传入这些插件使用时需要传入的参数。datepicker在Validform内调用时另外扩展了几个比较实用的参数,具体请参考demo页;
beforeCheck(curform)
在表单提交执行验证之前执行的函数,curform参数获取到的是当前表单对象。
函数return false的话将不会继续执行验证操作;
beforeSubmit(curform)
在表单验证通过,提交表单数据之前执行的函数,data参数是当前表单对象。
函数return false的话表单将不会提交;
callback
在使用ajax提交表单数据时,数据提交后的回调函数。返回数据data是Json格式:
{"info":"demo info","status":"y"}
info: 输出提示信息,
status: 返回提交数据的状态,是否提交成功,"y"表示提交成功,"n"表示提交失败,在ajax_post.php文件返回数据里自定字符,主要用在callback函数里根据该值执行相应的回调操作。你也可以在ajax_post.php文件返回更多信息在这里获取,进行相应操作;
如果不是ajax方式提交表单,传入callback,这时data参数是当前表单对象,回调函数会在表单验证全部通过后执行,然后判断是否提交表单,如果callback里return false,则表单不会提交,如果return true或没有return,则会提交表单。
5.3版开始,ajax遇到服务端错误时也会执行回调,这时的data是{ status:**,statusText:**, readyState:**, responseText:** }
转自:http://blog.csdn.net/zhangdaiscott/article/details/26375043
10.1使用入门
1、引入css
请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的)。(之前发现有部分网友把整个style.css都引用在了页面里,然后发现样式冲突了)
2、引入js (jquery 1.4.2 以上版本都可以)
3、给需要验证的表单元素绑定附加属性
4、初始化,就这么简单
注:
1、Validform有非压缩、压缩和NCR三个版本提供下载,NCR是通用版,当你页面因编码问题,提示文字出现乱码时可以使用这个版本;
2、Validform没有限定必须使用table结构,它可以适用于任何结构,需要在tiptype中定义好位置关系。
10.2绑定附加属性
凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式。
如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非常强大的功能,通过它可以满足你的任何需求。
可以绑定的附加属性有:datatype、nullmsg、sucmsg、errormsg、ignore、recheck、tip、altercss、ajaxurl 和 plugin等。
绑定方法如下所示:
说明:
内置基本的datatype类型有: * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url
*:检测是否有输入,可以输入任何字符,不留空即可通过验证;
*6-16:检测是否为6到16位任意字符;
n:数字类型;
n6-16:6到16位数字;
s:字符串类型;
s6-18:6到18位字符串;
p:验证是否为邮政编码;
m:手机号码格式;
e:email格式;
url:验证字符串是否为网址。
自定义datatype的名称,可以由字母、数字、下划线、中划线和*号组成。
形如"*6-16"的datatype,Validform会自动扩展,可以指定任意的数值范围。如内置基本类型有"*6-16",那么你绑定datatype="*4-12"就表示4到12位任意字符。如果你自定义了一个datatype="zh2-4",表示2到4位中文字符,那么datatype="zh2-6"就表示2到6位中文字符。
5.2版本之后,datatype支持规则累加或单选。用","分隔表示规则累加;用"|"分隔表示规则多选一,即只要符合其中一个规则就可以通过验证,绑定的规则会依次验证,只要验证通过,后面的规则就会忽略不再比较。如绑定datatype="m|e",表示既可以填写手机号码,也能填写邮箱地址,如果知道填入的是手机号码,那么就不会再检测他是不是邮箱地址;datatype="zh,s2-4",表示要符合自定义类型"zh",也要符合规则"s2-4"。
注:
5.2.1版本之后,datatype支持:
直接绑定正则:如可用这样写datatype="/\w{3,6}/i",要求是3到6位的字母,不区分大小写;
支持简单的逻辑运算:如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform\.rjboy\.cn$/",
这个表达式的意思是:可以是手机号码;或者是邮箱地址,但字符长度必须在4到18位;或者是3到6位的字母,不区分大小写;或者输入validform.rjboy.cn,区分大小写。这里","分隔相当于逻辑运算里的"&&"; "|"分隔相当于逻辑运算里的"||";不支持括号运算。
nullmsg
当表单元素值为空时的提示信息,不绑定,默认提示"请填入信息!"。
如:nullmsg="请填写用户名!"
5.3版开始,对于没有绑定nullmsg的对象,会自动查找class为Validform_label下的文字作为提示文字:
如这样的html结构:
<span class="Validform_label">*用户名:</span><inputtype="text" val="" datatype="s" />
当这个文本框里没有输入时的出错信息就会是:"请输入用户名!"
这里Validform_label跟input之间的位置关系,不一定是要同级关系,同级里没有找到的话,它还会在同级的子级、父级的同级、父级的同级的子级里查找。
sucmsg 5.3+
当表单元素通过验证时的提示信息,不绑定,默认提示"通过信息验证!"。
如:sucmsg="用户名还未被使用,可以注册!"
5.3版开始,也可以在实时验证返回的json数据里返回成功的提示文字,请查看附加属性ajaxurl的介绍。
errormsg
输入内容不能通过验证时的提示信息,默认提示"请输入正确信息!"。
如:errormsg="用户名必须是2到4位中文字符!"
5.3版开始,Validform可以根据你绑定的datatype智能的输出相应出错信息,具体介绍请查看tipmsg
ignore
绑定了ignore="ignore"的表单元素,在有输入时,会验证所填数据是否符合datatype所指定数据类型,
没有填写内容时则会忽略对它的验证;
recheck
表单里面经常需要检查两次密码输入是否一致,recheck就是用来指定需要比较的另外一个表单元素。
如:recheck="password1",那么它就会拿当前元素的值跟该表单下,name为"password1"的元素比较。
tip
表单里经常有些文本框需要默认就显示一个灰色的提示文字,当获得焦点时提示文字消失,失去焦点时提示文字显示。tip属性就是用来实现这个效果。它通常和altercss搭配使用。
如<input type="text"value="默认提示文字" class="gray intxt"tip="默认提示文字" altercss="gray" />
altercss
它需要和tip属性配合使用,altercss指定的样式名,会在文本框获得焦点时被删除,没有输入内容而失去焦点时重新加上。
ajaxurl
指定ajax实时验证的后台文件的地址。
后台页面如valid.php文件中可以用 $_POST["param"] 接收到值,Ajax中会POST过来变量param和name。param是文本框的值,name是文本框的name属性。
5.2版本开始,可以在ajaxurl指定的url后绑定参数,如:
ajaxurl="valid.php?myparam1=value1&myparam2=value2";
5.3之前的版本中,该文件输出的字符会作为错误信息显示在页面上,如果验证通过需输出小写字母"y"。
在5.3版中,实时验证的返回数据做了调整,须是含有status值的json数据!跟callback里的ajax返回数据格式统一,建议不再返回字符串"y"或"n"。目前这两种格式的数据都兼容。
注:
如果ajax校验通过,会在该元素上绑定validform_valid值为true。可以通过设置该值来控制验证能不能通过,如验证码的验证,第一次验证通过后,不小心右点击了下验证码图片,验证码换了,但是仍然指示这个对象已经通过了验证,这时可以手动调整该值:$("#name")[0].validform_valid="false"。
怎样设置ajax的参数,具体可以查看Validform对象的config方法。
plugin
指定需要使用的插件。
5.3版开始,对于日期、swfupload和密码强度检测这三个插件,绑定了plugin属性即可以初始化对应的插件,可以不用在validform初始化时传入空的usePlugin了。
如,你要使用日期插件,5.3之前版本需要这样初始化:
$(".demoform").Validform({
usePlugin:{
datepicker:{}
}
});
5.3版开始,不需要传入这些空对象了,只需在表单元素上绑定plugin="datepicker"就可以,初始化直接这样:
$(".demoform").Validform();
10.3初始化参数说明
所有可用的参数如下:
$(".demoform").Validform({
btnSubmit:"#btn_sub",
btnReset:".btn_reset",
tiptype:1,
ignoreHidden:false,
dragonfly:false,
tipSweep:true,
showAllError:false,
postonce:true,
ajaxPost:true,
datatype:{
"*6-20":/^[^\s]{6,20}$/,
"z2-4":/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"username":function(gets,obj,curform,regxp){
//参数gets是获取到的表单元素值,obj为当前表单元素,curform为当前验证的表单,regxp为内置的一些正则表达式的引用;
var reg1=/^[\w\.]{4,16}$/,
reg2=/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;
if(reg1.test(gets)){returntrue;}
if(reg2.test(gets)){returntrue;}
returnfalse;
//注意return可以返回true或 false 或字符串文字,true表示验证通过,返回字符串表示验证失败,字符串作为错误提示显示,返回false则用errmsg或默认的错误提示;
},
"phone":function(){
// 5.0 版本之后,要实现二选一的验证效果,datatype的名称不需要以 "option_"开头;
}
},
usePlugin:{
swfupload:{},
datepicker:{},
passwordstrength:{},
jqtransform:{
selector:"select,input"
}
},
beforeCheck:function(curform){
//在表单提交执行验证之前执行的函数,curform参数是当前表单对象。
//这里明确return false的话将不会继续执行验证操作;
},
beforeSubmit:function(curform){
//在验证成功后,表单提交前执行的函数,curform参数是当前表单对象。
//这里明确return false的话表单将不会提交;
},
callback:function(data){
//返回数据data是json格式,{"info":"demo info","status":"y"}
//info: 输出提示信息;
//status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功,"n"表示提交失败,在ajax_post.php文件返回数据里自定字符,主要用在callback函数里根据该值执行相应的回调操作;
//你也可以在ajax_post.php文件返回更多信息在这里获取,进行相应操作;
//ajax遇到服务端错误时也会执行回调,这时的data是{ status:**, statusText:**, readyState:**, responseText:** };
//这里执行回调操作;
//注意:如果不是ajax方式提交表单,传入callback,这时data参数是当前表单对象,回调函数会在表单验证全部通过后执行,然后判断是否提交表单,如果callback里明确return false,则表单不会提交,如果return true或没有return,则会提交表单。
}
});
参数说明:【所有参数均为可选项】
必须是表单对象执行Validform方法,示例中".demoform"就是绑定在form元素上的class名称;
btnSubmit
指定当前表单下的哪一个按钮触发表单提交事件,如果表单下有submit按钮时可以省略该参数。示例中".btn_sub"是该表单下要绑定点击提交表单事件的按钮;
btnReset
".btn_reset"是该表单下要绑定点击重置表单事件的按钮;
tiptype
可用的值有:1、2、3、4和function函数,默认tiptype为1。( 3、4是5.2.1版本新增)
1=>自定义弹出框提示;
2=>侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
3=>侧边提示(会在当前元素的siblings对象中查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
4=>侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象,表单以ajax提交时不显示表单的提交状态);
如果上面的4种提示方式不是你需要的,你可以给tiptype传入自定义函数。通过自定义函数,可以实现你想要的任何提示效果:
tiptype:function(msg,o,cssctl){
//msg:提示信息;
//o:{obj:*,type:*,curform:*},
//obj指向的是当前验证的表单元素(或表单对象,验证全部验证通过,提交表单时o.obj为该表单对象),
//type指示提示的状态,值为1、2、3、4, 1:正在检测/提交数据,2:通过验证,3:验证失败,4:提示ignore状态,
//curform为当前form对象;
//cssctl:内置的提示信息样式控制函数,该函数需传入两个参数:显示提示信息的对象和当前提示的状态(既形参o中的type);
}
具体参见demo页。
tiptype不为1时,Validform会查找class为"Validform_checktip"的标签显示提示信息。tiptype=1时,会自动创建弹出框显示提示信息。
Validform_checktip和表单元素之间的位置关系,会根据tiptype的值有对应的结构,上面已经做了说明。
5.3版本开始,如果页面里没有显示出错信息的标签,会根据tiptype值自动创建Validform_checktip对象。
ignoreHidden
可用值: true | false。
默认为false,当为true时对:hidden的表单元素将不做验证;
dragonfly
可用值: true | false。
默认false,当为true时,值为空时不做验证;
tipSweep
可用值: true | false。
默认为false, 5.3版中做了修正,在各种tiptype下, 为true时提示信息将只会在表单提交时触发显示,各表单元素blur时不会触发信息提示;
showAllError
可用值: true | false。
默认为false,true:提交表单时所有错误提示信息都会显示;false:一碰到验证不通过的对象就会停止检测后面的元素,只显示该元素的错误信息;
postonce
可用值: true | false。
默认为false,指定是否开启二次提交防御,true开启,不指定则默认关闭;
为true时,在数据成功提交后,表单将不能再继续提交。
ajaxPost
可用值: true | false。
默认为false,使用ajax方式提交表单数据,将会把数据POST到config方法或表单action属性里设定的地址;
datatype
传入自定义datatype类型,可以是正则,也可以是函数。
datatyp:{
"zh2-4":/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"phone":function(gets,obj,curform,regxp){
//参数gets是获取到的表单元素值,
//obj为当前表单元素,
//curform为当前验证的表单,
//regxp为内置的一些正则表达式的引用。
//return false表示验证出错,没有return或者return true表示验证通过。
}
}
具体示例请参考demo页;
usePlugin
目前已整合swfupload、datepicker、passwordstrength和jqtransform四个插件,在这里传入这些插件使用时需要传入的参数。datepicker在Validform内调用时另外扩展了几个比较实用的参数,具体请参考demo页;
beforeCheck(curform)
在表单提交执行验证之前执行的函数,curform参数获取到的是当前表单对象。
函数return false的话将不会继续执行验证操作;
beforeSubmit(curform)
在表单验证通过,提交表单数据之前执行的函数,data参数是当前表单对象。
函数return false的话表单将不会提交;
callback
在使用ajax提交表单数据时,数据提交后的回调函数。返回数据data是Json格式:
{"info":"demo info","status":"y"}
info: 输出提示信息,
status: 返回提交数据的状态,是否提交成功,"y"表示提交成功,"n"表示提交失败,在ajax_post.php文件返回数据里自定字符,主要用在callback函数里根据该值执行相应的回调操作。你也可以在ajax_post.php文件返回更多信息在这里获取,进行相应操作;
如果不是ajax方式提交表单,传入callback,这时data参数是当前表单对象,回调函数会在表单验证全部通过后执行,然后判断是否提交表单,如果callback里return false,则表单不会提交,如果return true或没有return,则会提交表单。
5.3版开始,ajax遇到服务端错误时也会执行回调,这时的data是{ status:**,statusText:**, readyState:**, responseText:** }
转自:http://blog.csdn.net/zhangdaiscott/article/details/26375043
发表评论
-
解决 CSDN 登录后才能复制的功能
2022-01-10 18:02 1032javascript:document.body.conten ... -
Flutter和RN对比
2021-10-22 11:33 399Flutter和RN对比 Flutter介绍和主流框架的对比 ... -
window.opener引用为null的解决办法
2021-03-14 14:15 2061http://www.bubuko.com/infodetai ... -
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2021-02-01 20:37 374https://www.jb51.net/article/18 ... -
超链接实现post方式提交
2021-01-26 21:39 733https://lusaijie.blog.csdn.net/ ... -
Model模态框点击其他除了模态框区域不消失
2020-10-24 18:47 552问题: 相信许多的小伙伴在使用Model(模态框)的时候都遇到 ... -
jquery radio 动态控制选中失效问题的解决方法
2019-09-10 21:36 406性别选择 男女 通常是使用radio 在修改客户资料时 需要根 ... -
velocity判断空和null
2019-07-02 17:34 363https://jiangctry.iteye.com/blo ... -
超链接实现post方式提交
2019-07-02 14:05 651https://blog.csdn.net/yalishada ... -
layui select下拉框改变之 change 监听事件
2019-04-10 10:21 893https://blog.csdn.net/weixin_36 ... -
如何和何时使用CSS的!important
2019-04-09 20:45 356https://www.w3cplus.com/css/the ... -
jQuery实现checkbox全选功能完整实例
2019-02-27 19:34 392使用jQuery完成复选框的全选和全不选 https://bl ... -
如何在bootstrap模态框弹出后触发函数
2018-09-13 22:11 738如何在bootstrap模态框弹出后触发函数 https:// ... -
JQuery跳出each循环的方法(包含数组遍历)
2018-05-15 20:01 381https://www.cnblogs.com/fanbi/p ... -
<iframe>标签自适应高度和宽度
2018-04-22 13:06 386引用 <iframe src="index.h ... -
Cookie和Session的作用和工作原理
2018-02-05 19:44 529http://blog.csdn.net/guoweimelo ... -
JQuery 插件之Ajax Autocomplete(ajax自动完成)
2018-01-01 21:49 503https://www.cnblogs.com/maxiao/ ... -
jMessageBox
2017-04-23 16:35 393http://www.thinksaas.cn/topics/ ... -
ajax跨域访问
2017-03-13 07:29 575No 'Access-Control-Allow-Origin ... -
ajaxFileUpload 报这错jQuery.handleError is not a function
2016-12-08 15:56 465转自:http://zhangzhaoaaa.iteye.co ...
相关推荐
而Validform是基于jQuery的一款强大且易用的表单验证插件,它提供了丰富的验证规则和灵活的配置选项,适用于各种复杂的表单场景。 **一、Validform的功能特性** 1. **多样化验证规则**:Validform涵盖了多种常见的...
jQuery Validform是一款强大的表单验证插件,它以其简洁的API和高度可定制化的特点,在前端开发中广受欢迎。本文将详细介绍如何使用jQuery Validform插件来实现高效、灵活的表单验证。 **一、Validform简介** ...
Validform是一款基于jQuery的强大的表单验证框架,它专注于提供简单、高效、灵活的表单验证解决方案。在Web应用中,表单验证是必不可少的部分,它能确保用户输入的数据符合预设规则,减少服务器端的压力,提升用户...
Validform是一款基于jQuery的轻量级表单验证插件,以其简洁的API和友好的用户体验受到开发者的青睐。本文将深入探讨Validform的使用方法和核心功能。 **1. 安装与引入** 在项目中使用Validform,首先需要在HTML文件...
ValidForm是一款强大的JavaScript表单验证插件,它专注于提供灵活、高效的前端验证解决方案。通过ValidForm,开发者能够轻松实现对用户输入的多种类型数据进行检查,包括但不限于不能为空、数字、邮政编码、手机号码...
Validform是一款强大的前端表单验证框架,主要用于提升用户体验和数据安全性,确保用户在网页表单中输入的数据符合预设的规则。它具有丰富的验证规则、灵活的API接口和高度自定义的功能,使得开发者能够轻松地对表单...
Validform是一款广泛应用于前端开发中的强大表单验证插件,主要用于提升用户体验,确保用户输入的数据符合预设的规则,从而避免无效或错误的数据提交到服务器。它基于JavaScript和jQuery库,使得在网页中实现复杂的...
Validform是基于jQuery的一个高效、强大的表单验证插件,它允许开发者通过一行简单的代码就能实现全站的表单验证。 Validform插件的亮点在于其高度可定制性和灵活性。它可以轻松地处理各种复杂的验证场景,如邮箱...
ValidForm是一款强大的JavaScript表单验证插件,专为前端开发者设计,用于实现高效、便捷的表单数据验证。它的核心功能在于提供了一种简洁的方法,让开发者能够在用户提交表单前,对输入的数据进行实时检查,确保...
Validform是一款强大的JavaScript表单验证框架,它旨在简化前端数据验证的过程,提高用户体验。这款工具提供了丰富的验证规则和灵活的配置选项,适用于各种复杂的表单场景。在"validform demo"中,我们可以深入理解...
Validform_v5.3.2是一款专为前端开发者设计的高效、易用的表单验证插件。这个版本5.3.2包含了完整的示例(demo),使得开发者可以在本地环境中直接进行测试和学习,无需依赖在线加载资源。更新此插件时,只需要替换`...
Validform 是一个强大的JavaScript表单验证框架,专为前端开发者设计,用于简化和增强网页表单的数据验证。在"Validform_v5.3.2 demo"中,我们可以通过实例了解到如何使用这个版本的Validform来创建高效且用户体验...
Validform是一款表单验证的插件,它能够将验证条件和验证提示信息绑定到表单的每个元素上。使用Validform可以简化表单验证的过程,通过设定不同的验证规则来确保用户提交的数据符合预期要求。Validform表单验证插件...
Validform_v5.1 是一个专门用于JavaScript表单验证的库,它的主要目的是帮助开发者以简洁高效的方式实现前端数据校验。在Web开发中,表单验证是必不可少的一部分,它确保用户输入的数据符合预设的规则,从而提高用户...
Validform是一款强大的JavaScript表单验证框架,它使得前端开发者能够轻松地实现对用户输入数据的实时验证,确保数据的完整性和正确性。在"使用Validform的小例子程序"中,我们可以学习如何有效地应用Validform来...
Validform_v5.3.2 是一款强大的前端表单验证插件,专注于提供高效、便捷的验证解决方案。在5.3.2版本中,它引入了一个重要的特性:远程验证支持跨域。这一特性使得开发者能够轻松地实现对用户输入数据的实时、服务器...
Validform_v5.3.2_min.js好用的表单验证工具,实现多种验证,数字、电话、邮箱
Validform_v5.3.2 是一个用于前端表单验证的JavaScript库,它基于流行的jQuery框架构建。在网页开发中,表单验证是必不可少的一部分,它确保用户输入的数据符合预设的规则,防止无效或错误的数据提交到服务器。...
1. **Validate.js**:一个轻量级的JavaScript表单验证库,不依赖于任何其他JavaScript框架,压缩后体积很小(仅1KB)。它提供了丰富的验证类型,如是否为空、数字、电子邮件地址等,并支持自定义验证规则以及自定义...
$(".demoform").Validform({//$(".demoform")指明是哪一表单需要验证,名称需加在form表单上; btnSubmit:"#btn_sub", //#btn_sub是该表单下要绑定点击提交表单事件的按钮;如果form内含有submit按钮该参数可省略; ...