表单验证插件Validform 5.3使用简介

版本号：Validform_v5.3.2

下载地址：http://validform.rjboy.cn/download.html

一、引入CSS

.Validform_checktip{
	margin-left:8px;
	line-height:20px;
	height:20px;
	overflow:hidden;
	color:#999;
	font-size:12px;
}
.Validform_right{
	color:#71b83d;
	padding-left:20px;
	background:url(../images/right.png) no-repeat left center;
}
.Validform_wrong{
	color:red;
	padding-left:20px;
	white-space:nowrap;
	background:url(../images/error.png) no-repeat left center;
}
.Validform_loading{
	padding-left:20px;
	background:url(../images/onLoad.gif) no-repeat left center;
}
.Validform_error{
	background-color:#ffe7e7;
}
#Validform_msg{color:#7d8289; font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; width:280px; -webkit-box-shadow:2px 2px 3px #aaa; -moz-box-shadow:2px 2px 3px #aaa; background:#fff; position:absolute; top:0px; right:50px; z-index:99999; display:none;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');}
#Validform_msg .iframe{position:absolute; left:0px; top:-1px; z-index:-1;}
#Validform_msg .Validform_title{line-height:25px; height:25px; text-align:left; font-weight:bold; padding:0 8px; color:#fff; position:relative; background-color:#000;}
#Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited{line-height:22px; position:absolute; right:8px; top:0px; color:#fff; text-decoration:none;}
#Validform_msg a.Validform_close:hover{color:#cc0;}
#Validform_msg .Validform_info{padding:8px;border:1px solid #000; border-top:none; text-align:left;}

二、引入js

validform 是基于jquery开发的，所有需要在validform前引入 jquery

三、初始化

<script>
	$(
		function(){
   		$(".reg_form").Validform();
    });
</script>

注：
1、Validform有非压缩、压缩和NCR三个版本提供下载，NCR是通用版，当你页面因编码问题，提示文字出现乱码时可以使用这个版本；
2、Validform没有限定必须使用table结构，它可以适用于任何结构，需要在tiptype中定义好位置关系。

四、绑定到html

<div class="reg_form">
		<form class="demo" action="/member/register">
			<div class="reg_br">
				<div class="reg_l">邮箱：</div>
				<div class="reg_r">
					<input id="email" type="text" name="email" datatype="e" ajaxurl="/member/ajaxcheckemail" nullmsg="邮箱不能为空！" errormsg="请输入合法的邮箱地址！" class="required email"/>
				</div>
				<div class="clear"></div>
			</div>
			<div class="reg_br">
				<div class="reg_l">昵称：</div>
				<div class="reg_r"><input id="nick_name" datatype="*2-20" ajaxurl="/member/ajaxchecknickname" nullmsg="昵称不能为空！" errormsg="2-20个英文或汉字" type="text" name="nick_name" /></div>
				<div class="clear"></div>
			</div>
		</form>
	</div>

凡要验证格式的元素均需绑定datatype属性，datatype可选值内置有10类，用来指定不同的验证格式。
如果还不能满足您的验证需求，可以传入自定义datatype，自定义datatype是一个非常强大的功能，通过它可以满足你的任何需求。

可以绑定的附加属性有：datatype、nullmsg、sucmsg、errormsg、ignore、recheck、tip、altercss、ajaxurl 和plugin

说明：

• datatype
  内置基本的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：验证字符串是否为网址。
  自定义datatype的名称，可以由字母、数字、下划线、中划线和*号组成。
  形如"*6-16"的datatype，Validform会自动扩展，可以指定任意的数值范围。如内置基本类型有"*6-16"，那么你绑定datatype="*4-12"就表示4到12位任意字符。如果你自定义了一个datatype="zh2-4"，表示2到4位中文字符，那么datatype="zh2-6"就表示2到6位中文字符。
  5.2版本之后，datatype支持规则累加或单选。用","分隔表示规则累加；用"|"分隔表示规则多选一，即只要符合其中一个规则就可以通过验证，绑定的规则会依次验证，只要验证通过，后面的规则就会忽略不再比较。如绑定datatype="m|e"，表示既可以填写手机号码，也能填写邮箱地址，如果知道填入的是手机号码，那么就不会再检测他是不是邮箱地址；datatype="zh,s2-4"，表示要符合自定义类型"zh"，也要符合规则"s2-4"。
  注：
  5.2.1版本之后，datatype支持：
  直接绑定正则：如可用这样写datatype="/\w{3,6}/i"，要求是3到6位的字母，不区分大小写；
  支持简单的逻辑运算：如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform\.rjboy\.cn$/"，
  这个表达式的意思是：可以是手机号码；或者是邮箱地址，但字符长度必须在4到18位；或者是3到6位的字母，不区分大小写；或者输入validform.rjboy.c