• 注册
当前位置:1313e > ajax >正文

Ajax实例(二)Validform表单验证插件的应用

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一、nanjinonline项目,newborrow.html产品发布页。应用了Validform表单验证插件

Validform插件官网地址  http://validform.rjboy.cn/document.html

问题:

1.在validform.js中有 “    s:"请填入信息!"    ”,但我没找到这个js在哪里调用他们来验证每一个框。。

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

  • 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对象。

  • showAllError


    可用值: true | false。
    默认为false,true:提交表单时所有错误提示信息都会显示;false:一碰到验证不通过的对象就会停止检测后面的元素,只显示该元素的错误信息;

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表示验证通过。}
}

  • ajaxPost

    可用值: true | false。
    默认为false。。。

    使用ajax方式提交表单数据,将会把数据POST到config方法或表单action属性里设定的地址;

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

location.href的详细解答见:http://www.360doc.com/content/14/0406/18/16488544_366820872.shtml

150532_TWFs_1456671.jpg

addRule(rule)【返回值:Validform】

可以通过Validform对象的这个方法来给表单元素绑定验证规则,绑定验证类型中列出的附加属性都可以通过这个方法绑定。

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对象下查找这些对象。

$.Tipmsg详细见validform官网

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

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

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


转载于:https://my.oschina.net/yuanyichuan/blog/415909

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 162202241@qq.com 举报,一经查实,本站将立刻删除。

最新评论

欢迎您发表评论:

请登录之后再进行评论

登录