Javascript表单验证器与数学CAPTCHA冲突 [英] Javascript form validator conflict with math CAPTCHA
本文介绍了Javascript表单验证器与数学CAPTCHA冲突的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是数学验证码的基本电子邮件表单。验证码正在工作，但表单验证程序没有。当我说表单验证器时，我指的是所需的名称和电子邮件字段。如果我删除验证码，则表单验证器可以正常工作。
<！DOCTYPE html PUBLIC我认为表单验证程序的js代码和Captcha的js代码是相互冲突的。 - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< title> EiP - 与我们联系< / title>
< script type =text / javascript>
//表单验证器用于所需的名称和电子邮件字段
函数MM_validateForm（）{//v4.0
if（document.getElementById）{
var i，p，q ，纳米，测试，NUM，最小值，最大值，误差= ''，ARGS = MM_validateForm.arguments; （i = 0; i<（args.length-2）; i + = 3）{test = args [i + 2]; VAL =的document.getElementById（参数[I]）;
if（val）{nm = val.name; if（（val = val.value）！=）{
if（test.indexOf（'isEmail'）！= - 1）{p = val.indexOf（'@'）;
if（p <1 || p ==（val.length-1））errors + =' - '+ nm +'必须包含一个电子邮件地址。
} else if（test！='R'）{num = parseFloat（val）;
if（isNaN（val））errors + =' - '+ nm +'必须包含一个数字。
if（test.indexOf（'inRange'）！= -1）{p = test.indexOf（'：'）;
min = test.substring（8，p）;最大= test.substring（P + 1）;
if（num
'; }
} if（errors）alert（'发生以下错误：\ n'+ errors）;
document.MM_returnValue =（errors ==''）;
}}
< / script>
< / head>
< body>
< p>您是否有关于EiP的问题或评论？我们希望听到您的意见，因为您的反馈对我们的成功至关重要。< / p>
< p class =required> *必填信息< / p>
< p class =allforms>全名< span> *< / span>< / p>
< input name =nametype =textid =name/>
< p class =allformsRt>电子邮件地址< span> *< / span>< / p>
< input type =textname =emailid =email/>
< p class =allforms>公司< / p>
< input name =companytype =textid =company/>
< p class =allformsRt>电话号码< / p>
< input type =textname =phoneid =phone/>
< p class =allforms>我们如何提供帮助？< / p>
< label for =codestyle =float：left; clear：both>写下面的代码> < input type =hiddenid =txtCaptcha/>< / label><！ - 这是脚本将放置验证代码副本的位置：这是一个隐藏字段 - >
< input type =textname =txtInputid =txtInputsize =30style =float：left; clear：both/>
< input name =Submittype =submitvalue =Contact Usstyle =float：left; clear：both/>
< / form>
< script type =text / javascript>
//产生验证码函数
var a = Math.ceil（Math.random（）* 9）+'';
var b = Math.ceil（Math.random（）* 9）+'';
var c = Math.ceil（Math.random（）* 9）+'';
var d = Math.ceil（Math.random（）* 9）+'';
var e = Math.ceil（Math.random（）* 9）+'';
var code = a + b + c + d + e;
document.getElementById（txtCaptcha）。value = code;
document.getElementById（txtCaptchaDiv）。innerHTML = code;
< / script>
< script type =text / javascript>
函数checkform（theform）{
var why =;
if（theform.txtInput.value ==）{
why + = - 安全代码不应为空。
if（theform.txtInput.value！=）{
if（ValidCaptcha（theform.txtInput.value）== false）{
why + = - 安全码不匹配。\ n;
if（why！=）{
alert（why）;
返回false;
//验证输入的输入aganist生成的安全代码函数
函数ValidCaptcha（）{
var str1 = removeSpaces（document。的getElementById（ 'txtCaptcha'）的值）。
var str2 = removeSpaces（document.getElementById（'txtInput'）。value）;
if（str1 == str2）{
return true;
} else {
return false;
//删除输入和生成的代码中的空格
function removeSpaces（string）{
return string.split（'' ）。加入（''）;
}
< / script>
< / body>
< / html>
解决方案
您的 onsubmit 部分不能这样做。如果安全代码正确，则返回 undefined ，这不是错误的，因此表单会在 MM_validateForm 函数之前提交获取调用，检查必填字段。
从标记中移除 onsubmit = ... 部分，并添加以下代码到您的网站
< script type =text \javascript>
window.onload = function（）{
var form = document.getElementsByTagName（form）[0]; //获取表单
form.onsubmit = function（）{
if（checkform（this）！= false）{
MM_validateForm（'name'，''，'R'，'电子邮件'，''，'RisEmail'）;
返回document.MM_returnValue;
} else {
return false;
}
};
}
< / script>
Here is a basic email form with math Captcha. Captcha is working, but the form validator is not. When I say form validator, I am referring to the required "Name" and "Email" fields. If I remove the Captcha code, the form validator works fine. I think the js code for form validator and js code for Captcha are conflicting with each other somehow.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EiP - Contact Us</title>
<script type="text/javascript">
// Form validator for the required Name and Email fields
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
} }
</script>
</head>
<body>
<p>Do you have a question or comment about EiP? We want to hear from you as your feedback is critical to our success.</p>
<p class="required">*Required info</p>
<form action="contactus.html" method="post" name="contactform" id="contactform" onsubmit="return checkform(this);MM_validateForm('name','','R','email','','RisEmail');return document.MM_returnValue">
<p class="allforms">Full Name<span>*</span></p>
<input name="name" type="text" id="name"/>
<p class="allformsRt">Email Address<span>*</span></p>
<input type="text" name="email" id="email" />
<p class="allforms">Company</p>
<input name="company" type="text" id="company" />
<p class="allformsRt">Phone Number</p>
<input type="text" name="phone" id="phone" />
<p class="allforms">How can we help?</p>
<textarea name="application" cols="35" rows="5" title="title" label="label" style="float:left">Type your questions, comments, feedback</textarea>
<label for="code" style="float:left; clear:both">Write code below > <span id="txtCaptchaDiv" style="color:#F00"></span><!-- this is where the script will place the generated code -->
<input type="hidden" id="txtCaptcha" /></label><!-- this is where the script will place a copy of the code for validation: this is a hidden field -->
<input type="text" name="txtInput" id="txtInput" size="30" style="float:left; clear:both" />
<input name="Submit" type="submit" value="Contact Us" style="float:left; clear:both" />
</form>
<script type="text/javascript">
//Generates the captcha function
var a = Math.ceil(Math.random() * 9)+ '';
var b = Math.ceil(Math.random() * 9)+ '';
var c = Math.ceil(Math.random() * 9)+ '';
var d = Math.ceil(Math.random() * 9)+ '';
var e = Math.ceil(Math.random() * 9)+ '';
var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
</script>
<script type="text/javascript">
function checkform(theform){
var why = "";
if(theform.txtInput.value == ""){
why += "- Security code should not be empty.\n";
}
if(theform.txtInput.value != ""){
if(ValidCaptcha(theform.txtInput.value) == false){
why += "- Security code did not match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}
// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
</script>
</body>
</html>
解决方案
Your onsubmit part can't be done this way. If the security code is correct you are returning undefined which is not false and therefor the form gets submitted before the MM_validateForm function gets called which checks the required fields.
Remove the onsubmit=... part from your markup and add the following code to your site
<script type="text\javascript">
window.onload = function() {
var form = document.getElementsByTagName("form")[0]; // get the form
form.onsubmit = function() {
if (checkform(this) != false) {
MM_validateForm('name', '', 'R', 'email', '', 'RisEmail');
return document.MM_returnValue;
} else {
return false;
}
};
}
</script>
这篇关于Javascript表单验证器与数学CAPTCHA冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
