ColdFusion jQuery 验证插件 + 验证码

Question

我有正常运行的jQuery验证代码，但我正在尝试添加验证码。我认为验证设置正确，但验证码检查.cfm页面设置错误。

网页：

<script>
$(document).ready(function() {
  $("#captchaDiv").load("captcha-show.cfm");    
  $("#reloadLink").click(function(e) {
    $("#captchaDiv").load("captcha-show.cfm");            
    e.preventDefault();
  });
})
</script>
<!--end refresh captcha-->
<script type="text/javascript">
$.validator.setDefaults({
  submitHandler: function() {
    // alert("submitted!"); 
    $("#signupForm").submit();
  }
});
$().ready(function() {
  $("#signupForm").validate({
    rules: {
      cap: {
        required: true,
        remote: "captchacheck.cfm"
    },
    messages: {
      cap: "captcha does not match"
    }
  }});
});
</script>
<!--the form-->
<form ....>
<div class="name-field">
<!--- Use the randomly generated text string for the CAPTCHA image. --->
  <div id="captchaDiv"></div>
</div>
<div class="name-field">please type what you see:</div>
<div class="name-field">
  <input id="cap" type="text" name="cap" placeholder="enter captcha"/>
</div>  
<div class="ppnw">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Can't read? <a href="" id="reloadLink">Reload</a>
</div>
<div class="formbut1">
    <input class="button" type="submit" name="submit" id="subsales" value="Submit" />
</div>
</fieldset>
</form>

这是远程页面（验证码检查.cfm）：

<cfsetting enablecfoutputonly="true">
<cfif cap eq session.captcha>
 <cfset answer = TRUE>
 <cfoutput> #answer#</cfoutput>   
<cfelse>
 <cfset answer = FALSE>
 <cfoutput> #answer#</cfoutput> 
</cfif>

以下是生成验证码图像的页面：

<cffunction name="makeRandomString" returnType="string" output="false">
<cfset var chars = "23456789ABCDEFGHJKMNPQRS">
<cfset var length = 5> <!---randRange(4,7)--->
<cfset var result = "">
<cfset var i = "">
<cfset var char = "">
<cfscript>
for(i=1; i <= length; i++) {
    char = mid(chars, randRange(1, len(chars)),1);
    result&=char;
}
</cfscript>
<cfreturn result>
</cffunction>
<cfset session.captcha = makeRandomString()>
<cfimage action="captcha" text="#session.captcha#" width="300" height="40">

Answer 1

这是工作解决方案：简单的Javascript工作示例，没有jquery

验证码秀.cfm

<cffunction name="makeRandomString" returnType="string" output="false">
  <cfset var chars = "23456789ABCDEFGHJKMNPQRS">
  <cfset var length = randRange(2,7)>
  <cfset var result = "">
  <cfset var i = "">
  <cfset var char = "">
  <cfscript>
    for(i=1; i <= length; i++) {
        char = mid(chars, randRange(1, len(chars)),1);
        result&=char;
    }
    </cfscript>
  <cfreturn result>
</cffunction>
<cfset Session.captchaText = makeRandomString()/>
<cfset captchaimagepath = getdirectoryfrompath(getcurrenttemplatepath()) & 'newcaptcha' & gettickcount() & '.png'>
<cfimage action="captcha" width="192" height="60" text="#session.captchaText#" destination="#captchaimagepath#" difficulty="medium">
<cfcontent reset="yes" type="image/png" file="#captchaimagepath#" deletefile="yes">

要调用验证码的主文件：

<div align="left">
      <cfoutput><a onClick="verifyCode()"><img src=Captcha-Show.cfm?r=#gettickcount()# id=sessioncaptcha alt=captcha width=192 height=60></a></cfoutput>
      </div><br>Click on the Image to reload a New Code!
function verifyCode() 
{
    document.getElementById('sessioncaptcha').src = 'captcha.cfm?r='+new Date().getTime();  
}