使用validform使用demo为什么感觉想没反应一样

自由、创新、研究、探索
Linux/Windows Mono/DotNet [ Open Source .NET Development/ 使用开源工具进行DotNet软件开发]锐意进取,志存高远.成就梦想,只争朝夕.从你开始,创新世界.【That I exist is a perpetual supprise which is life. Focus on eCommerce】
一.validform有什么用?
网页上有大量的input需要你进行验证的时候,如果是弹窗的话,需要不停地判断,如果为空,弹窗。如果不是数字,弹窗。
所以要将这么多验证交给一个js去验证。
二.我现在知道的全页面js验证文件
1.jquery.validat.js
这东西就是放在我们的vs中的那个验证用js
这是demo:
这货看起来高大上,但是我就被坑了。。。
这货每个input都要加name啊,不然不验证。。。后来想了想,这东西是用来给form表单做验证的,没有name估计就不发回后台,于是就不验证(如果我的做法不对的话,请指正)
用这货怎么验证ajax提交的数据
添加按钮绑定click事件,function中提交对应的form表单。之后在validate方法中的submithandler这块把对应的ajax方法添加进去。
$("#btnAdd").on("click", function() {
$("#validateform").submit();
$("#validateform").validate({
required: true,
url: true //确定是不是url
txtRequired: {
required: true
submitHandler: function(form) {
addNewAd();
&&&&&&&&&&&
在网上好像还有配合jquery.metadata.js来使用的,不过没有深入研究。
2.validfrom.js
这个验证js我感觉还不错,至少整个是中文的,文档研究起来很容易。
优点:只要每个需要验证的对象都有了datatype这个属性,其他的没有也可以检测,这点对于动态生成的表单来说十分的友好。
不用再像jquery.validate.js那样为每个对象都绑定一个不重样的name,不同的name想检测url还要写很多行rules(至少我是这么写的,不知道有没有更简单的方法)
三.validateform.js简单使用方法
1.datatype
要想标识出来想要验证的对象,我们就需要给这个对象绑定datatype属性,validform.js已经内置了10种验证格式,如果不够,我们还可以使用
来对验证格式进行扩展。
1.1 datatype=*
这个验证是用来表示当前的对象不能为空的,任何字符均可
1.2 datatype=*6-16
validform这个js有个优点,它会自动扩展你所写的验证格式。不同的字段我们可能要求的字符数量不一样,用户名这里你写了*6-16,要求用户填入6到16位的字符。可标题这里又要求填入2到5个字符,难道我们要在验证格式这里再写一个*2-5吗?不用!形如"*6-16"的datatype,Validform会自动扩展,可以指定任意的数值范围。如内置基本类型有"*6-16",那么你绑定 datatype="*4-12"就表示4到12位任意字符。如果你自定义了一个datatype="zh2-4",表示2到4位中文字符,那么 datatype="zh2-6"就表示2到6位中文字符。
1.3 datatype=url
可以用来验证网址。
1.4 datatype=e
可以用来验证电子邮箱地址
1.5 datatype=m
用来验证手机号,但是给的正则表达式有问题,对于新出现的177号段之类的没有加入进去,这块需要注意一下。
1.6 其他注意事项
datatype支持规则累加或单选。用","分隔表示规则累加;用"|"分隔表示规则多选一,即只要符合其中一个规则就可以通过验证,绑定的规则会依次 验证,只要验证通过,后面的规则就会忽略不再比较。如绑定datatype="m|e",表示既可以填写手机号码,也能填写邮箱地址,如果知道填入的是手 机号码,那么就不会再检测他是不是邮箱地址;datatype="zh,s2-4",表示要符合自定义类型"zh",也要符合规则"s2-4"。
直接绑定正则:如可用这样写datatype="/\w{3,6}/i",要求是3到6位的字母,不区分大小写;支持简单的逻辑运算:如datatype="m&|&e,&*4-18&|&/\w{3,6}/i&|&/^validform\.rjboy\.cn$/",这 个表达式的意思是:可以是手机号码;或者是邮箱地址,但字符长度必须在4到18位;或者是3到6位的字母,不区分大小写;或者输入 ,区分大小写。这里","分隔相当于逻辑运算里的"&&"; "|"分隔相当于逻辑运算里的"||";不支持括号运算。
绑定了ignore="ignore"的表单元素,在有输入时,会验证所填数据是否符合datatype所指定数据类型,没有填写内容时则会忽略对它的验证;
如何在表单中控制如果某几项要填都填,要不填都不填。
对这几项赋给相同的class 比如AllNeedOrEmpty
之后在初始化参数中的beforeCheck部分对这个class做操作,具体代码如下
1 beforeCheck: function(curform) {
$("#sliderAd ul").each(function() {
var needIgnore =
var _this = $(this);
var checkList = _this.find("input[class*=AllNeedOrEmpty]");
checkList.each(function() {
var that = $(this);
if (that.val() != "") {
checkList.each(function() {
$(this).removeAttr("ignore");
needIgnore =
if (needIgnore) {
checkList.each(function() {
$(this).attr("ignore", "ignore");
&&&&&&&&&&&&&&&
上面的代码只是提供一个思路,肯定有更好的方法,
比如使用validform对象中的ignore方法和unignore方法,通过向这两个方法传入表单元素来忽略和重新获取验证效果。
不过这两种方法是对元素赋给和去掉dataIgnore来实现验证与否。
源码如下:
1 ignore: function(selector) {
var selector = selector || "[datatype]"
$(obj.forms).find(selector).each(function() {
$(this).data("dataIgnore", "dataIgnore").removeClass("Validform_error");
unignore: function(selector) {
var selector = selector || "[datatype]"
$(obj.forms).find(selector).each(function() {
$(this).removeData("dataIgnore");
我的方法是控制ignore这个attr,而validform方法则是在元素上利用data方法来实现是否验证,思路基本一致,但是当元素是动态生成的时候我觉得还是ignore=ignore这个方法比较好,因为省事啊。
&欢迎评论相互探讨。
3.初始化参数
如下是官网例子中给出的所有的可用参数
页面地址:
1 $(".demoform").Validform({
btnSubmit: "#btn_sub", //提交按钮
btnReset: ".btn_reset",
tiptype: 1, //
ignoreHidden: false,
dragonfly: false,
tipSweep: true,
label: ".label",
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)) {
if (reg2.test(gets)) {
//注意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,则会提交表单。
3.1 如何使用ajax提交数据,而不提交表单。
1 beforeSubmit: function (curform) {
addNewAd();
//这里明确return false的话表单将不会提交;
直接在beforeSubmit中加上对应的ajax提交函数,并加上return false就可以保证表单不会被提交而执行我们的ajax函数。
3.2&tiptype
用来设置提示信息的展示方式,可用的值有:1、2、3、4和function函数,默认tiptype为1。
1代表自定义弹出框提示。
2代表侧边提示,会在当前元素的父级的next对象的子级查找显示提示信息的对象。
如果不存在就会创建
1 if (tiptype == 2) {
if ($(this).parent().next().find(".Validform_checktip").length == 0) {
$(this).parent().next().append("&span class='Validform_checktip' /&");
$(this).siblings(".Validform_checktip").remove();
&&&&&&&&&&&&&&&
3也是代表的侧边提示,不过它是会在当前元素的siblings对象中查找显示提示信息的对象
同样也是不存在就会创建
1 if (tiptype == 3) {
if ($(this).siblings(".Validform_checktip").length == 0) {
$(this).parent().append("&span class='Validform_checktip' /&");
$(this).parent().next().find(".Validform_checktip").remove();
&&&&&&&&&&&&&&&
4也是侧边显示会在当前元素的父级的next对象下查找显示提示信息的对象
还可以传入自定义函数,实现你想要的提示效果。
以上就是我认为validform.js中需要注意的事情和使用方法的展示,欢迎讨论,拍砖。
阅读(...) 评论()
随笔 - 14316
评论 - 949&&&&validform表单验证
validform表单验证
进行form自动验证的插件,非常好用,还可以使用ajax实时验证
若举报审核通过,可奖励20下载分
被举报人:
举报的资源分:
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题,侵犯个人或公司的版权
*详细原因:
VIP下载&&免积分60元/年(1200次)
您可能还需要
开发技术下载排行Validform - 一行代码搞定整站的表单验证!- Jquery表单验证插件
关于Validform
Validform:一行代码搞定整站的表单验证!
1$(".demoform").Validform();
为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码,从而使仅用一行代码去完成整站的表单验证的梦想成为现实!
功能简介:
可以在input上直接绑定正则,可以自定义datatype,自定义datatype可以是正则,也可以是函数,datatype可以累加或单选,甚至还可以对datatype规则执行简单的逻辑运算。内置10类常见的格式验证;
可以自定义提示方式,可以实现你想要的任何提示效果。内置了4种常见的提示方式;
可以对表单下的某一块区域或具体的某个表单元素单独进行验证,并可以选择验证后需不需要显示出错信息,还能得到一个值来判断被检测对象是否通过了验证;
可以轻松的取消或恢复对表单下的某一块区域或具体的某个表单元素的验证;
强大的ajax功能,很轻松的可以实现实时验证以及表单的ajax提交;可以灵活的设置ajax提交时的参数;
智能的出错信息提示:会根据绑定的datatype输出相应的出错信息,另外还可以在自定义datatype里返回具体的出错信息,错误信息里可以使用html标签,如果页面里没有显示出错信息的标签,会根据tiptype值自动创建。可以选择在没有输入时不提示和只在提交表单时有信息提示。可以选择一次提示单个错误或一次显示全部出错信息。可以自己设置默认的提示文字;
可以在表单开始检测前和表单检测通过后,提交表单之前绑定事件;
当前版本外调插件可以实现文件上传检测、密码强度检测、日期控件和表单美化效果;
丰富的Validform对象的属性和方法,给你的验证操作带来无限的可能。
[]Validform v5.3.2 更新修复以下功能:
config方法还能为已经初始化过的表单重新配置参数了;
一个表单有多个实时验证时不能正确验证的bug;
执行submitForm方法会提交对象下的所有表单了,之前是只提交第一个表单,如var demo=$(".formsub").Validform(); demo.submitForm(); 执行提交方法后,demo内的所有formsub都会提交;
没有submit按钮时,当input获得焦点,按下enter键也能提交表单了;
对于自定义datatype,还可以通过Validform对象的tipmsg.w扩展默认提示文字了,之前只能通过$.Tipmsg.w扩展;
智能提示在某些情况下的bug修正(如ie8下出现逗号、label出现换行时智能提示不能正确显示、一行有2列的情况下把2列的label都提取出来当错误提示);
其他细节调整。
[]Validform v5.3.1 更新修复以下功能:
增加了label参数;
支持jquery 1.4.3-1.9.0+版本;
调整了ajaxurl直接附带参数时的处理方式,现在参数不会做另外解析,仍附带在地址后面,所以需要用get方式去获取地址后面带的参数;
智能提示:对于多选、下拉、单选会提示为"选择"而不是"填写";
提供了datatype扩展文件下载;
其他细节调整。
[]Validform v5.3 更新修复以下功能:
Validform对象增加了config方法;
表单元素上可以绑定sucmsg属性了,用来指定验证成功时的提示文字;
修改了信息提示方式,对于没有绑定errormsg的对象,会根据所绑定的datatype输出相应的出错信息;
对于没有绑定nullmsg的对象,会自动查找类名为Validform_label下的文字作为提示文字;
如果页面里没有显示出错信息的标签,会根据tiptype值自动创建;
改变了ajax错误的处理方式,callback函数在ajax提交表单遇服务端错误时也会执行;
Validform对象的submitForm()和ajaxForm()方法增加了url参数,如果传入了url参数,表单将会提交到这个地址而不是表单action属性或config方法里所指定的地址;
细节功能增强:当提交表单时,如果表单中的某项已经在执行ajax检测,这时该项ajax结束后表单可以继续提交了;
修改了tipSweep参数的含义,当传入tipSweep=true时,只在表单提交时触发检测,blur事件将不会触发检测(实时验证会在后台进行,不会显示检测结果);
修正了check方法的bug,修正了绑定ignore时,ajaxurl不能执行的问题等;
插件的调用做了点改进,对于日期、swfupload和密码强度检测这三个插件,绑定了plugin属性即可以初始化对应的插件,可以不用在validform初始化时传入空的 usePlugin;修改使用addRule方法绑定验证时,插件不能初始化的bug;
修正了ie6下自定义提交按钮时表单不能提交的问题。表单验证之validform.js使用方法 - 推酷
表单验证之validform.js使用方法
1 beforeSubmit: function (curform) {
addNewAd();
return false;
//这里明确return false的话表单将不会提交;
直接在beforeSubmit中加上对应的ajax提交函数,并加上return false就可以保证表单不会被提交而执行我们的ajax函数。
3.2&tiptype
用来设置提示信息的展示方式,可用的值有:1、2、3、4和function函数,默认tiptype为1。
1代表自定义弹出框提示。
2代表侧边提示,会在当前元素的父级的next对象的子级查找显示提示信息的对象。
如果不存在就会创建
1 if (tiptype == 2) {
if ($(this).parent().next().find(&.Validform_checktip&).length == 0) {
$(this).parent().next().append(&&span class='Validform_checktip' /&&);
$(this).siblings(&.Validform_checktip&).remove();
&&&&&&&&&&&&&&&
3也是代表的侧边提示,不过它是会在当前元素的siblings对象中查找显示提示信息的对象
同样也是不存在就会创建
1 if (tiptype == 3) {
if ($(this).siblings(&.Validform_checktip&).length == 0) {
$(this).parent().append(&&span class='Validform_checktip' /&&);
$(this).parent().next().find(&.Validform_checktip&).remove();
&&&&&&&&&&&&&&&
4也是侧边显示会在当前元素的父级的next对象下查找显示提示信息的对象
还可以传入自定义函数,实现你想要的提示效果。
以上就是我认为validform.js中需要注意的事情和使用方法的展示,欢迎讨论,拍砖。
已发表评论数()
已收藏到推刊!
请填写推刊名
描述不能大于100个字符!
权限设置: 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致

我要回帖

更多关于 validform使用 的文章

 

随机推荐