MainController.class.php

<?php
namespace AjaxYz\Controller;
use Think\Controller;
class MainController extends Controller
{
    public function xianshi()
    {
        $n = D("yonghu");
        $yz = $_POST["yz"];
        if(empty($_POST))
        {
            $this->show();
        }
        else//如果$_POST不为空,走验证,验证是否成功,添加数据库
        {    //造一个验证规则
            $arr = array(
                array('uid','require','输入的用户名不能为空',0),//非空验证require
                array('pwd','require','输入的密码不能为空',0),//非空验证require
                array('pwd','pwd1','输入的密码不一致',0,'confirm'),//相等验证:confirm(验证表单中的两个字段是否相同，定义的验证规则是一个字段名),意思是pwd1必须为字段
                array('name','require','输入的姓名不能为空',0),
                array('email','email','输入的邮箱格式不正确'),
                array('shenfen','/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/','身份证号不正确',0,'regex'),
                array('age','18,50','您的年龄不在范围内',0,'between')//范围验证
            );
            if($n->validate($arr)->create())//$n->validate($arr),添加之前执行验证规则
            {
                $verify = new \Think\Verify();
                //如果验证成功,返回true,失败false
                if($verify->check($yz/*, $id*/))//$id为验证码的标识,在$Verify->entry();中没有定义标识,不写
                {
                    $n->add();
                    $this->ajaxReturn('注册成功','eval');
                }
                else
                {
                    $this->ajaxReturn('您输入的验证码不正确','eval');
                }   

            }
            else
            {
                $this->ajaxReturn($n->getError(),'eval');
            }
        }
    }
    public function yzm()//生成验证码
    {
        $v = new \Think\Verify();
        $v->entry();
    }
    public function _empty()//空方法,防止报错
    {
        $this->display('Empty/empty');
    }
}

xianshi.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="__PUBLIC__/js/jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
</head>
<style type="text/css">
.a{ margin-bottom:5px}
#b{ text-align:center; margin-top:50px}
</style>
<body>
<div id="b">
<div class="a">用 户 名:<input type="text" id="uid" /></div>
<div class="a">密&nbsp;&nbsp;码:<input type="text" id="pwd" /></div>
<div class="a">确认密码:<input type="text" id="pwd1" /></div>
<div class="a">姓&nbsp;&nbsp;名:<input type="text" id="name" /></div>
<div class="a">邮&nbsp;&nbsp;箱:<input type="text" id="email" /></div>
<div class="a">身 份 证:<input type="text" id="shenfen" /></div>
<div class="a">年&nbsp;&nbsp;龄:<input type="text" id="age" /></div>
<div class="a">验 证 码:<input type="text" id="yz" /></div>
<div class="a"><img id="img" src="__CONTROLLER__/yzm" /></div>
<div class="a" style="font-size:8px; color:#00F">点击图片更换验证码</div>
<div class="a"><input type="button" value="注册" id="btn" /></div>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
//点击图片,定义src,再走一遍方法,BUG是个别浏览器不兼容,可生成随机数,当参数传值
$("#img").click(function(){
    var a = Math.ceil(Math.random()*100);//生成随机数,Math.random()是生成随机数,Math.ceil()是向上取整,Math.ceil(Math.random())都是取整到1,可以*100来生成1-100的随机整数
    $("#img").attr("src","__CONTROLLER__/yzm/suijishu/"+a+"");//个别浏览器如果地址一样,验证码不加载,可以后带一个参数(生成随机数),suijishu可以随意定义,传到后台不用
})
//点击提交POST数据
$("#btn").click(function(){
    var uid = $("#uid").val();
    var pwd = $("#pwd").val();
    var pwd1 = $("#pwd1").val();
    var name = $("#name").val();
    var shenfen = $("#shenfen").val();
    var email = $("#email").val();
    var age = $("#age").val();
    var yz = $("#yz").val();
    $.ajax({
    url:"__ACTION__",
    data:{uid:uid,pwd:pwd,pwd1:pwd1,name:name,email:email,shenfen:shenfen,age:age,yz:yz},
    type:"POST",
    dataType:"TEXT",
    success: function(data)
    {
        if(data != "注册成功")
        {
            alert(data);//输出错误提示信息
        }
        else//注册成功,跳转页面
        {
            window.location.href="__CONTROLLER__/_empty";//window.location.reload();ajax刷新当前页面
        }
    }
    });
})

});
</script>
</body>
</html>

