Maker's blog » 验证 http://blog.foolbird.net 用多一点点的辛苦, 去交换多一点点的幸福. Fri, 30 Mar 2012 13:18:54 +0000 en hourly 1 http://wordpress.org/?v=3.1 vForm ver1.3 build 20071207 http://blog.foolbird.net/691.html http://blog.foolbird.net/691.html#comments Fri, 07 Dec 2007 06:21:24 +0000 maker http://localhost/sablog-wordpress/wp/?p=691 为了简化烦琐的javascript前端验证代码,

为了更好的通过w3c标准认证,

Oh yeah, vForm诞生了!

下载程序请直接拉到文章最后的附件部分.

什么是vForm?

vForm是一个php和一个javascript的结合, 再具体点说,vform由一个php类和一个javascript验证函数库组成, php的作用就是控制调用和生成javascript.

为什么开发vForm?

javascript验证是我们公司每个项目必须要做的工作, 为了避免反复写大量的javascript验证代码, 所以抽出了一些时间开发vForm.

vForm有多方便?

因为本人很懒, 所以需要程序一定要完成大部分工作.不说废话,上代码,看看vform如何完成一个表单验证. 注:需要将vform.php和vform.js放到同目录下.可以直接下载程序包,里面也有这个例子.

___________________simple.php____________________

<?php
/**
*   这是一个vfrom使用的一个离子.本例中为大家演示了各种验证规则
* 的使用和同页面多表单验证的实现方法.
*/
require_once(’vform.php’);
$config  = array(
array(”,’username’,’require’,’请输入帐号’),
array(’len’,’username’,’10′,’帐号不能超过10位’,’5′,’帐号不能少于5位’),
array(”,’pass’,’require’,’请输入密码’),
array(’len’,’pass’,’16′,’密码不能超过16位’,’6′,’密码不能少于6位’),
array(’s’,’repass’,’pass’,’两次输入的密码必须相同’),
array(”,’qq’,’number’,’QQ号码必须为数字’),
array(’len’,’qq’,’9′,’QQ号码不能超过9位’,’5′,’QQ号码不能少于5位’),
array(”,’phone’,’phone’,’电话号码由-和数字组成’),
array(”,’name’,’chinese’,’姓名必须是汉字’),
array(’len’,’name’,’4′,’这里不欢迎日本人’,’2′,’名字太短了’),
array(”,’ename’,’english’,’英文名必须是英文’),
array(’len’,’name’,’25′,’你是火星人么?’,’2′,’名字太短了’),
array(”,’age’,’number’,’年龄要是数字才行’),
array(”,’postcode’,’postcode’,’这个是邮政编码’),
array(”,’p’,’percent’,’一个百分比’),
array(”,’f’,’float’,’一个有理数,正负小数整数等等’),
array(”,’nc’,’nochinese’,’不能输入汉字’),
);
$config2  = array(
array(”,’username2′,’require’,’请输入帐号2′),
array(”,’pass2′,’require’,’请输入密码2′),
array(’s’,’repass2′,’pass2′,’两次输入的密码2必须相同’)
);
$vform   = new vform($config, ‘form1′);
$xform   = new vform($config2, ‘b_2′, ‘click’);
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>vForm示例</title>
<style type=”text/css”>
*{
margin:0;
}
body,html{
font:12px;
text-align:center;
}
h1{
font:36px;
font-weight:bold;
text-align:left;
background:#ccc;
border-bottom:2px solid #666;
margin-bottom:10px;
}
form{
margin:10px;
}
img{
border:0;
}
#main{
width:275px;
margin:0 auto;
text-align:left;
}
#main p{
text-align:right;
padding:2px;
}
.text{
width:150px;
background:#eee;
border:1px solid #666;
}
.botton{
width:75px;
color:#fff;
font-weight:bold;
background:#555;
border:1px solid #000;
padding:2px;
}
</style>
<?=$vform->p();?>
<?=$xform->p(true);?>
</head>
<body>
<h1>vForm示例</h1>
<div id=’main’>
<form action=’http://www.m4ker.net’ method=’get’ id=’form1′ >
<p><b>帐号:</b><input name=’username’ class=’text’ id=’username’ /></p>
<p><b>密码:</b><input name=’pass’ class=’text’ id=’pass’ /></p>
<p><b>重复密码:</b><input name=’repass’ class=’text’ id=’repass’ /></p>
<p><b>电话号码:</b><input name=’phone’ class=’text’ id=’phone’ /></p>
<p><b>QQ号码:</b><input name=’qq’ class=’text’ id=’qq’ /></p>
<p><b>姓名:</b><input name=’name’ class=’text’ id=’name’ /></p>
<p><b>英文名:</b><input name=’ename’ class=’text’ id=’ename’ /></p>
<p><b>年龄:</b><input name=’age’ class=’text’ id=’age’ /></p>
<p><b>邮政编码:</b><input name=’postcode’ class=’text’ id=’postcode’ /></p>
<p><b>百分比:</b><input name=’p’ class=’text’ id=’p’ /></p>
<p><b>有理数:</b><input name=’f’ class=’text’ id=’f’ /></p>
<p><b>非汉字:</b><input name=’nc’ class=’text’ id=’nc’ /></p>

<p><input type=’submit’ value=’验证’ class=’botton’ id=’b_1′ /></p>
</form>
<form action=’http://www.m4ker.net’ method=’get’ id=’form2′ >
<p><b>帐号2:</b><input name=’username’ class=’text’ id=’username2′ /></p>
<p><b>密码2:</b><input name=’pass’ class=’text’ id=’pass2′ /></p>
<p><b>重复密码2:</b><input name=’repass’ class=’text’ id=’repass2′ /></p>

<p><input type=’submit’ value=’验证’ class=’botton’ id=’b_2′ /></p>
</form>
<p><a href=”http://validator.w3.org/check?uri=referer”><img src=”http://www.w3.org/Icons/valid-xhtml10” alt=”Valid XHTML 1.0 Transitional” height=”31″ width=”88″ /></a></p>
</div>
</body>
</html>

______________________________________

Ok了, 一点javascript都不需要.更详细的使用方法就需要大家自己发掘了.

附件:vform ver1.3 bulid 20071207

Related Posts

]]> http://blog.foolbird.net/691.html/feed 1