validform_v5.3.2帮助文档


引用自:http://validform.club/document.html

官网地址:http://validform.club/index.html

validform停更至2013-3-31,其中手机号正则只验证了13、14、15、18号段,使用时需要修改js内的手机号正则。

tipmsg

  • ignore
    绑定了ignore="ignore"的表单元素,在有输入时,会验证所填数据是否符合datatype所指定数据类型,
    没有填写内容时则会忽略对它的验证;
  • recheck
    表单里面经常需要检查两次密码输入是否一致,recheck就是用来指定需要比较的另外一个表单元素。
    如:recheck="password1",那么它就会拿当前元素的值跟该表单下,name为"password1"的元素比较。
  • tip
    表单里经常有些文本框需要默认就显示一个灰色的提示文字,当获得焦点时提示文字消失,失去焦点时提示文字显示。tip属性就是用来实现这个效果。它通常和altercss搭配使用。
  • 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.1开始,地址后面附带的参数内部不再做另外解析,仍附带在地址后面,所以需要用GET方式去获取地址后面带的参数。
    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();
  • 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时不会触发信息提示;
  • label 5.3.1+
    选择符
    在没有绑定nullmsg时查找要显示的提示文字,默认查找".Validform_label"下的文字;
  • 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:** }
  • demo页。

    绑定验证类型中列出的附加属性都可以通过这个方法绑定。

    demo.addRule([
        {
            ele:"#name",
            datatype:"s6-18",
            ajaxurl:"valid.php",
            nullmsg:"请输入昵称!",
            errormsg:"昵称至少6个字符,最多18个字符!"
        },
        {
            ele:"#userpassword",
            datatype:"*6-16",
            nullmsg:"请设置密码!",
            errormsg:"密码范围在6~16位之间!"
        },
        {
            ele:"#userpassword2",
            datatype:"*",
            recheck:"userpassword",
            nullmsg:"请再输入一次密码!",
            errormsg:"您两次输入的账号密码不一致!"
        }
    ]);

    其中ele是指定要绑定规则的对象,会在Validform对象下查找这些对象。

    选择文件后立即上传

    表单验证通过后上传文件

    密码强度提示与验证提示同时显示

    在符合验证要求时才有密码强度提示

    默认效果

    选择日期后执行回调函数

    默认对所有元素美化

    美化指定的表单元素

    Validform的公用对象

    $.Datatype

    可以通过$.Datatype对象来扩展datatype类型。

    如$.Datatype.zh=/^[\u4E00-\u9FA5\uf900-\ufa2d]{1,}$/

    $.Tipmsg

    可以通过$.Tipmsg对象来修改默认提示文字。具体可修改的提示文字请查看Validform对象的tipmsg属性。

    如果Validform对象的tipmsg属性没有找到相关的提示信息,那么就会到$.Tipmsg中查找对应提示文字。

    如$.Tipmsg.tit="msg box"; //设置默认弹出框的标题文字。

    $.Showmsg(msg)

    调用Validform自定义的弹出框。

    参数msg是要显示的提示文字。

    如$.Showmsg("这是提示文字"); //如果不传入信息则不会有弹出框出现,像$.Showmsg()这样是不会弹出提示框的。

    $.Hidemsg()

    关闭Validform自定义的弹出框。

    如$.Hidemsg()