yii验证码Captcha使用以及为什么验证码不刷新问题

Web 开发的过程中 ,  经常会用到验证码 ,  以防止机器人不断的提交数据 ,  造成网站的瘫痪 . Yii 里提供了一个验证码的插件 ,  就是 Captcha。参考资料http://houdunwang.com/lesson.html

第一步：

在项目中使用 Captcha 需要以下一些设置 : 在 Controller 里添加方法  actions

public function actions ()

 {

   return array (

     'captcha' =>array (

       'class' =>'CCaptchaAction' ,

       'minLength' =>1 ,

       'maxLength' =>5 ,

       'backColor' =>0xFFFFFF ,

       'width' =>100 ,

       'height' =>40

     )

    )

 }

同时 ,  需要将 captacha 添加到 accessRules 里 ,  以允许所有用户访问该方法 . 如下

添加一个属性：

public $verifyCode

          array('verifyCode', 'captcha', 'allowEmpty'=>!CCaptcha::checkRequirements()),

array('captcha', 'captcha', 'allowEmpty'=>!extension_loaded('gd'), 'on'=>'login'),//在rules数组最后添加：

第二在你的视图里面加上以下代码

<?php $this->widget('CCaptcha')?>

// 下面这个可以点击图片进行换验证码

 <div><?php $this->widget('CCaptcha',array('showRefreshButton'=>false,'clickableImage'=>true,'imageOptions'=>array('alt'=>'点击换图','title'=>'点击换图','丛毕style'=>'cursor:pointer')))?></div>

第三 我们伍闭需要在我们的 form model 中添加一个 verifycode 的属性来存放用户输入的验证码，然后通过 captcha 验证器来验证用户输入的验证码的准确性。

public $verifyCode

并在rules中添加如下

public function rules()

{

 return array(

...

array('verifyCode', 'captcha', 'on'=>'login', 'allowEmpty'=>!extension_loaded('gd')),

...

    )

}

验证码为什么没有刷新的原因：

后台登陆调用验证码，点击验证码不刷新，没有反应（所有验证码配置，参数都是正确的）。找错的时候发现可以刷新验证码的页面比不可以刷新验证码的页面多了一段 js 代码，用来处理点击验证码刷新的事件。

为什么会少了一段代码？原来就是因为控制器分别调用了 renderPartial 和 render. 下面就说说它们的区别：

在进行页面输出渲染的时候。

render  输出父模板的内容，将渲染的内容，嵌入父模板。

renderPartial  则不输出父模板的内容。只对本次渲染的局部内容，进行输出。

同时还有个重要的区别：

render  函数内部默认执行 processOutput($output) 函数， 会将把组件，比如 CTreeView  里面注册到 CClientScript  里面的需要的脚腔郑裂本进行渲染输出。

而 renderPartial()  默认不自动渲染输出客户端脚本，需要进行参数的指定，才会输出：

renderPartial($view,$data=null,$return=false,$processOutput=false)

指定 processOutput  为  true  即可。

就像我们遇到的问题，用 renderPartial 时，页面没有输出验证码刷新的那段 js，所以显示不正常。

更多问题到问题求助专区http://bbs.houdunwang.com/

前端表单设计,这里主要定义了手机号码filed和和发送短信的按钮 'id' =>'second'

<?php $form = ActiveForm::begin()?>

<?= $form->field($model, 'loginMode')->hiddenInput(['value' =>'login_sms_code'])->label(false)?>

<div class="form-group has-feedback login-mobile f-left">

<?= $form->field($model, 'mobile')->textInput(['placeholder' =>$model->getAttributeLabel('mobile')])->label(false) ?>

<span class="glyphicon glyphicon-phone form-control-feedback"丛辩></span>

</div>

<?= Html::buttonInput(Yii::t('app', 'Get SMS Code'), ['class' =>'btn bg-yellow ', 'name' =>'signup-button', 'id' =>脊郑游 'second']) ?>

<div class="clear"></div>

<div class="form-group has-feedback">

<?= $form->field($model, 'smsCode')->textInput(['placeholder' =>$model->getAttributeLabel('smsCode')])->label(false) ?>

<span class="glyphicon glyphicon-mobile form-control-feedback"></span>

</div>

<div class="footer bg-gray">

<?= Html::submitButton(Yii::t('app', 'Login'), ['class' =>'btn bg-blue btn-block']) ?>

</div><?php ActiveForm::end()?>

当发送短信的按钮 'id'=>'second' 被点击后，会通过js验证手机的合樱销法性，然后发送短信，并进行倒计时。具体js部分代码如下

//发送验证码时添加cookiefunction addCookie(name,value,expiresHours){var cookieString=name+"="+escape(value) //判断是否设置过期时间,0代表关闭浏览器时失效

