Validform表单验证框架详解

zgphacker2010

已于 2022-09-26 09:31:53 修改

阅读量1.7k

点赞数 1

分类专栏： JS&JQuery 文章标签： Validform验证框架

于 2019-09-09 23:14:53 首次发布

本文链接：https://blog.csdn.net/zgphacker2010/article/details/100677430

版权

JS&JQuery 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

Validform是另外一种表单验证框架，也是基于jQuery框架，用法比较灵活。

这里使用该框架的版本号为： Validform_v5.3.2

官网：http://validform.rjboy.cn/ 目前已经打不开了，本文最后会将官方的的demo打包。

下面来看看官方给的使用入门：这里直接按官方的来写

Validform使用入门

1、引入css

请查看下载文件中的style.css，把里面Validform必须部分复制到你的css中（文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的）。之前发现有部分网友把整个style.css都引用在了页面里，然后发现样式冲突了。

2、引入js （jquery 1.4.3 以上版本都可以）

<script type="text/javascript" src="http://validform.rjboy.cn/wp-content/themes/validform/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://validform.rjboy.cn/Validform/v5.1/Validform_v5.1_min.js"></script>

3、给需要验证的表单元素绑定附加属性

<form class="demoform" >
<input type="text" value="" name="name" datatype="s5-16" errormsg="昵称至少5个字符,最多16个字符！" />
</form>

4、初始化，就这么简单

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

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

绑定附加属性

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

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

绑定方法如下所示：

<!--ajax实时验证用户名-->
<input type="text" value="" name="name" datatype="e" ajaxurl="valid.php?myparam1=value1&myparam2=value2" sucmsg="用户名验证通过！" nullmsg="请输入用户名！" errormsg="请用邮箱或手机号码注册！"  />
 
<!--密码-->
<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类型有： * | *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.cn，区分大小写。这里","分隔相当于逻辑运算里的"&&"； "|"分隔相当于逻辑运算里的"||"；不支持括号运算。
nullmsg
当表单元素值为空时的提示信息，不绑定，默认提示"请填入信息！"。
如：nullmsg="请填写用户名！"
5.3版开始，对于没有绑定nullmsg的对象，会自动查找class为Validform_label下的文字作为提示文字:
如这样的html结构：
<span class="Validform_label">*用户名：</span><input type="text" val="" datatype="s" />
当这个文本框里没有输入时的出错信息就会是："请输入用户名！"
这里Validform_label跟input之间的位置关系，不一定是要同级关系，同级里没有找到的话，它还会在同级的子级、父级的同级、父级的同级的子级里查找。
sucmsg 5.3+
当表单元素通过验证时的提示信息，不绑定，默认提示"通过信息验证！"。
如：sucmsg="用户名还未被使用，可以注册！"
5.3版开始，也可以在实时验证返回的json数据里返回成功的提示文字，请查看附加属性ajaxurl的介绍。
errormsg
输入内容不能通过验证时的提示信息，默认提示"请输入正确信息！"。
如：errormsg="用户名必须是2到4位中文字符！"
5.3版开始，Validform可以根据你绑定的datatype智能的输出相应出错信息，具体介绍请查看tipmsg
ignore
绑定了ignore="ignore"的表单元素，在有输入时，会验证所填数据是否符合datatype所指定数据类型，
没有填写内容时则会忽略对它的验证；
recheck
表单里面经常需要检查两次密码输入是否一致，recheck就是用来指定需要比较的另外一个表单元素。
如：recheck="password1"，那么它就会拿当前元素的值跟该表单下，name为"password1"的元素比较。
tip
表单里经常有些文本框需要默认就显示一个灰色的提示文字，当获得焦点时提示文字消失，失去焦点时提示文字显示。tip属性就是用来实现这个效果。它通常和altercss搭配使用。
如<input type="text" value="默认提示文字" class="gray intxt" tip="默认提示文字" altercss="gray" />
altercss
它需要和tip属性配合使用，altercss指定的样式名，会在文本框获得焦点时被删除，没有输入内容而失去焦点时重新加上。
ajaxurl
指定ajax实时验证的后台文件的地址。
后台页面如valid.php文件中可以用 $_POST["param"] 接收到值，Ajax中会POST过来变量param和name。param是文本框的值，name是文本框的name属性。
5.2版本开始，可以在ajaxurl指定的url后绑定参数，如：ajaxurl="valid.php?myparam1=value1&myparam2=value2"； 5.3.1开始，地址后面附带的参数内部不再做另外解析，仍附带在地址后面，所以需要用GET方式去获取地址后面带的参数。
5.3之前的版本中，该文件输出的字符会作为错误信息显示在页面上，如果验证通过需输出小写字母"y"。
在5.3版中，实时验证的返回数据做了调整，须是含有status值的json数据！跟callback里的ajax返回数据格式统一，建议不再返回字符串"y"或"n"。目前这两种格式的数据都兼容。
注：
如果ajax校验通过，会在该元素上绑定validform_valid值为true。可以通过设置该值来控制验证能不能通过，如验证码的验证，第一次验证通过后，不小心右点击了下验证码图片，验证码换了，但是仍然指示这个对象已经通过了验证，这时可以手动调整该值：$("#name")[0].validform_valid="false"。
怎样设置ajax的参数，具体可以查看Validform对象的config方法。
plugin
指定需要使用的插件。
5.3版开始，对于日期、swfupload和密码强度检测这三个插件，绑定了plugin属性即可以初始化对应的插件，可以不用在validform初始化时传入空的usePlugin了。
如，你要使用日期插件，5.3之前版本需要这样初始化：
```
$(".demoform").Validform({
    usePlugin:{
    	datepicker:{}
    }
});
5.3版开始，不需要传入这些空对象了，只需在表单元素上绑定plugin="datepicker"就可以，初始化直接这样：
$(".demoform").Validform();
```

