6.注册功能_添加验证码链接地址-微博开发实战

6.注册功能_添加验证码链接地址-微博开发实战

杆坟染耻耗潦弊篓胎耙晦泵琅

---

调用thinkphp的验证码 验证码不需要自己写，调用tp即可 

相关代码在手册的 19杂项-19.8验证码

   

复制代码即可 

将其中“”改为英文的’ ‘;复制到LoginAction.class.php中代码如下：  

	/**
	 * 获取验证码
	 */
	public function verify(){
		import('ORG.Util.Image');
		Image::buildImageVerify();
	}

调用的tp验证码位置：

在register.html中调用验证码原来的代码与修改后的代码对比如下：

<!--<img src="__PUBLIC__/Images/bottom_logo.gif" width='80' height='25' id='verify-img'/>-->
<img src="{:U('verify')}" width='80' height='25' id='verify-img'/>

使用tp的U方法  传入参数 verify 此时会调用当前控制器的verify函数 如果写作： 

{:U('Index/verify')}

则会调用Index控制器下的verify方法

书写完成代码后即可成功调用验证码

运行：http://localhost/weibo/index.php/Login/register

根据手册，还可以对验证码进行个性化定制；

将LoginAction.class.php中的验证码参数设置为1   则验证码为一位验证码：

public function verify(){
		import('ORG.Util.Image');
		Image::buildImageVerify(1);
	}
	 

设置验证码长度为4 类型为数字  图片类型为png:

public function verify(){
		import('ORG.Util.Image');
		Image::buildImageVerify(4,1,'png');
	}

实现点击验证码图片更新验证码，原理，点击图片就刷新一次浏览器，调用新的tp验证码

对于tp的URL解释：

http://localhost/weibo/index.php/Login/register

上方路径的意思是访问localhost下的weibo目录下的Login控制器（省略了LoginAction的Action）下的register方法

http://localhost/weibo/index.php/Login/register/aa/bb

上方路径的意思是访问localhost下的weibo目录下的Login控制器（省略了LoginAction的Action）下的register方法的参数aa,参数值为bb

所以js实现只需要点击改变路径即可刷新验证码

在register.html中引入jquery

<js file=’__PUBLIC__/Js/jquery-validate.js’/>

在Public的Js目录下新建register.js

并在register.html中引入：

<js file=’__PUBLIC__/Js/register.js’/>

register.js代码：

$(function () {

	//点击刷新验证码
	var verifyUrl = $('#verify-img').attr('src');//获取验证码地址
	$('#verify-img').click(function () {
		$(this).attr('src', verifyUrl + '/' + Math.random());//在验证码的url地址后面添加随机参数
		alert($(this).attr('src'));
	});


});

此时点击验证码可以更新验证码：

对于用户注册需要进行表单验证，这里使用第三方js验证插件：

官网：http://bassistance.de/jquery-plugins/jquery-plugin-validation 

点击下方链接下载：

http://www.xuexianswer.com/yunpan/short.php?sid=5MTDD2

使用说明：

http://www.xuexianswer.com/yunpan/short.php?sid=txqFV1

拷贝jquery-validate.js到Public的Js文件夹下

并在register.html中引入：

因为依赖于jquery，所以必须放置在引入的jquery代码之下

<js file='__PUBLIC__/Js/jquery-1.7.2.min.js'/>
	
	<js file='__PUBLIC__/Js/jquery-validate.js'/>

检测引入的代码是否成功：

1、Ctrl+F5深度刷新  

2、鼠标右键查看源代码

3、点击引入的源码，能够访问则引入成功：

那隘筐来巾馈棚嘿蔡郝具老刻