if(expiresHours>0){var date=new Date()

date.setTime(date.getTime()+expiresHours*1000)

cookieString=cookieString+"expires=" + date.toUTCString()

}document.cookie=cookieString

}//修改cookie的值function editCookie(name,value,expiresHours){var cookieString=name+"="+escape(value) if(expiresHours>0){var date=new Date()

date.setTime(date.getTime()+expiresHours*1000)//单位是毫秒

cookieString=cookieString+"expires=" + date.toGMTString()

}document.cookie=cookieString

}//根据名字获取cookie的值function getCookieValue(name){var strCookie=document.cookie var arrCookie=strCookie.split("") for(var i=0i<arrCookie.lengthi++){var arr=arrCookie[i].split("=") if(arr[0]==name){return unescape(arr[1]) break

}

}

}

$(function(){

$("#second").click(function (){

sendCode($("#second"))

})

v = getCookieValue("secondsremained_login") ? getCookieValue("secondsremained_login") : 0//获取cookie值

if(v>0){

settime($("#second"))//开始倒计时

}

})//发送验证码function sendCode(obj){var site = '' var mobile = $("#loginform-mobile").val() //检查手机是否合法

var result = isPhoneNum() if(result){//检查手机号码是否存在

var exists_result = dbCheckMobileExists(site+'site/check-mobile-exists',{"mobile":mobile}) if(exists_result){

doPostBack(site+'sms/send-login-code',{"mobile":mobile})

addCookie("secondsremained_login",60,60)//添加cookie记录,有效时间60s

settime(obj)//开始倒计时

}

}

}//检查手机号码是否存在function dbCheckMobileExists(url,queryParam){

$.ajax({async : false,

cache : false,

type : 'POST',

url : url,// 请求的action路径

data:queryParam,

error : function() {// 请求失败处理函数

},

success:function(result){if(result=='Success'){return true

}else{

alert('该手机号码不存在！') return false

}

}

})

}//将手机利用ajax提交到后台的发短信接口function doPostBack(url,queryParam) {

$.ajax({async : false,

cache : false,

type : 'POST',

url : url,// 请求的action路径

data:queryParam,

error : function() {// 请求失败处理函数

},

success:function(result){if(result=='Success'){

alert('短信发送成功，验证码10分钟内有效,请注意查看手机短信。如果未收到短信，请在60秒后重试！')

}else{

alert('短信发送失败，请和网站客服联系！') return false

}

}

})

}//开始倒计时var countdownfunction settime(obj) {

countdown=getCookieValue("secondsremained_login") ? getCookieValue("secondsremained_login") : 0 if (countdown ==0) {

obj.removeAttr("disabled")

obj.val("获取验证码") return

} else {

obj.attr("disabled", true)

obj.val(countdown + "秒后重发")

countdown--

editCookie("secondsremained_login",countdown,countdown+1)

}

setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次}//校验手机号是否合法function isPhoneNum(){var phonenum = $("#loginform-mobile").val() var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/ if(!myreg.test(phonenum)){

alert('请输入有效的手机号码！')

$("#loginform-mobile").focus() return false

}else{return true

}

}

上述代码中有两个方法是通过Ajax交互的，一个为验证手机是否合法的方法dbCheckMobileExists()，另一个是通过ajax发送短信码的方法doPostBack(). 具体每个方法的代码大家上面看就可以了。 dbCheckMobileExists()会提交到CheckMobileExists方法检查手机是否存在:

public function actionCheckMobileExists()

{$mobile = Yii::$app->request->post('mobile')

if(User::findByMobile($mobile)){

echo 'Success'

}else{

echo 'Failed'

}

}

doPostBack()会提交到SendLoginCode方法发送登录验证码：

public function actionSendLoginCode()

{$mobile = Yii::$app->request->post('mobile') $code = $this->createCode() $content = "本次验证码为".$code."，您正在登录纽仁云客管理系统，打死也不告诉别人哦"

if($this->send($mobile,$content)===true){

//检查session是否打开

if(!Yii::$app->session->isActive){

Yii::$app->session->open()

}

//验证码和短信发送时间存储session

Yii::$app->session->set('login_sms_code',$code)

Yii::$app->session->set('login_sms_time',time())

echo 'Success'

}else{

echo 'Failed'

}

}

在上述发送代码的时候，当发送成功时，会保存两个session，login_sms_code和login_sms_time，分别记录了验证码内容和生成时间。

当发送成功后，用户会收到验证码，然后输入后进行提交，此时我们会进行验证码的校验，这里我们是采用yii2 rules来完成此项任务。

在 LoginForm 表的里面的 rules 里面添加下面校验规则，大家可以看到这里写了关于手机和验证码的诸多验证规则，其实最后一个验证规则即为 验证短信码是否正确，这里我们通过requiredValue验证用户输入的值是否等于 getSmsCode 的值即可。