Validform表单验证效果图

更多内容请参考Validform提供的demo及document

上次使用jQueryValidate验证整合bootstrap框架实现了一些常用的字段验证，效果图如下：

这次使用Validform，表单布局仍然使用bootstrap框架，来实现以上的效果：

先上效果图：

实现步骤：

1、导入Validform验证框架中的css及js文件，还有图片资源(css文件中用到)：

<link rel="stylesheet" href="css/style.css" />

<script type="text/javascript" src="js/Validform_v5.3.2.js" ></script>

2、编写表单页面及添加验证代码：

表单验证代码：

<script type="text/javascript">	
/** 执行表单验证 */	
$("#registerForm").Validform({ tiptype: 2 ,showAllError:true});
</script>

网页源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JqueryValidate实例</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/style.css" />
		<style type="text/css">
		/** 
		 * 重新定义错误样式及图标
		 * 1、防止与bootstrap样式中的label冲突 （label: display: block）,导致label换行了
		 * 2、添加错误图标显示 
		 */	
		.requiedField{
			color: red;
		}
		label {
		    display: inline-block;
		    margin-bottom: 0;
		}	
		label.error {
		    background: url(./img/unchecked.gif) no-repeat 5px 3px;
		    padding-left: 24px;
		    color: #EA5200;
		}	
		.formElement{	
			display: inline-block;
		}
		
		</style>
	</head>
	<body>
		<fieldset >
			<legend>用户注册</legend>
		<form class="form-horizontal" id="registerForm" method="post" onsubmit="return false;">
			<div class="control-group">
				<label class="control-label">昵称</label>
				<div class="controls">
					<div class="formElement">
					<input type="text" datatype="*" name="nickname" nullmsg="请输入昵称！"   placeholder="请填写昵称" />
					</div>
					<div class="Validform_checktip">*</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">昵称2</label>
				<div class="controls">
					<div class="formElement">
					<input type="text" datatype="*2-10" name="nickname2" nullmsg="此项为必填项！" errormsg="昵称至少2个字符,最多10个字符！！"  placeholder="请填写昵称2" />
					</div>
					<div class="Validform_checktip">*</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">昵称3</label>
				<div class="controls">
					<div class="formElement">
					<input type="text" datatype="*2-10" name="nickname3" nullmsg="此项为必填项！" errormsg="昵称至少2个字符,最多10个字符！！"  placeholder="请填写昵称3" />
					</div>
					<div class="Validform_checktip">*</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">用户名</label>
				<div class="controls">
					<div class="formElement">
					<input type="text" datatype="s6-20"  name="username"  nullmsg="此项为必填项！" errormsg="用户名至少6个字符,最多20个字符！！" placeholder="请填写用户名" />
					</div>
					<div class="Validform_checktip">*</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">密码</label>
				<div class="controls">
					<div class="formElement">
					<input type="text" datatype="s6-20" nullmsg="此项为必填项！" errormsg="密码至少6个字符,最多20个字符！！" id="password" name="password" placeholder="请填写密码" />
					</div>
					<div class="Validform_checktip">*</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">确认密码</label>
				<div class="controls">
					<div class="formElement">
					<input type="text" datatype="s6-20" recheck="password" nullmsg="此项为必填项！" errormsg="两次输入的密码不一致！！" name="confirmPassword" placeholder="请再次填写密码" />
					</div>
					<div class="Validform_checktip">*</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">手机号码</label>
				<div class="controls">
					<div class="formElement">
					<input type="text" datatype="m" name="mobile" nullmsg="此项为必填项！" errormsg="手机号码格式有误！！！"  placeholder="请填写手机号" />
					</div>
					<div class="Validform_checktip">*</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">email</label>
				<div class="controls">
					<div class="formElement">
					<input type="text" datatype="e" name="email" placeholder="请填写email" />
					</div>
					<div class="Validform_checktip">*</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">年龄</label>
				<div class="controls">
					<div class="formElement">
					<input type="text" class="{required:true,min: 18,max:100}" name="age" placeholder="请填写" />
					</div>
					<div class="Validform_checktip">*</div>
				</div>
			</div>
			<!-- 
			<div class="control-group">
				<label class="control-label">性别</label>
				<div class="controls">
					<input type="text" name="nickname" placeholder="请填写昵称" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">爱好</label>
				<div class="controls">
					<input type="text" name="nickname" placeholder="请填写昵称" />
				</div>
			</div>
			-->
			<div class="form-actions">
				<button type="submit" class="btn btn-primary">保存</button>
				<button type="button" class="btn">重置</button>
			</div>
		</form>
		
		</fieldset>
		
		<script type="text/javascript" src="jquery/jquery-1.9.0.min.js" ></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/Validform_v5.3.2.js" ></script>
		<script type="text/javascript">	
		/** 执行表单验证 */	
		$("#registerForm").Validform({ tiptype: 2 ,showAllError:true});
		</script>
	</body>
