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

Validform是一款基于jQuery的表单验证插件,支持多种内置验证类型,如数字、字符串、邮箱等,并允许自定义验证规则。用户可自定义datatype、nullmsg、sucmsg、errormsg等属性,实现复杂验证需求。5.3版本新增智能提示信息、ajax实时验证等功能,允许通过ajaxurl进行后台验证,并返回JSON数据。同时,plugin属性可用于初始化日期、SWFUpload和密码强度检测等插件。
摘要由CSDN通过智能技术生成

版本号: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是一个非常强大的功能,通过它可以满足你的任何需求。

可以绑定的附加属性有:datatypenullmsgsucmsgerrormsgignorerechecktipaltercssajaxurlplugin

说明:

  • 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT界鸟叔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值