数据验证你做到位了吗--前端验证,后端验证

张映 发表于 2010-06-30

分类目录: php

标签:, , ,

一,什么是数据验证

数据验证其实就是数据的合法性校验,例如:用户添加的邮件地址是不是正确啊,是不是太长了等等。

为什么要进行数据校验。

1,约束用户不要糊乱添写

2,我们想得到更真实的用户信息

3,人性化的验证,用户体验好,让别人觉得很专业

4,对自己系统的保护

我把验证分成二部分,第一部分,前端验证;第二部分,后端验证。

二,前,后端验证

前端验证,是为了区别后端验证而这样说的,主要是用js,jquery来验证数据的合法性,来增强用户体验的,比如,鼠标移上去会有提示效果,鼠标离开,就会马上告诉你数据是否合法等等。

有人会问,前端校验已经完全可以校验数据的合法性了,为什么还要后端校验呢?不是多此一举吗?

没有前端验证可以,顶多让用户觉得这个网站不是很好用,但是没有后端验证,数据就会有问题了。举个例子:

1,你在blog.51yip.com/regist.php注册页面添完数据后,跳转到 blog.51yip.com/registok.php,如果走这个流程,regist.php做了前端验证,就可以不用做后端验证了。

2,我在本地也建了一个localhost/regist.php,添加完数据不进行验证,直接跳转到blog.51yip.com/registok.php,如果这样的话,我就避开了blog.51yip.com/regist.php这个前端验证,如果registok.php不做后端验证的话,数据安全就会有隐患

三,应用举例

实例地址:http://blog.51yip.com/demo/test.php

例子中前端验证用的是JQUERY,加强用户体验,后端验证用的是CodeIgniter的一个表单验证类FormValidation,二者的思想是一样的,我想CodeIgniter的开发者就是根据jquery的思想来写FormValidation这个类的。

例子有一个明显的问题,是前端验证通过了,后端验证没有难过,这是我故意让大家看出效果才这样做的,如果后端验证和前端验证的规则一样的话,你就看不出有没有后端验证了

下面的是test.php的代码,有点长,但是很简单:

<?php
require_once 'reg_files/FormValidation.php';
class checkdata{
 private $validation   = null;
 public $errormes   = null; 

 //页面入口程序
 public function indexAction(){ 

 if(!$this->check_form()){
 // 如果数据验证没通过
 $this->errormes = $this->validation->get_errordata(); 

 }
 }
 /**
 * 验证表单提交数据有效性
 *
 * @return unknown
 */
 private function check_form(){
 $this->validation = new FormValidation();
 $this->validation->set_rules('Email',     '邮箱', 'trim|required|valid_email|max_length[1]');
 $this->validation->set_rules('RegionId', '区域', 'trim|required|valid_area|max_length[1]');
 $this->validation->set_rules('Name', '姓名', 'trim|required|max_length[12]');
 $this->validation->set_rules('engName', '英文名字', 'trim|required|max_length[13]');
 $this->validation->set_rules('phone', '电话', 'trim|required|numeric|max_length[11]');
 $this->validation->set_rules('postCode', '邮编','trim|numeric|required');
 return $this->validation->run();
 }
} 

$test = new checkdata();
$test->indexAction();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" lang="utf-8"><head>  

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>注册</title>
 <script type="text/javascript" src="reg_files/jquerymin.js"></script>
 <script type="text/javascript" src="reg_files/jquery.validate.js"></script>
 <script type="text/javascript" src="reg_files/regist.js"></script> 

 <style>
 #field, label {font-family: Arial, Helvetica, sans-serif; font-size: small; } 

 input.submit { float: none; } 

 input.error,select.error { border: 1px solid red; width: auto; }
 label.error {
 background: url('./reg_files/unchecked.gif') no-repeat;
 padding-left: 16px;
 margin-left: .3em;
 }
 label.valid {
 background: url('./reg_files/checked.gif') no-repeat;
 width: 16px;
 height: 16px;
 }
</style>
 </head>
 <body>
 <br><br> 

 访问<a href="http://blog.51yip.com">海底苍鹰博客</a> 

<br><br>
<?php if(!empty($test->errormes)){
foreach($test->errormes as $k=>$v){
 echo "<p><font color='red'>$v</font></p>";
} 

}?>
 <br><br>
 <form id="regist_form" method='post' name='regist_form' action='test.php'> 

 <div>
 名字: <input name="Name" id="Name" tabindex="6005" type="text" value="<?php echo empty($_POST['Name']) ?  "请输入中文名字" : $_POST['Name'];?>" notice="请输入中文名字" >
 <label generated="true" for="Name" style="display: none;"></label>
 </div>
 <div></div>     

 <div>
 英文名字:<input name="engName" id="engName" tabindex="6005" type="text" value="<?php echo empty($_POST['engName']) ?  "请输入英文名字" : $_POST['engName']; ?>" notice="请输入英文名字">
 <label generated="true" for="engName" style="display: none;"></label>
 </div>
 <div></div>     

 <div>
 区域选择:  <select name="RegionId" id="RegionId" tabindex="6006">
 <option value="0" selected="selected">行政区选择</option>
 <option value="12">浦东新区</option>
 <option value="42">松江区</option>
 <option value="41">金山区</option>
 <option value="40">崇明区</option>
 <option value="39">青浦区</option>
 <option value="37">静安区</option>
 <option value="36">徐汇区</option>
 <option value="35">长宁区</option>
 <option value="34">虹口区</option>
 <option value="33">闸北区</option>
 <option value="32">宝山区</option>
 <option value="31">嘉定区</option>
 <option value="30">闵行区</option>
 <option value="29">普陀区</option>
 <option value="28">卢湾区</option>
 <option value="27">黄浦区</option>
 <option value="26">杨浦区</option>
 <option value="43">奉贤区</option>
 </select> 

 <label id="citySelect"  for="citySelect" style="display: none;padding-left: 15px;"></label>
 </div>
 <div></div>     

 <div>
 邮政编码: <input name="postCode" id="postCode" tabindex="6005" type="text"  value="<?php echo empty($_POST['postCode']) ?  "请输入邮编" : $_POST['postCode']; ?>" notice="请输入邮编">
 <label generated="true" for="postCode" style="display: none;"></label>
 </div>
 <div></div>     

 <div>
 Email: <input name="Email" id="Email" tabindex="6005" type="text" value="<?php echo empty($_POST['Email']) ?  "请输入Email" : $_POST['Email']; ?>" notice="请输入Email"> 

 <label generated="true" for="Email" style="display: none;"></label>
 </div>
 <div></div>     

 <div>
 电话: <input name="phone" id="phone" tabindex="6005" type="text" value="<?php echo empty($_POST['phone']) ?  "请输入电话" : $_POST['phone']; ?>" notice="请输入电话">
 <label generated="true" for="phone" style="display: none;"></label>
 </div>
 <div></div>
 <input name="submit" type="submit" value='submit'>
 </form>      

 </body>
 <html>
 <script type="text/javascript">
 $(document).ready(function(){
 new regist().init();
 });
 </script>


转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/php/890.html

留下评论

留下评论
  • (必需)
  • (必需) (will not be published)
  • (必需)   7X1=?