ThinkPHP框架表单验证AJAX

验证有两种方式:静态验证与动态验证。

一、静态验证 

在模型类里面预先定义好该模型的自动验证规则,我们称为静态定义。

验证时要在test表的Model里面加验证条件:新建testModel.class.php,在模型类里面定义了$_validate属性如下:

复制代码
<?php
namespace Home\Model;
use Think\Model;
class testModel extends Model
{
    //静态验证
    protected $_validate = array(    
        array('uid','require','用户名不能为空'),        
        array('pwd','require','密码不能为空'),
        array('repwd','pwd','确认密码不正确',1,'confirm'),
        array('age','18,50','年龄必须在18-50岁之间',1,'between'),
        array('email','email','邮箱格式不正确'),
    
    );    
    
}
复制代码

定义好验证规则后,就可以在使用create方法创建数据对象的时候自动调用:

复制代码
<?php
namespace Home\Controller;
use Home\Controller\CheckController;
class ZhuCeController extends CheckController
{
    function ZhuCe()
    {
        //静态验证,不能在后面直接显示,必须全部通过验证才能注册
        $cw = "";
        if(!empty($_GET))
        {
            $cw = $_GET["cw"];    
        }
        if(empty($_POST))
        {
            $this->assign("error",$cw);
            $this->display();
        }
        else
        {
            $model = new \Home\Model\testModel();
            //$model = D("test");    //动态验证可以用D方法
             
            if(!$model->create())
            {                
                $e = $model->getError();
                $url = "ZhuCe/cw/{$e}";
                $this->error("注册失败!",$url,1);
            }
            else
            {
                $model->add();    
            }
复制代码

模板ZhuCe.html:

复制代码
<body>
<form action="__ACTION__" method="post">
<div>用户名:<input type="text" name="uid" id="uid" /> </div><br />
<div>密码:<input type="text" name="pwd" id="pwd" /></div><br />
<div>确认密码:<input type="text" name="repwd" id="repwd" /> </div><br />
<div>年龄:<input type="text" name="age" id="age" /> </div><br />
<div>邮箱:<input type="text" name="email" id="email" /> </div><br />
<div>姓名:<input type="text" name="name" /></div><br />
<div><{$error}></div>   <!--显示错误信息-->
<input type="submit" value="注册" />
</form>
复制代码

请求ZhuCe方法:

   

二、动态验证

如果采用动态验证的方式,就比较灵活,可以根据不同的需要,在操作同一个模型的时候使用不同的验证规则,例如上面的静态验证方式可以改为:

复制代码
<?php
namespace Home\Controller;
use Home\Controller\CheckController;
class ZhuCeController extends CheckController
{
    function ZhuCe()
    {        
        if(empty($_POST))
        {            
            $this->display();
        }
        else
        {
            //$model = new \Home\Model\testModel();
            $model = D("test");    //动态验证可以用D方法            
            //动态验证
            $rules = array(
                array('uid','require','用户名不能为空')
            );
            //调用validate()加入验证规则
            $r = $model->validate($rules)->create();//若验证失败返回false,成功返回注册的test表数组信息
            //var_dump($r);
            if(!$r)
            {
                echo $model->getError(); //若验证失败则输出错误信息    
            }
            else
            {
                $model->add();    
            }
            
        }    
    }
复制代码

我们还可以在表单后面直接显示错误提示,这就要用到ajax。以验证用户名非空为例:

在模板ZhuCe.html中:

复制代码
<script src="../../../../../jquery-1.11.2.min.js"></script>  
</head>

<body>
<form action="__ACTION__" method="post">
<div>用户名:&nbsp;<input type="text" name="uid" id="uid" /> <span id="ts"></span></div><br />
<div>密码:&nbsp;&nbsp;<input type="text" name="pwd" id="pwd" /> <span id="pts"></span></div><br />
<div>确认密码:<input type="text" name="repwd" id="repwd" /> <span id="rpts"></span></div><br />
<div>年龄:&nbsp;&nbsp;<input type="text" name="age" id="age" /> <span id="nts"></span></div><br />
<div>邮箱:&nbsp;&nbsp;<input type="text" name="email" id="email" /> <span id="ets"></span></div><br />
<div>姓名:&nbsp;&nbsp;<input type="text" name="name" /></div><br />
<!--<div><{$error}></div> -->  <!--显示错误信息-->
<input type="submit" value="注册" />
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#uid").blur(function(){
        var uid = $(this).val();
        $.ajax({
            
            url:"__CONTROLLER__/Yhm",  <!--提交到方法,而不是页面-->
            data:{uid:uid},   <!--因为做的是表单验证,所以提交时要与表单name值一致,相当于提交表单 -->
            type:"POST",
            dataType:"TEXT",   <!--返回数据类型要与ajaxReturn中的参数对应,TEXT对应eval-->
            success: function(data){
                //alert(data);
                var str = "";
                if(data.trim()=="OK")
                {
                    str = "<span style='color:green'>"+data+"</span>";
                }
                else
                {
                    str = "<span style='color:red'>"+data+"</span>";    
                }
                
                $("#ts").html(str);
                }
            });        
        })
复制代码

在ZhuCe控制器中再做一个Yhm方法:

复制代码
//验证用户名非空
    function Yhm()
    {
        $model = D("test");    
        $rules = array(
                array('uid','require','用户名不能为空')
            );
            
            if(!$model->validate($rules)->create())
            {
                $fh = $model->getError();
                $this->ajaxReturn($fh,'eval');  //ajax返回数据,默认返回json格式,eval返回字符串,因为dataType是TEXT,所以用eval格式
            }
            else
            {
                $fh = "OK";    
                $this->ajaxReturn($fh,'eval');
            }
    }
复制代码

请求ZhuCe方法:

   

其他验证也是类似的方法,提交相应数据到对应方法,使用相应的验证规则。

 

posted @ 2018-04-15 11:14  剑仙6  阅读(847)  评论(0编辑  收藏  举报
欢迎访问个人网站www.qingchun.在线