['mobile', 'required','on' =>['default','login_sms_code']],

['mobile', 'integer','on' =>['login_sms_code']],

['mobile','match','pattern'=>'/^1[0-9]{10}$/','on' =>['default','login_sms_code'],'message'=>'{attribute}必须为1开头的11位纯数字'],

['mobile', 'string', 'min'=>11,'max' =>11,'on' =>['default','login_sms_code']],

['smsCode', 'required','on' =>['default','login_sms_code']],

['smsCode', 'integer','on' =>['default','login_sms_code']],

['smsCode', 'string', 'min'=>6,'max' =>6,'on' =>['default','login_sms_code']],

['smsCode', 'required','requiredValue'=>$this->getSmsCode(),'on' =>['default','login_sms_code'],'message'=>'手机验证码输入错误'],

上面的getSmsCode()代码如下，这里通过session获取了验证码和生成时间，如果在10分钟内，则返回验证码session的值。

public function getSmsCode()

{

//检查session是否打开

if(!Yii::$app->session->isActive){

Yii::$app->session->open()

}

//取得验证码和短信发送时间session$signup_sms_code = intval(Yii::$app->session->get('login_sms_code')) $signup_sms_time = Yii::$app->session->get('login_sms_time')

if(time()-$signup_sms_time <600){

return $signup_sms_code

}else{

return 888888

}

}

本文描述yii验证码的实现，仅仅是笔者应用的一个小例子，网上也有，总结一下，希望帮助到有需要的Yii爱好者。1、笔者用的是用户登录，所以在sitecontroller中加以下代码： public function actions()

{

return array(

// captcha action renders the CAPTCHA image displayed on the contact page

‘captcha’=>array(

‘class’=>’CCaptchaAction’,

‘backColor’=>0xFFFFFF, //背景颜色

‘minLength’=>4, //最短为4位

‘maxLength’=>4, //是长为4位

‘transparent’=>true, //显示为透明，当关闭该选项，才显示背景颜冲源色

),

)

}

2、在表单文件中加闭判盯如下代码(视图文件如login.php)： <?php if(CCaptcha::checkRequirements()): ?>

<div>

<?php echo $form->labelEx($model,’verifyCode’)?><br/>

<div>

<?php $this->widget(‘CCaptcha’)?>

<?php echo $form->textField($model,’verifyCode’)?>

</div>

<div>输入验证码

<br/></div>

<?php echo $form->error($model,’verifyCode’)?>

</div>

3、在Loginform模型(LoginForm.php)中 加入如下代码，主要是添加属性字段，否则会报错(不存在的属性 ) public $username

public $password

public $verifyCode

public $rememberMe

private $_identity 通过上面的 *** 作实际上我们已经可以看到验证码了，但是在 *** 作的时候我们会发现不输入验证码仍然可以，原因在于我们还没有指定验证是必须的，在LoginForm.php中加上array(‘verifyCode’,'required’)来指定必须，这时我们如果遗漏验证码，将会如下图所示：

本文描述yii验证轿和码的实现，仅仅是笔者应用的一个小例子，网上也有，总结一下，希望帮助到有需要的Yii爱好者。1、笔者用的是用户登录，所以在sitecontroller中加以下代码： public function actions()

{

return array(

// captcha action renders the CAPTCHA image displayed on the contact page

‘captcha’=>array(

‘class’=>’CCaptchaAction’,

‘backColor’=>0xFFFFFF, //背景颜色

‘minLength’=>4, //最短为4位

‘maxLength’=>4, //是长为4位

‘transparent’=>true, //显示为透明，当关闭该选项，才显示背景颜色

),

)

}

2、在表单文件中加如下代码(视图文件如login.php)： <?php if(CCaptcha::checkRequirements()): ?>

<div>

<?php echo $form->labelEx($model,’verifyCode’)?><br/>

<div>

<?php $this->widget(‘CCaptcha’)?>

<?php echo $form->textField($model,’verifyCode’)?>

</div>

<div>输入验证码

<br/></div>

<?php echo $form->error($model,’verifyCode’)?>

</div>

3、在Loginform模型(LoginForm.php)中 加入如下代码，主要是添加属性字段，否则会报错(不存在的属性 ) public $username

public $password

public $verifyCode

public $rememberMe

private $_identity 通过上面的 *** 作实际上我们已经可以看到验证码了，但是在 *** 作的时候我们会发现不输入验证码仍然可以，原因在于我们还没有指定验证是必须的，在LoginForm.php中加上array(‘verifyCode’,'required’)来指定必须，这时我们如果遗漏验证码，将会如下图所示：

---