Validform表单验证总结篇


Posted in Javascript onOctober 31, 2016

近期项目里用到了表单的验证,选择了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的下载地址的链接,有需要的可以下载。

Validform表单验证总结篇

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

Javascript 相关文章推荐
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
js中this对象用法分析
Jan 05 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
小程序中设置缓存过期的实现方法
Jan 14 Javascript
Javascript数组中push方法用法分析
Oct 31 #Javascript
JavaScript中的await/async的作用和用法
Oct 31 #Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 #Javascript
微信小程序 开发工具快捷键整理
Oct 31 #Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 #Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 #Javascript
jQuery绑定事件的四种方式介绍
Oct 31 #Javascript
You might like
php学习之数据类型之间的转换代码
2011/05/29 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
SQL数据库笔试题
2016/03/08 面试题
大学生军训感想
2014/02/16 职场文书
《识字五》教学反思
2014/03/01 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
OpenCV 图像梯度的实现方法
2021/07/25 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android