验证码没有生成验证码,我有js,并且用php和CSS和html代码编写的代码只是无法弄清楚为什么没有生成验证码。任何帮助将不胜感激,谢谢!
验证码没有生成验证码,我有js,并且用php和CSS和html代码编写的代码只是无法弄清楚为什么没有生成验证码。任何帮助将不胜感激,谢谢!
function captchaCode() {
var Numb1, Numb2, Numb3, Numb4, Code;
Numb1 = (Math.ceil(Math.random() * 10) - 1).toString();
Numb2 = (Math.ceil(Math.random() * 10) - 1).toString();
Numb3 = (Math.ceil(Math.random() * 10) - 1).toString();
Numb4 = (Math.ceil(Math.random() * 10) - 1).toString();
Code = Numb1 + Numb2 + Numb3 + Numb4;
$("#captcha span").remove();
$("#captcha input").remove();
$("#captcha").append("<span id='code'>" + Code + "</span><input type='button' onclick='captchaCode();'>");
}
$(function() {
captchaCode();
$('#contactForm').submit(function() {
var captchaVal = $("#code").text();
var captchaCode = $(".captcha").val();
if (captchaVal == captchaCode) {
$(".captcha").css({
"color": "#609D29"
});
} else {
$(".captcha").css({
"color": "#CE3B46"
});
}
var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,10})+$/;
var emailText = $(".email").val();
if (emailFilter.test(emailText)) {
$(".email").css({
"color": "#609D29"
});
} else {
$(".email").css({
"color": "#CE3B46"
});
}
var nameFilter = /^([a-zA-Z \t]{3,15})+$/;
var nameText = $(".name").val();
if (nameFilter.test(nameText)) {
$(".name").css({
"color": "#609D29"
});
} else {
$(".name").css({
"color": "#CE3B46"
});
}
var messageText = $(".message").val().length;
if (messageText > 50) {
$(".message").css({
"color": "#609D29"
});
} else {
$(".message").css({
"color": "#CE3B46"
});
}
if ((captchaVal !== captchaCode) || (!emailFilter.test(emailText)) || (!nameFilter.test(nameText)) || (messageText < 50)) {
return false;
}
if ((captchaVal == captchaCode) && (emailFilter.test(emailText)) && (nameFilter.test(nameText)) && (messageText > 50)) {
$("#contactForm").css("display", "none");
$("#forma").append("<h2>Message sent!</h2>");
return false;
}
});
});
* {
margin: 100;
padding: 0
}
bodya {
display: flex;
justify-content: center;
text-align: center;
width: 60%;
border-top: 1px solid white;
border-bottom: 1px solid white;
padding: 10px;
margin: auto;
position: relative;
color: white;
color: #B1B1B1;
margin: 15px auto 0;
margin-top: 50px;
margin-left: auto;
width: 410px;
}
#contacta {
overflow: auto;
}
#contacta #forma {
width: 410px;
float: left;
}
#contacta #forma h2a {
font: 48px 'Montserrat', Raleway, serif;
}
#contacta #forma span {
display: flex;
float: left;
width: 100px;
padding-top: 5px;
font: 18px/20px'Montserrat', Raleway, serif;
}
#contacta #forma input {
float: left;
width: 255px;
border: 0px;
color: #F1F1F1;
padding: 10px 10px 10px 30px;
font: 18px/20px 'Montserrat', Raleway, sans-serif;
margin-bottom: 10px;
}
#contacta #forma textarea {
float: left;
border: 0px;
width: 255px;
height: 140px;
padding: 10px 10px 10px 30px;
font: 18px/20px'Montserrat', Raleway, sans-serif;
color: #F1F1F1;
resize: none;
}
#contacta #forma input.name {
background: #B1B1B1 url(http://img7.uploadhouse.com/fileuploads/17737/177370145f09fe433945815665aa214f80dbc6af.png) no-repeat 10px 8px;
}
#contacta #forma input.email {
background: #B1B1B1 url(http://img6.uploadhouse.com/fileuploads/17737/177370138cc63992182149e9befabff3eafa6d23.png) no-repeat 10px 9px;
}
#contacta #forma input.captcha {
background: #B1B1B1 url(http://img3.uploadhouse.com/fileuploads/17737/17737011310213e71805ecf2292144cbbecf42ad.png) no-repeat 10px 9px;
}
#contacta #forma textarea.message {
background: #B1B1B1 url(http://img3.uploadhouse.com/fileuploads/17737/1773701229ed8c2f465a8274623ca8976adaf196.png) no-repeat 10px 8px;
}
#contacta #forma input.submit {
cursor: pointer;
width: 150px;
height: 30px;
float: center;
padding: 0px 0px 5px 0px;
margin: 50px 160px 10px 100px;
background: #B1B1B1;
color: #F1F1F1;
font: 18px/20px'Montserrat', Raleway, serif;
}
#contacta #captcha span {
width: 44px;
}
#contacta #captcha input {
background: url(http://img3.uploadhouse.com/fileuploads/17737/17737011310213e71805ecf2292144cbbecf42ad.png) no-repeat scroll 0 0 transparent;
margin: 5px 0 0;
padding: 0;
border: medium none;
cursor: pointer;
width: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="contacta">
<div class="contenta">
<div id="forma">
<form action="php/send_form_email.php" id="contactForm" method="post" />
<span>Name</span>
<input type="text" name="name" class="name" placeholder="Enter your name" tabindex="1" />
<span class="error"><?= $name_error ?></f></for>Email</span>
<input type="text" name="email" class="email" placeholder="Enter your email" tabindex="2" />
<span onload="captcha();" id="captcha"></span>
<input type="text" name="captcha" class="captcha" maxlength="4" size="4" placeholder="Enter captcha code" tabindex="3" />
<span class="error"><?= $captcha_error ?>Message</span>
<textarea class="message" name="message" placeholder="Enter your message" tabindex="4"></textarea>
<input type="submit" name="submit" value="Send e-mail" class="submit" tabindex="5" />
</form>
</div>
</div>
</section>