ColdFusion jQuery验证插件+ captcha

Question

我有运行jQuery验证代码，但我试图添加验证码。我认为验证设置正确，但captchacheck.cfm页面设置错误。

HTML页面：

<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> 

这里是远程页面（captchacheck.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

验证码，Show.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(); 
}