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 相关文章推荐
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
网页图片延时加载的js代码
2010/04/22 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python 流程控制实例代码
2009/09/25 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
python动态参数用法实例分析
2015/05/25 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
Python中print和return的作用及区别解析
2019/05/05 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
编程实现去掉XML的重复结点
2014/05/28 面试题
《这儿真好》教学反思
2014/02/22 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
六一儿童节标语
2014/10/08 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
工作一年自我鉴定
2019/06/20 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
Nginx跨域问题解析与解决
2022/08/05 Servers