使用ajax提交表单、服务器端验证、ajax显示错误提示

复制PHP内容到剪贴板

PHP代码:

<?php
/**验证类*/
class post{
        /**正在验证的值*/
        protected $val;
        /**正在验证的键*/
        protected $key;
        /**当前验证值是否必须不为空*/
        protected $required;
        /**当前验证值为空时的默认值*/
        protected $default;
        /**验证后的数据        */
        public $data;
        /**验证后的消息        */
        public $msg;
        /**错误次数        */
        protected $error_count = 0;
        /**验证有错误时把错误信息以JSON格式输出并退出*/
        function on_error_json(){
                if ($this->error_count) {
                        echo json($this->msg);
                        exit();
                }
        }
        /**验证是否必须*/
        protected function required()
        {
                if ($this->val=='') {
                        if ($this->required) {
                                $this->aft_valid('请填写');
                        }else {
                                $this->val = $this->default;
                                $this->aft_valid(0);
                        }
                        return false;
                }else {
                        return true;
                }
        }
        /**是否在长度范围        */
        protected function lenth($min,$max){
                $len = iconv_strlen($this->val,'UTF-8');
                return ($len >= $min && $len <= $max);
        }
        /**验证之前的动作*/
        protected function per_valid($key,$required,$default,$trim=1)
        {
                $this->val = $_POST[$key];
                if ($trim){
                        $this->val = trim($this->val);
                }
                $this->key = $key;
                $this->default = $default;
                $this->required  = $required;
        }
        /**验证后的判断方法*/
        protected function aft_valid($code){
                if ($code){
                        $this->msg[$this->key] = $code;
                        $this->error_count += 1;
                }else {
                        $this->msg[$this->key] = 0;
                        $this->data[$this->key] = $this->val;
                }
        }
        /**自定义错误*/
        function add_msg($key,$code){
                if ($code){
                        $this->msg[$key] = $code;
                        $this->error_count += 1;
                }
        }
        /**        普通验证*/
        function normal($key,$required=1,$min=0,$max=0,$default='')
        {
                $this->per_valid($key,$required,$default);
                if ($this->required()) {
                        if ($max && !$this->lenth($min,$max)){
                                $code = '长度不吻合';
                        }
                        $this->aft_valid($code);
                }
        }
        /**        文本输入域（不需要TRIM）*/
        function text($key,$required=1,$min=0,$max=0,$default='')
        {
                $this->per_valid($key,$required,$default,0);
                if ($this->required()) {
                        if ($max && !$this->lenth($min,$max)){
                                $code = '长度不吻合';
                        }
                        $this->aft_valid($code);
                }
        }
        /**        字母、数字和下划线*/
        function al_num($key,$required=1,$min=0,$max=0,$default='')
        {
                $this->per_valid($key,$required,$default);
                if ($this->required()) {
                        if (!ctype_alnum(trim($this->val,'_'))){
                                $code = '只能输入字母、数字、下划线及其组合';
                        }elseif ($max && !$this->lenth($min,$max)){
                                $code = '字符长度不吻合';
                        }
                        $this->aft_valid($code);
                }
        }
        /**        数字*/
        function digit($key,$required=1,$min=0,$max=0,$min_len=0,$max_len=0,$default=0)
        {
                $this->per_valid($key,$required,$default);
                if ($this->required()) {
                        if (!ctype_digit($this->val)){
                                $code = '只能输入数字';
                        }elseif ($max && ($this->val<$min || $this->val>$max)){
                                $code = '数字大小不正确';
                        }elseif ($max_len && !$this->lenth($min_len,$max_len)){
                                $code = '数字位数不吻合';
                        }
                        $this->aft_valid($code);
                }
        }
        /**        电子邮件*/
        function email($key,$required=1,$default)
        {
                $this->per_valid($key,$required,$default);
                if ($this->required()) {
                        $this->aft_valid($code);
                }
        }
        /**        验证日期*/        
        function date($key,$year='year',$month='month',$day='day',$required=1,$hour='hour',$min='min',$required_time=0)
        {
                $this->per_valid($key,$required,'1980-8-8 8:0:0');
                if ($_POST[$year]=='' || $_POST[$month]=='' || $_POST[$day]=='') {
                        if ($required) {
                                $code  = '请填写完整日期';
                        }else {
                                $_POST[$year] = 1980 ;
                                $_POST[$month] = 8 ;
                                $_POST[$day] =8 ;
                        }
                }elseif ($_POST[$year]<1900 || !checkdate($_POST[$month],$_POST[$day],$_POST[$year])){
                        $code = '请填写有效的日期';
                }
                if ($_POST[$hour]=='' || $_POST[$min]=='') {
                        if ($required_time) {
                                $code  = '请填写完整时间';
                        }else {
                                $_POST[$hour] = 0;
                                $_POST[$min] = 0;
                        }
                }elseif ($_POST[$hour]<0 || $_POST[$hour]>12 || $_POST[$min]<0 || $_POST[$min]>60) {
                        $code = '请填写有效的时间';
                }
                if (!isset($code)) {
                        $this->val = mktime($_POST[$hour],$_POST[$min],0,$_POST[$month],$_POST[$day],$_POST[$year]);
                }
                $this->aft_valid($code);
        }        
        /**验证两个值是否匹配*/
        function match($key,$key2,$required=1,$unset=1)
        {
                $this->per_valid($key,$required,'');
                if ($this->required()) {
                        if ($_POST[$key]!=$_POST[$key2]) {
                                $code = '两次的输入不一致';
                        }
                        $this->aft_valid($code);
                }
                if ($unset) {
                        unset($this->data[$key]);
                }
        }        
}
?>

