验证码客户端验证

验证码客户端验证

众所周知，验证码是写入 _SESSION 的，而 _SESSION 是存在服务端的，所以想在客户端用 js 来验证这个验证码是有些难度的，废话就不多说了。现在开始陈述我遇到的问题，和最后解决的方法。我是在做登录模块的时候遇到的这些问题的。

 

一 探索的过程

刚刚开始的时候，我是用 form表单来进行数据提交的，然后给 form表单一个 onsubmit 事件：<form name="form1" method="post" onsubmit="return check_form();"></form> 。然后用自定义函数 check_form() 去验证表单的值，不符合条件的就返回 false 阻止表单提交。

然后验证到验证码的时候就出问题了，验证码的值是用 _SESSION 存在服务器的，js获取不到，也就无法去对比验证的。然后，我就想到了下面的这些解决方法：

① js 异步调用php，php去把输入的值和存入 _SESSION 的值进行对照，再返回 true 或 false 给js，然后 js 返回给表单，进而根据结果的对错决定要不要阻止表单提交。理想很美好，现实却很骨感。因为 异步调用返回的值，它是一个局部变量，外面用不到。我是用 jQuery 的 $.post(); 去进行这个异步调用的。大致代码如下：

function check_form() {

 xxxx

 xxxx

 xxxx

    $.post("call/ajax.php",{imgck:_imgcktxt,aj_tp:1},function(res){

        if (res=='false') {

            $("#notice").html('验证码不正确');

            return false; // ##-- 注意的，问题就出在这里，这里的值返回不出去。也就是说，这里的 return 不是 check_form() 的返回值。

        }

    });

 xxxx

 xxxx

 xxxx

}

然后，我就有一种咫尺天涯的感觉了。

② 好了，我们来看第二种方法。既然，值，返回不出来，那我就用dom把值写入html里面，这就是现在的思路。代码如下：

function check_form() {

 xxxx

 xxxx

 xxxx

    $.post("call/ajax.php",{imgck:_imgcktxt,aj_tp:1},function(res){

        if (res=='false') {

            $("#notice").html('验证码不正确');

            $("#codehidden").attr('value','false'); // #codehidden是一个隐藏域 <input type="hidden" id="codehidden" />

        }

    });

    var codestate = $("#codehidden").attr('value');

    if (codestate=="false") {

        return false;

    }

 xxxx

 xxxx

 xxxx

}

这样好像行了，可是，事实往往不尽人意。这种做法总是慢一拍的，var codestate = $("#codehidden").attr('value'); 得到的值是上一次的。SO还是不行。

到目前为止，可以把外面的值传递给 $.post, 可是 $.post 里面的值却怎么也传不出来, 就算我把它写入页面中再调出来, 却也还是慢了一拍。设置了全局变量，就是在外面定义变量，然后，load()里面的值好像是可以传出来的，是不是我们就可以用load()来代替$.post()呢，。？

③ 好吧，看三个方法。在 js 异步调用 php 的时候，在 php 处理程序那里，除了把值返回给 js，同时还把值写入 cookie，然后在 js 那里调用 cookie 判断是否阻止表单提交。这个方法我没试过。估计不好用，太麻烦了。

④ 再看们第四个方法，上面三个方法都是没用的。这回不是只用一个 js 函数作用在 form表单了。而是给没个表单元素都设置一个失去焦点事件 onBlur 的 js 函数，然后去控制提交按钮的可用与否。如下：

//--------------------------按钮状态设置

function change_submit(zt) {

    if (zt == false) {

       document.forms[0].elements['submit'].disabled = 'disabled';

    }else {

       document.forms[0].elements['submit'].disabled = '';

    }

}

可是这种方法太繁杂了，每个表单元素都要有一个函数，而且每个函数里面还要关联别的表单元素，所以，不用。

二 最后，我还是乖乖的，不用 form 表单提交了，直接，只用 js 提交了。

三 这次，登录模块的制作，温习了的一些知识如下：

① 异步调用返回的值是局部变量，外面用不了的。

② onSubmit 事件，既是表单提交事件，常用来阻止表单提交，onSubmit="return false"

③ js 是解释执行的，执行到错的地方就停了不执行了。

④ 中断 js 的执行，用 return;