初始化参数说明 所有可用的参数如下: ``` $(".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 | 1=>自定义弹出框提示 | | 2 | 2=>侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态) | | 3 | 3=>侧边提示(会在当前元素的siblings对象中查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态) | | 4 | 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: } ```