Validform表单验证总结篇

 更新时间:2016年10月31日 11:28:08   作者:dreamfly_cc  
这篇文章主要介绍了Validform表单验证,包括通用表单验证方法的知识,本文给大家介绍的非常详细具有参考借鉴价值,需要的朋友可以参考下

近期项目里用到了表单的验证,选择了Validform_v5.3.2。

先来了解一下一些基本的参数:

通用表单验证方法:

Demo:

$(".demoform").Validform({//$(".demoform")指明是哪一表单需要验证,名称需加在form表单上;
btnSubmit:"#btn_sub", //#btn_sub是该表单下要绑定点击提交表单事件的按钮;如果form内含有submit按钮该参数可省略;
btnReset:".btn_reset",//可选项 .btn_reset是该表单下要绑定点击重置表单事件的按钮;
tiptype:1, //可选项 1=>pop box,2=>side tip(parent.next.find; with default pop),3=>side tip(siblings; with default pop),4=>side tip(siblings; none pop),默认为1,也可以传入一个function函数,自定义提示信息的显示方式(可以实现你想要的任何效果,具体参见demo页);
ignoreHidden:false,//可选项 true | false 默认为false,当为true时对:hidden的表单元素将不做验证;
dragonfly:false,//可选项 true | false 默认false,当为true时,值为空时不做验证;
tipSweep:true,//可选项 true | false 默认为false,只在表单提交时触发检测,blur事件将不会触发检测(实时验证会在后台进行,不会显示检测结果);
label:".label",//可选项 选择符,在没有绑定nullmsg时查找要显示的提示文字,默认查找".Validform_label"下的文字;
showAllError:false,//可选项 true | false,true:提交表单时所有错误提示信息都会显示,false:一碰到验证不通过的就停止检测后面的元素,只显示该元素的错误信息;
postonce:true, //可选项 表单是否只能提交一次,true开启,不填则默认关闭;
ajaxPost:true, //使用ajax方式提交表单数据,默认false,提交地址就是action指定地址;
datatype:{//传入自定义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遇到服务端错误时也会执行回调,这时的data是{ status:**, statusText:**, readyState:**, responseText:** };
//这里执行回调操作;
//注意:如果不是ajax方式提交表单,传入callback,这时data参数是当前表单对象,回调函数会在表单验证全部通过后执行,然后判断是否提交表单,如果callback里明确return false,则表单不会提交,如果return true或没有return,则会提交表单。
}
});
Validform对象的方法和属性:
tipmsg:自定义提示信息,通过修改Validform对象的这个属性值来让同一个页面的不同表单使用不同的提示文字;
dataType:获取内置的一些正则;
eq(n):获取Validform对象的第n个元素;
ajaxPost(flag,sync,url):以ajax方式提交表单。flag为true时,跳过验证直接提交,sync为true时将以同步的方式进行ajax提交,传入了url地址时,表单会提交到这个地址;
abort():终止ajax的提交;
submitForm(flag,url):以参数里设置的方式提交表单,flag为true时,跳过验证直接提交,传入了url地址时,表单会提交到这个地址;
resetForm():重置表单;
resetStatus():重置表单的提交状态。传入了postonce参数的话,表单成功提交后状态会设置为"posted",重置提交状态可以让表单继续可以提交;
getStatus():获取表单的提交状态,normal:未提交,posting:正在提交,posted:已成功提交过;
setStatus(status):设置表单的提交状态,可以设置normal,posting,posted三种状态,不传参则设置状态为posting,这个状态表单可以验证,但不能提交;
ignore(selector):忽略对所选择对象的验证;
unignore(selector):将ignore方法所忽略验证的对象重新获取验证效果;
addRule(rule):可以通过Validform对象的这个方法来给表单元素绑定验证规则;
check(bool,selector):对指定对象进行验证(默认验证当前整个表单),通过返回true,否则返回false(绑定实时验证的对象,格式符合要求时返回true,而不会等ajax的返回结果),bool为true时则只验证不显示提示信息;
config(setup):可以通过这个方法来修改初始化参数,指定表单的提交地址,给表单ajax和实时验证的ajax里设置参数;

下面是demo的下载地址的链接,有需要的可以下载。

demo下载地址

以上所述是小编给大家介绍的Validform表单验证总结篇,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 浅谈window对象的scrollBy()方法

    浅谈window对象的scrollBy()方法

    本文给大家介绍的是windows对象中的scrollBy()的定义和使用方法,十分的细致全面,有需要的小伙伴可以参考下。
    2015-07-07
  • JavaScript 开发工具webstrom使用指南

    JavaScript 开发工具webstrom使用指南

    本文给大家推荐了一款非常热门的javascript开发工具webstrom,着重介绍了webstrom的特色功能、设置技巧、使用心得以及快捷键汇总,非常的全面。
    2014-12-12
  • Javascript实现通过选择周数显示开始日和结束日的实现代码

    Javascript实现通过选择周数显示开始日和结束日的实现代码

    这篇文章主要介绍了Javascript实现通过选择周数显示开始日和结束日的实例代码的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • JavaScript中数据类型转换总结

    JavaScript中数据类型转换总结

    在js中,数据类型转换分为显式数据类型转换和隐式数据类型转换。本文将对此进行介绍,具有一定的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • 微信小程序使用template标签实现五星评分功能

    微信小程序使用template标签实现五星评分功能

    这篇文章主要为大家详细介绍了微信小程序使用template标签实现五星评分功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js实现自动轮换选项卡

    js实现自动轮换选项卡

    这篇文章主要为大家详细介绍了js实现自动轮换选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 关于angular 8.1使用过程中的一些记录

    关于angular 8.1使用过程中的一些记录

    这篇文章主要给大家介绍了关于angular 8.1使用过程中的一些记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • 关于跨站脚本攻击问题

    关于跨站脚本攻击问题

    这个问题我的理解是只要让其他网站能执行我的脚本我就有可能危害到,这个网站的用户安全
    2011-12-12
  • js 中获取制定的cook信息实现方法

    js 中获取制定的cook信息实现方法

    下面小编就为大家带来一篇js 中获取制定的cook信息实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • element中的$confirm的使用

    element中的$confirm的使用

    这篇文章主要介绍了element中的$confirm的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论