为了简化烦琐的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