</html>

注意事项：

1.css样式文件冲突，如文章开头说的：

由于项目使用的了bootstrap框架，所以使用Validform框架中的css文件导入到页面会与bootstrap框架的样式发生冲突，这里我是将 Validform框架中的css文件的 "/*==========以下部分是Validform必须的===========*/" 之前的代码全部注释掉。

2.bootstrap表单做了相应的调整，否正Validform框架验证时没有错误提示信息：如果是普通表格一般不会出现此问题

按原来的jQueryValidate整合bootstrap框架时这样的：

<div class="control-group">
	<label class="control-label">昵称</label>
	<div class="controls">
	<input type="text" class="{required:true}" name="nickname" placeholder="请填写昵称" />
	<label class="requiedField">*</label>
	</div>
</div>

这次用Validform框架整合bootstrap框架时这样的：

<div class="control-group">
	<label class="control-label">昵称</label>
	<div class="controls">
		<input type="text" datatype="*" name="nickname" nullmsg="请输入昵称！"   placeholder="请填写昵称" />
		<div class="Validform_checktip">*</div>
	</div>
</div>

发现的问题是：

点击表单提交没有任何反应了，也没有错误提示信息了，通过js源码(第240~245行)可以得到一个结论，错误提示信息控件不能直接跟在验证控件的后面，必须与验证控件的父类同级。（$(this).parent().next().find(".Validform_checktip").length==0）

所以最终我将表单最初相应的调整能够显示错误或通过验证信息，保证在表单控件与错误提示信息在同一行显示

出现错误提示信息解决：

将表单域添加到<div class="formElement"></div>中，添加样式为 .formElement{ display: inline-block; }

错误提示信息显示在一行：

在Validform框架的css样式文件中，在第305行添加 display: inline-block; 即可，否正换行显示错误信息。

源码已经打包到百度云盘，下载地址：

链接：https://pan.baidu.com/s/1t7bR2atA7lNJ0ytt0RfrRQ
提取码：25kg
复制这段内容后打开百度网盘手机App，操作更方便哦

zgphacker2010

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
Validform表单验证框架详解

Validform是另外一种表单验证框架，也是基于jQuery框架，用法比较灵活。这里使用该框架的版本号为：Validform_v5.3.2官网：http://validform.rjboy.cn/目前已经打不开了，本文最后会将官方的的demo打包。下面来看看官方给的使用入门：这里直接按官方的来写Validform使用入门1、引入css请查看下载文件中的style.c...
复制链接

扫一扫