Validform使用说明

转载：http://down.51cto.com/data/578513

 

   你没看错，就一行代码搞定整站的表单验证！

1	$(".demoform").Validform();

   效果图：

 

使用方法：

     $(".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)){return true;}

            if(reg2.test(gets)){return true;}

            return false;

 

            //注意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方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。

    }

});

 

Validform对象的方法和属性：

tipmsg：自定义提示信息，通过修改Validform对象的这个属性值来让同一个页面的不同表单使用不同的提示文字；

dataType：获取内置的一些正则；

eq(n)：获取Validform对象的第n个元素;

ajaxPost(flag,sync)：以ajax方式提交表单。flag为true时，跳过验证直接提交，sync为true时将以同步的方式进行ajax提交；

abort()：终止ajax的提交；

submitForm(flag)：以参数里设置的方式提交表单，flag为true时，跳过验证直接提交；

resetForm()：重置表单；

resetStatus()：重置表单的提交状态。传入了postonce参数的话，表单成功提交后状态会设置为"posted"，重置提交状态可以让表单继续可以提交；

getStatus()：获取表单的提交状态，normal：未提交，posting：正在提交，posted：已成功提交过；

setStatus(status)：设置表单的提交状态，可以设置normal，posting，posted三种状态，不传参则设置状态为posting，这个状态表单可以验证，但不能提交；

ignore(selector)：忽略对所选择对象的验证；

unignore(selector)：将ignore方法所忽略验证的对象重新获取验证效果；

addRule(rule)：可以通过Validform对象的这个方法来给表单元素绑定验证规则；

 

 

参数说明： 【所有参数均为可选项】

· 必须是表单对象执行Validform方法，示例中“.demoform”就是绑定在form元素上的class名称；

· btnSubmit：指定表单下的哪一个按钮触发表单提交事件，如果表单下有submit按钮可以省略。示例中“.btn_sub”是该表单下要绑定点击提交表单事件的按钮，程序会在btnSubmit所在表单下查找该对象；

· btnReset:”.btn_reset”,//可选项 .btn_reset是该表单下要绑定点击重置表单事件的按钮;

· tiptype:1, //可选项 1=>pop box,2=>side tip，默认为1，也可以传入一个function函数，自定义提示信息的显示方式（可以实现你想要的任何效果，具体参见demo页）;

· ignoreHidden:false,//可选项 true | false 默认为false，当为true时对:hidden的表单元素将不做验证;

· dragonfly:false,//可选项 true | false 默认false，当为true时，值为空时不做验证；

· tipSweep：可选项 true | false ，为true时提示信息将只会在表单提交时触发显示，各表单元素blur时不会被触发显示；

· showAllError：可选项 true | false，true：提交表单时所有错误提示信息都会显示，false：一碰到验证不通过的就停止检测后面的元素，只显示该元素的错误信息；

· postonce：指定是否开启网速慢时的二次提交防御，true开启，不指定则默认关闭；

· ajaxPost：使用ajax方式提交表单数据，可选值 true | false，默认false，将提交到action中指定的地址；

· datatype：传入自定义datatype类型，可以是正则，也可以是函数（函数内会传入一个参数），具体使用方法请参考demo页；

· usePlugin：目前已整合swfupload、datepicker、passwordstrength和jqtransform四个插件，在这里传入这些插件使用时需要传入的参数。datepicker在Validform内调用时另外扩展了几个比较实用的参数，具体请参考demo页；

· beforeCheck：在表单提交执行验证之前执行的函数，data参数获取到的是当前表单对象。

· beforeSubmit：在表单验证通过，提交表单数据之前执行的函数，data参数是当前表单对象。

· 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，则会提交表单。

 

 

怎样给表单元素绑定验证类型？
示例代码：

 

<!--ajax实时验证用户名-->

<input type="text" value="" name="name" datatype="s5-16" ajaxurl="valid.php" nullmsg="请输入用户名！" errormsg="昵称至少5个字符,最多16个字符！" />

 

<!--密码-->

<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间,不能使用空格！" />

<!--确认密码-->

<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致！" />

 

<!--默认提示文字-->

<textarea tip="请在这里输入您的意见。" errormsg="很感谢您花费宝贵时间给我们提供反馈，请填写有效内容！"  datatype="s" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>

 

<!--使用swfupload插件-->

<input type="text" plugin="swfupload" class="inputxt" disabled="disabled" value="">

<input type="hidden" value="" pluginhidden="swfupload">

 

<!--使用passwordStrength插件-->

<input type="password" errormsg="密码至少6个字符,最多18个字符！" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="password" value="">

<div class="passwordStrength" style="display:none;"><b>密码强度：</b> <span>弱</span><span>中</span><span class="last">强</span></div>

 

<!--使用DatePicker插件-->

<input type="text" plugin="datepicker" class="inputxt" name="birthday" value="">

 

 

说明：
凡要验证格式的元素均需添加datatype属性，datatype可选值内置有10类，用来指定不同的验证格式【如果还不能满足您的验证需求，可以传入自定义datatype，自定义datatype是一个非常强大的功能，有了这个基本可以实现你需要的任何验证需求，具体请参考demo页】。

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：验证字符串是否为网址。
注意radio，checkbox，select这三类datatype从5.0版本开始删除，可以给这三类表单元素绑定其他任何内置或自定义的datatype。radio和checkbox元素只需给该组的第一个元素绑定datatype属性即可。

其他的附加属性：

· nullmsg：是指定没有填入内容时出现的提示信息，不指定默认是“请填入信息！”，另外当datatype为radio、checkbox或select时，因为这三种类型只要为空值就表示出错，提示errormsg所指定信息，所以这三类不需要绑定该属性；

· errormsg：是指定验证格式不符时出现的提示信息，不指定默认是“请输入正确信息！”；

· ignore：绑定ignore=”ignore”的表单元素，当有输入时会验证所填数据是否符合datatype所指定数据类型（格式不对不能通过验证），当没有输入数据时也可以通过验证；

· recheck：是用来指定两个表单元素值一致性检测的另外一个对象，赋给它另外一个对象的name属性值即可；

· tip：是指定表单元素的提示信息;指定后该元素会有focus时提示信息消去，没有输入内容blur时出现提示信息的效果，请参看demo页的“备注”效果；

· altercss：是指定有tip属性的元素默认提示文字显示时的样式，当该元素focus时程序会把这个样式去掉，blur时如果值为空或者跟提示文字一样则再加上该样式；

· ajaxurl：指定ajax实时验证的后台文件路径，给需要后台数据库验证信息的对象绑定该属性。注意该文件输出的内容就是前台显示的验证出错的反馈信息，如果验证通过请输出小写字母”y”。后台页面如valid.php文件中可以用 $_POST["param"] 接收到值，Ajax中会POST过来变量param；

· plugin：指定需要使用的插件。