官网原文:http://validform.rjboy.cn/demo.html
Validform常用功能示例
申请VIP
您可以享受到:- 及时的技术支持(1年)
- 一对一的使用培训
- 第一手的版本更新信息和讲解
1年365天,每天1元钱,您只需支付365元就能获得
VIP服务。
无论您是建站公司还是工作室,或者是个人,为了您的效率,请把繁杂的验证交给专业的我们来解决,这给您节省的不只是一点点!
申请请加QQ:1395807821
基本功能
- 智能的提示信息 5.3+
- 给表单元素绑定验证类型和提示文字
- 给表单下的任一对象绑定提交表单或重置方法 5.0+
- 修改默认的提示文字,如默认弹出框的标题,验证成功后的提示文字等 5.0+
- 检测重复密码是否与第一次输入的密码一致
- 逐条验证与一次验证显示所有错误信息
- 使用ajax的方式提交表单 5.0+
- 让表单只能提交一次,提交成功后再提交表单将不会有操作 5.0+
- 在表单元素有输入时才验证,没有输入时不验证
- Validform实现用户名的实时验证
- dataype实现规则累加或单选 5.2+
进阶功能
- Validform没有限定只能使用table布局,任何结构都是可以的 5.0+
- 传入自定义的datatype,可以满足你几乎所有的验证需求
- 在自定义datatype中返回具体的错误信息 5.0+
- 仅用Validform做验证,验证成功后调用自己的方法提交表单 5.0+
- 使用Validform对象 5.0+
常见的一些验证效果
- 二选一的验证,如电话号码与手机号码只需其中之一有输入 5.0+
- 通过自定义datatype对身份证号码进行严格验证 5.0+
- 通过自定义datatype验证最多或至少选择n项 5.0+
- 分类选择,选择了其中一类就忽略其他类的验证 5.0+
提示效果 - 可以实现几乎任何你想要的提示效果
- 提示效果一:弹出框提示
- 提示效果二:右侧提示
- 提示效果三:Focus时右侧出现提示文字 5.0+
- 提示效果四:【自定义提示效果】右侧提示,ajax提交时不弹出提示层
- 提示效果五:【自定义提示效果】固定位置显示提示信息
- 提示效果六:【自定义提示效果】使用自定义弹出框
- 提示效果七:【自定义提示效果】让提示信息滑入显示 5.0+
外调插件
文件上传 - swfupload [需要服务器环境] 去官网查看详细使用方法»
密码强度检测 - passwordStrength
日期控件 - datePicker
表单美化 - jqtransform
原文:http://validform.rjboy.cn/?cat=1
使用说明
你没看错,就一行代码搞定整站的表单验证!
效果图:
使用方法:
$(".demoform").Validform({//所有可传入的参数如下:;
btnSubmit:"#btn_sub",
btnReset:".btn_reset",
tiptype:1,
ignoreHidden:false,
dragonfly:false,
tipSweep:true,
showAllError:false,
postonce:true,
ajaxPost:true,
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方式提交表单,传入callback,这时data参数是当前表单对象,回调函数会在表单验证全部通过后执行,然后判断是否提交表单,如果callback里明确return false,则表单不会提交,如果return true或没有return,则会提交表单。
}
});
Validform对象的方法和属性:
tipmsg:自定义提示信息,通过修改Validform对象的这个属性值来让同一个页面的不同表单使用不同的提示文字;
dataType:获取内置的一些正则;
eq(n):获取Validform对象的第n个元素;
ajaxPost(flag,sync):以ajax方式提交表单。flag为true时,跳过验证直接提交,sync为true时将以同步的方式进行ajax提交;
abort():终止ajax的提交;
submitForm(flag):以参数里设置的方式提交表单,flag为true时,跳过验证直接提交;
resetForm():重置表单;
resetStatus():重置表单的提交状态。传入了postonce参数的话,表单成功提交后状态会设置为"posted",重置提交状态可以让表单继续可以提交;
getStatus():获取表单的提交状态,normal:未提交,posting:正在提交,posted:已成功提交过;
setStatus(status):设置表单的提交状态,可以设置normal,posting,posted三种状态,不传参则设置状态为posting,这个状态表单可以验证,但不能提交;
ignore(selector):忽略对所选择对象的验证;
unignore(selector):将ignore方法所忽略验证的对象重新获取验证效果;
addRule(rule):可以通过Validform对象的这个方法来给表单元素绑定验证规则;
- 必须是表单对象执行Validform方法,示例中“.demoform”就是绑定在form元素上的class名称;
- btnSubmit:指定表单下的哪一个按钮触发表单提交事件,如果表单下有submit按钮可以省略。示例中“.btn_sub”是该表单下要绑定点击提交表单事件的按钮,程序会在btnSubmit所在表单下查找该对象;
- btnReset:”.btn_reset”,//可选项 .btn_reset是该表单下要绑定点击重置表单事件的按钮;
- tiptype:1, //可选项 1=>pop box,2=>side tip,默认为1,也可以传入一个function函数,自定义提示信息的显示方式(可以实现你想要的任何效果,具体参见demo页);
- ignoreHidden:false,//可选项 true | false 默认为false,当为true时对:hidden的表单元素将不做验证;
- dragonfly:false,//可选项 true | false 默认false,当为true时,值为空时不做验证;
- tipSweep:可选项 true | false ,为true时提示信息将只会在表单提交时触发显示,各表单元素blur时不会被触发显示;
- showAllError:可选项 true | false,true:提交表单时所有错误提示信息都会显示,false:一碰到验证不通过的就停止检测后面的元素,只显示该元素的错误信息;
- postonce:指定是否开启网速慢时的二次提交防御,true开启,不指定则默认关闭;
- ajaxPost:使用ajax方式提交表单数据,可选值 true | false,默认false,将提交到action中指定的地址;
- datatype:传入自定义datatype类型,可以是正则,也可以是函数(函数内会传入一个参数),具体使用方法请参考demo页;
- usePlugin:目前已整合swfupload、datepicker、passwordstrength和jqtransform四个插件,在这里传入这些插件使用时需要传入的参数。datepicker在Validform内调用时另外扩展了几个比较实用的参数,具体请参考demo页;
- beforeCheck:在表单提交执行验证之前执行的函数,data参数获取到的是当前表单对象。
- beforeSubmit:在表单验证通过,提交表单数据之前执行的函数,data参数是当前表单对象。
- 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,则会提交表单。
怎样给表单元素绑定验证类型?
示例代码:
说明:
凡要验证格式的元素均需添加datatype属性,datatype可选值内置有10类,用来指定不同的验证格式【如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非常强大的功能,有了这个基本可以实现你需要的任何验证需求,具体请参考demo页】。
datatype:* | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url
*:检测是否有输入,可以输入任何字符,不留空即可通过验证;
*6-16:检测是否为6到16位任意字符;
n:数字类型;
n6-16:6到16位数字;
s:字符串类型;
s6-18:6到18位字符串;
p:验证是否为邮政编码;
m:手机号码格式;
e:email格式;
url:验证字符串是否为网址。
注意radio,checkbox,select这三类datatype从5.0版本开始删除,可以给这三类表单元素绑定其他任何内置或自定义的datatype。radio和checkbox元素只需给该组的第一个元素绑定datatype属性即可。
其他的附加属性:
- nullmsg:是指定没有填入内容时出现的提示信息,不指定默认是“请填入信息!”,另外当datatype为radio、checkbox或select时,因为这三种类型只要为空值就表示出错,提示errormsg所指定信息,所以这三类不需要绑定该属性;
- errormsg:是指定验证格式不符时出现的提示信息,不指定默认是“请输入正确信息!”;
- ignore:绑定ignore=”ignore”的表单元素,当有输入时会验证所填数据是否符合datatype所指定数据类型(格式不对不能通过验证),当没有输入数据时也可以通过验证;
- recheck:是用来指定两个表单元素值一致性检测的另外一个对象,赋给它另外一个对象的name属性值即可;
- tip:是指定表单元素的提示信息;指定后该元素会有focus时提示信息消去,没有输入内容blur时出现提示信息的效果,请参看demo页的“备注”效果;
- altercss:是指定有tip属性的元素默认提示文字显示时的样式,当该元素focus时程序会把这个样式去掉,blur时如果值为空或者跟提示文字一样则再加上该样式;
- ajaxurl:指定ajax实时验证的后台文件路径,给需要后台数据库验证信息的对象绑定该属性。注意该文件输出的内容就是前台显示的验证出错的反馈信息,如果验证通过请输出小写字母”y”。后台页面如valid.php文件中可以用 $_POST["param"] 接收到值,Ajax中会POST过来变量param;
- plugin:指定需要使用的插件。