我正在尝试进行服务器端和用户端的输入验证，但是，当我单击提交按钮时，它并没有将我带到感谢页面。
我的猜测是，当我使用下面的函数时，它会导致问题。
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
请告诉我问题出在哪里。
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/contact_form.css">
<script type='text/javascript'>
function validateForm() {
var err = 0;
var fields = document.getElementsByClassName("required");
for (i=0;i<fields.length;i++){
if (fields[i].value === ""){
err += 1;
fields[i].style.backgroundColor = "#ebdded";
}
else{
fields[i].style.backgroundColor = "";
}
}
if(err > 0){
alert("Please Fill the Required Fields");
}
return false;
}
</script>
</head>
<body>
<div class="container">
<div class="form-wrap">
<div class="contact-title">
<div id="circle-container">
<div id="circle-effect">
<div class="circle" id="fifthLayer"></div>
<div class="circle" id="fourthLayer"></div>
<div class="circle" id="thirdLayer"></div>
<div class="circle" id="secondLayer"></div>
<div class="circle" id="firstLayer">Contact Me!</div>
</div>
</div>
</div>
<form name = "_contact_form" class="contact-form" onsubmit="return validateForm()" action="contactform.php" method="POST">
<div class="div-input-form">
<label class="input-label">First Name*: </label>
<input id="fname" class="user-input required" type="text" name="firstName" placeholder="First Name">
</div>
<div class="div-input-form">
<label class="input-label">Last Name*: </label>
<input id = "lname" class="user-input required" type="text" name="lastName" placeholder="Last Name">
</div>
<div class="div-input-form">
<label class="input-label">Email*:</label>
<input id = "email" class="user-input required" type="text" name="email" placeholder="Enter email addess">
</div>
<div class="div-input-form">
<label class="input-label">Phone:</label>
<input class="user-input" type="text" name="phone" placeholder="Enter phone number">
</div>
<div class="div-input-form">
<label class="input-label">Gender:</label>
<input type="radio" class="radio-radio" name = "gender" value="Male"> Male </br>
<input type="radio" class="radio-radio" name = "gender" value="Female"> Female </br>
<input type="radio" class="radio-radio" name = "gender" value="Other"> Other </br> </br>
</div>
<div class="div-input-form">
<label class="input-label">Occupation:</label>
<select name = "dropdown" class="select-occ">
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
</select>
</div>
<div class="div-input-form">
<label class="input-label">Age:</label>
<input type="radio" class="radio-radio" name = "age" value="18orBelow"> 15 or Below </br>
<input type="radio" class="radio-radio" name = "age" value="19to21"> 16 to 20 </br>
<input type="radio" class="radio-radio" name = "age" value="21orAbove"> 21 or above </br> </br>
</div>
<div class="div-input-form">
</br>
<label class="input-label">How Did You Hear About Us:</label>
<input type="checkbox" class="checkbox" name="hearaboutus"> Internet Search<br>
<input type="checkbox" class="checkbox" name="hearaboutus"> Friends or Family<br>
<input type="checkbox" class="checkbox" name="hearaboutus"> Other<br> </br>
</div>
<div class="div-input-form">
<label class="input-label">Message*:</label>
<textarea id="input_message" class="user-input required" name="message" placeholder="Your Comment..."></textarea>
</div>
<div class="div-submit-button" >
<button id ='submit' name = 'submit-button' class="submit-button">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>
联系人表格.php
<?php
session_start();
if(isset($_POST['submit-button'])){
if(empty($_POST["firstName"])) {
$fnameErr = "First Name is required";
}else {
$firstName = strval(test_input($_POST['firstName']));
}
if (empty($_POST["lastName"])) {
$lnameErr = "Last Name is required";
}else {
$lastName = strval(test_input($_POST['lastName']));
}
if (empty($_POST["email"])) {
$emailErr = "Last Name is required";
}else {
$emailFrom = strval(test_input($_POST['email']));
if (!filter_var($emailFrom, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["message"])) {
$mesErr = "Last Name is required";
}else {
$message = strval(test_input($_POST['message']));
}
$phone = strval(test_input($_POST['phone']));
$occupation = strval(test_input($_POST['dropdown']));
$age = strval(test_input($_POST['age']));
$hearaboutus = strval(test_input($_POST['hearaboutus']));
$_SESSION['firstname'] = $firstName;
$_SESSION['lastName'] = $lastName;
$_SESSION['emailFrom'] = $emailFrom;
$_SESSION['phone'] = $firstNaphoneme;
$_SESSION['message'] = $message;
$_SESSION['occupation'] = $occupation;
$_SESSION['age'] = $age;
$_SESSION['hearaboutus'] = $hearaboutus;
$mailTo = "gansaikhanshur@gmail.com";
$subjectLine = "E-Mail From: ".$emailFrom."; www.gansaikhanshur.com";
$emailBody = "You have received an email from ".$firstName."nn".$message."nnn";
mail($mailTo, $subjectLine, $emailBody);
header("Location: thankupage.php");
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
感谢.php
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Thank You Page!</title>
<link rel="stylesheet" type="text/css" href="css/support.css">
</head>
<body>
<div class="center">
<p>Thank You <?php
include 'contactform.php';
echo $_SESSION['firstname'];
session_destroy();
?></p>
<a href="index.php">Go Back</a>
</div>
</body>
</html>
css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
background: #DCD8D7;
height: 100%;
font-family: Helvetica, sans-serif;
}
p {
font-family: Helvetica;
font-size: 14px;
line-height: 1.7;
color: #616060;
margin: 0px;
}
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 10px;
background: transparent;
position: relative;
}
.form-wrap {
width: 770px;
background: #fff;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.contact-title {
width: 100%;
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 64px 15px 64px 15px;
}
.contact-title::before {
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(54,84,99,0.7);
}
.contact-form {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 43px 88px 57px 190px;
}
.div-input-form {
width: 100%;
position: relative;
border-bottom: 1px solid #b2b2b2;
margin-bottom: 26px;
}
.input-label {
font-family: Helvetica;
font-size: 15px;
color: #808080;
line-height: 1.2;
text-align: right;
position: absolute;
top: 14px;
left: -105px;
width: 80px;
}
.user-input {
font-family: Helvetica;
font-size: 15px;
color: #525050;
line-height: 1.4;
display: block;
width: 100%;
background: transparent;
padding: 0 5px;
}
input.user-input {
height: 45px;
}
textarea.user-input {
min-height: 115px;
padding-top: 14px;
padding-bottom: 13px;
}
.div-submit-button {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 8px;
}
.submit-button {
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 160px;
width: 100%;
height: 50px;
background-color: #3b88bb;
border-radius: 25px;
font-family: Helvetica;
font-size: 16px;
color: white;
line-height: 1.2;
}
.radio-radio
{
-webkit-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #f1f1f1;
color: rgb(92, 91, 91);
top: 10px;
height: 25px;
width: 25px;
border: 0;
border-radius: 40px;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.radio-radio:checked::before
{
position: absolute;
font: 13px/1 'Open Sans', sans-serif;
left: 8px;
top: 5px;
content: ' 2143';
transform: rotate(40deg);
}
.checkbox
{
border-radius: 5px;
display: inline-block;
margin-right: 7px;
height: 10px;
width: 10px;
}
.select-occ {
display: block;
font-size: 14px;
font-family: sans-serif;
font-weight: 700;
color: rgb(53, 51, 51);
line-height: 1.5;
padding: 7px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
border-radius: 10px;
-moz-appearance: none;
-webkit-appearance: none;
background-color: #fff;
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
#circle-container {
display: flex;
align-items: center;
justify-content: center;
width: 35vw;
height: 35vh;
position:relative;
}
.circle {
width: 30vh;
height: 30vh;
position: absolute;
border-radius: 50%;
}
#firstLayer {
font-size: 23px;
font-family: "Oswald", sans-serif;
letter-spacing: 1.5px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
transition: 1s;
}
#secondLayer {
background-color: #CCCCFF ;
transition: 1s;
opacity: 0.5;
}
#thirdLayer {
background-color: black;
transition: 1s;
opacity: 0.5;
}
#fourthLayer {
background-color: cornflowerblue;
transition: 1s;
opacity: 0.5;
}
#fifthLayer {
background-color: #FFFF99;
transition: 1s;
opacity: 0.5;
}
#circle-effect {
position:relative;
width: 30vh;
height: 30vh;
border-radius: 50%;
overflow: hidden;
}
#circle-effect:hover #secondLayer {
transform: translate(0px, 75px);
}
#circle-effect:hover #thirdLayer {
transform: translate(0px, -75px);
}
#circle-effect:hover #fourthLayer {
transform: translate(75px, 0px);
}
#circle-effect:hover #fifthLayer {
transform: translate(-75px, 0px);
}
尝试在您的contactform.php 中进行以下更改
Wrong --> $_SESSION['phone'] = $firstNaphoneme;
Right --> $_SESSION['phone'] = $phone;
还在代码的开头添加ob_start((
<?php
ob_start();
/*
Your code
*/
?>
你好，阿，
请像这样编写您的javascript验证
if(err > 0){
alert("Please Fill the Required Fields");
return false;
}然后尝试它在所有验证和重定向中都能很好地工作。
谢谢大家晚上好
header("location:thankupage.php"(；
谢谢Soumyanjan