Validform.js jQuery验证插件 使用说明

官网原文：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

• 默认对所有元素美化 ^5.0+
• 美化指定的表单元素 ^5.0+

原文：http://validform.rjboy.cn/?cat=1

使用说明

你没看错，就一行代码搞定整站的表单验证！

1	$(".demoform").Validform();

效果图：

使用方法：

$(".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，则会提交表单。

怎样给表单元素绑定验证类型？
示例代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<!--ajax实时验证用户名--> <input type="text" value="" name="name" datatype="s5-16" ajaxurl="valid.php" nullmsg="请输入用户名！" errormsg="昵称至少5个字符,最多16个字符！" />   <!--密码--> <input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间,不能使用空格！" /> <!--确认密码--> <input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致！" />   <!--默认提示文字--> <textarea tip="请在这里输入您的意见。" errormsg="很感谢您花费宝贵时间给我们提供反馈，请填写有效内容！" datatype="s" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>   <!--使用swfupload插件--> <input type="text" plugin="swfupload" class="inputxt" disabled="disabled" value=""> <input type="hidden" value="" pluginhidden="swfupload">   <!--使用passwordStrength插件--> <input type="password" errormsg="密码至少6个字符,最多18个字符！" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="password" value=""> <div class="passwordStrength" style="display:none;"><b>密码强度：</b> <span>弱</span><span>中</span><span class="last">强</span></div>   <!--使用DatePicker插件--> <input type="text" plugin="datepicker" class="inputxt" name="birthday" value="">

说明：
凡要验证格式的元素均需添加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：指定需要使用的插件。