复制PHP内容到剪贴板

PHP代码:

$post= new post();
$post->digit('id');
$post->normal('password',1,6,16);
$post->match('password2','password');
//如果验证未通过，则向客户端输出验证的错误消息（json格式），客户端再来处理
$post->on_error_json();
//验证通过后的代码
......

复制PHP内容到剪贴板

PHP代码:

<!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">
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script type="text/javascript" src="/js/fv.js"></script>
<link href="/css/form.css" rel="stylesheet" type="text/css" />
<link href="/css/main.css" rel="stylesheet" type="text/css" />

<form id="fm"  method="post" action="/admin/chgpass">
<div class="bar">修改会员密码</div>
<div class="tint_green" style="margin-left:40px">
<table border="0" width="700">
<tr valign="top">
        <td class="left">新密码：</td>
        <td ><input type="password" name="password" class="ipt_small"></td>
    <td width="400"><div alt="password" title="长度为6-16位的密码"></div></td>
</tr>
<tr valign="top">
        <td class="left">确认新密码：</td>
        <td><input type="password" name="password2" class="ipt_small"></td>
    <td><div alt="password2" title="确保没错，请在输入一次密码"></div></td>
</tr>
</table>
</div>
<input type="hidden" name="id" value=""/><div alt="id"/>
<p style="padding-left:173px"><br/><input id="submit" type="submit" value="提 交" class="btn_standed" /></p>
</form>
<script type="text/javascript">
fv('#fm');
function fc(result){
        _fc('修改会员密码成功','');
}
</script>

复制PHP内容到剪贴板

PHP代码:

var id = '';
var fv_init_css = 'fv_init';
var fv_err_css = 'fv_err';
var fv_pass_css = 'fv_pass';
var tp=1;
//初始化表单
function fv(_id,_tp){
id = _id;
tp = _tp;
if (tp==2){
  fv_init_css = 'fv_init_2';
  fv_err_css = 'fv_err_2';
  fv_pass_css = 'fv_pass_2';
} 
$(function(){
  fv_msg  = id + ' div [@alt]';
  $(fv_msg).each(function(){
   $(this).html($(this).attr('title')).attr('class',fv_init_css);
  });
  fv_ajax();
});
}
//ajaxsubmit
function fv_ajax(){
$(id).submit(function(){
  $(id).ajaxSubmit({success:fv_ajaxCallback});
  return false;
});
var submit = id + ' input[@type=submit]';
$(id).ajaxStart(function(){
  $(submit).hide().after('<div id="ajax_form_busy">正在处理 ...</b>');
});
$(id).ajaxStop(function(){
  $("#ajax_form_busy").remove();
  $(submit).show();
});
$(id).ajaxError(function(){
  alear("this is an error ocoured");
});
}
//ajax callback
function fv_ajaxCallback(result){
if (result.indexOf("{") == 0 ){
  fv_not_valided(result);
}else{
  fc(result);
}
}
//not valided
function fv_not_valided(result){
result = eval('(' + result + ')');
$.each(result,function(i,n){  
  var msg = id + ' div [@alt='+i+']';
  if (n=='0'){
   fv_pass(msg);
  }else{
   fv_err(msg,n);
  }  
});
}
function fv_pass(msg){ 
$(msg).empty().attr('class','fv_pass_css');
}
function fv_err(msg,_html){ 
var html = $(msg).attr('title') + '<span style="color:red">（' + _html + '）</span>';
$(msg).attr('class',fv_err_css).html(html);
}
function inPrompt(title,content)
{
return  '<div id=\"inprompt\"><div class=\"title\">'+title+'</div><div>'+content+'</div>';
}
function _fc(title,content){
$(id).empty().html(inPrompt(title,content));
}
function ff(id,_data){
if (_data.indexOf("{") != 0){return;}
var data = eval('(' + _data + ')');
$(function(){
  $.each(data,function(element,value){
   var element = id + ' [@name='+element+']';
   _ff(element,value)
  });
});
}
function _ff(element,value){
switch ($(element).attr('type')){
  case 'radio':
   $(element).each(function(){
    if ($(this).val()==value){
     $(this).attr('checked','checked');
    }else{
     $(this).removeAttr('checked');
    }
   })
   break;
  case 'checkbox':
   $(element).attr('checked','checked');
  default:
   $(element).val(value);
   break;
}
}

未标题-3.gif (17.54 KB)

2007-11-17 01:11

表单处理过程中

未标题-2.gif (17.6 KB)

2007-11-17 01:11

验证错误，客户端根据服务器输出的JSON，显示错误提示

未标题-4.gif (13.58 KB)

2007-11-17 01:11

处理完成

Y73{OW)[MAWACPE_AEM9][E.jpg (38.77 KB)

2007-11-17 01:23

部分未填写正确

NC`LX~MJ]5$7SXA3)9`G_1F.jpg (36.64 KB)

2007-11-17 01:23

用户已存在的错误提示