________

ajax+表单验证+验证码生成例子的更多相关文章

  1. jquery php ajax 表单验证

    本实例用到 JQuery 类库本身的函数和功能,所有表单信息利用 PHPMailer 类库邮件的形式发送.   .创建一个表单 html 页面   表单部分 html 代码   以下为引用内容: &l ...

  2. validate+jquery+ajax表单验证

    1.案例 1.1 Html form表单内容 <form class="cForm" id="cForm" method="post" ...

  3. Ajax 表单验证 实现代码

    兼容: opera 9.6 + chrome 2.0 + FF 3 + IE 6 效果:一边输入一边实现验证 image 环境:ruby 1.8.6 + rails 2.1.0 + windows 核 ...

  4. 转：MVC遇上bootstrap后的ajax表单验证

    使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了,而且有模型在使用模型验证更方便点.怎么解决呢? 当 ...

  5. jQuery Validatede 结合Ajax 表单验证提交

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. boostrap ajax表单验证提交

    =============================================================================== 1. 1 <link href=& ...

  7. MVC遇上bootstrap后的ajax表单模型验证

    MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...

  8. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  9. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

随机推荐

  1. 【Network】golang 容器项目 flannel/UDP相关资料

    参考资料: flannel_百度搜索 Flannel首页.文档和下载 - 容器集群子网 - 开源中国社区 docker下基于flannel的overlay网络分析 - OPEN 开发经验库 flann ...

  2. Xcode常用快捷键（持续更新-20160811）

    前言 专门花时间记Xcode快捷键,我觉得没必要,一时记住,不久又会忘记. 用到才记. Xcode常用快捷键 新建 shift + cmd + n     新建项目 cmd + n           ...

  3. mongoosejs学习地址

    http://mongoosejs.com/docs/api.html#querystream-js Node的小基友supervisor 和 forever 不要忘记了,相信你会喜欢他们的:) ht ...

  4. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...

  5. springMVC 的工作原理和机制

    工作原理上面的是springMVC的工作原理图: 1.客户端发出一个http请求给web服务器,web服务器对http请求进行解析,如果匹配DispatcherServlet的请求映射路径(在web. ...

  6. Power BI for Office 365（二）Power Query

    在上一篇中我们看到了Power BI在移动端的支持,从这一篇起降依次介绍Power BI中的各个功能组件,此篇讲通过一个故事来介绍如何在Power Query中获取并且组织数据. 在这个系列中,我们将 ...

  7. 【Cocos2d-x for WP8 学习整理】（3）CCScrollView 实现捕鱼达人一样的场景选择界面

    UI 界面一般是游戏里比较独立的地方,因为游戏引擎一般都比较注意基础的功能封装,很少会关注UI,但是 UI 确是玩家第一眼看到的效果,因此能否实现一个美观的UI对于提升游戏的整体美观有着很大的帮助. ...

  8. fabric devenv Vagrantfile配置

    Vagrantfile文件只会在第一次执行vagrant up时调用执行,其后如果不明确使用vagrant reload,则不会被强制重新加载. # This is the mount point f ...

  9. ajax下载文件

    得到所有Post数据: var postData=Request.Form.ToString() 构建JS代码 // Ajax 文件下载jQuery.download = function(url, ...

  10. 单色半透明-兼容IE7

    background: #000; width: 100%;height: 100%; filter: alpha(opacity=30); opacity: 0.3;