使用Javascript和PHP进行表单验证

时间：2018-09-02 18:07:08

标签： javascript php html validation onclick

这是我的代码，我在验证时遇到困难。请告诉我我在做什么错。我列出了我的作业所需的所有内容，但是我不明白自己在搞什么。当我完成注册并转到下一步时，这里就是我遇到的问题。在“兴趣”页面上进行选择后，我应该能够点击“注册”并收到通知，感谢我的注册，但是没有任何反应……没有下一页或错误提示。我不知道要提供什么信息，所以我已经给出了所有HTML，javascript和php文件。感谢您在我还是Java初学者时可以提供的任何帮助和指导。

Registration.html和Registration.js：

<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Invitation Page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script type="text/javascript">

function formValidation() {
// Make quick references to our fields.
var username = document.getElementById('userName');
var password = document.getElementById('password');
var passwordv = document.getElementById('passwordVerify');
var firstname = document.getElementById('firstName');
var lastname = document.getElementById('lastName');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var signup = document.getElementById('signUpNewsletter');

// To check empty form fields.
if (username.value.length == 0) {
document.getElementById('head').innerText = "* All fields are required 
*"; // This segment displays the validation rule for all fields
username.focus(); 
return false;
}
// Check each input in the order that it appears in the form.
if (textAlphanumeric(username, "* For your username please use alphabets 
and numbers only *")) {

if (lengthDefine(password, 8, 16 )) {
if (matchPass(password,passwordv,"* Passwords do not match! *" )) {
if (inputAlphabet(firstname, "* For your name please use alphabets only 
*")) {
if (inputAlphabet2(lastname, "* For your name please use alphabets only 
*")) {
if (emailValidation(email, "* Please enter a valid email address *")) {
if (textAlphanumeric(phone, "* Enter phone number in format (xxx)xxx-xxxx 
*")) {
}
}
}
}
}
}

return false;
}
// Function that checks whether input text is numeric or not.
function textNumeric(inputtext, alertMsg) {
var numericExpression = /^[0-9]+$/;
if (inputtext.value.match(numericExpression)) {
return true;
} else {
document.getElementById('p6').innerText = alertMsg; // This segment 
displays the validation rule for zip.
inputtext.focus();
return false;
}
}
// Function that checks whether input text is an alphabetic character or 
not.
function inputAlphabet(inputtext, alertMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
document.getElementById('p3').innerText = alertMsg; // This segment 
displays the validation rule for name.
//alert(alertMsg);
inputtext.focus();
return false;
}
}
// Function that checks whether input text is an alphabetic character or 
not.
function inputAlphabet2(inputtext, alertMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
document.getElementById('p4').innerText = alertMsg; // This segment 
displays the validation rule for name.
//alert(alertMsg);
inputtext.focus();
return false;
}
}
// Function that checks whether input text includes alphabetic and 
numeric characters.
function textAlphanumeric(inputtext, alertMsg) {
var alphaExp = /^[0-9a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
document.getElementById('p5').innerText = alertMsg; // This segment 
displays the validation rule for address.
inputtext.focus();
return false;
}
}
// Function that checks whether the input characters are restricted 
according to defined by user.
function lengthDefine(inputtext, min, max) {
var uInput = inputtext.value;
if (uInput.length >= min && uInput.length <= max) {
return true;
} else {
document.getElementById('p1').innerText = "* Please enter between " + min 
+ " and " + max + " characters *"; // This segment displays the 
validation rule for username
inputtext.focus();
return false;
}
}
// Function that checks whether the 2 passwords are correct.
function matchPass(pass1,pass2, alertMsg) {

if (pass1.value === pass2.value) {
return true;
} else {
document.getElementById('p2').innerText = alertMsg; // This segment 
displays the validation rule for username
pass2.focus();
return false;
}
}

// Function that checks whether an user entered valid email address or 
not and displays alert message on wrong email address format.
function emailValidation(inputtext, alertMsg) {
var emailExp = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (inputtext.value.match(emailExp)) {
return true;
} else {
document.getElementById('p5').innerText = alertMsg; // This segment 
displays the validation rule for email.
inputtext.focus();
return false;
}
}
// Function that checks whether an user entered valid phone number or not 
and displays alert message on wrong phone address format.
function phoneValidation(inputtext, alertMsg) {
var phoneExp = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1} 
[0-9]{4}$/;
if (inputtext.value.match(phoneExp)) {
document.getElementById("regform").submit();
return true;

} else {
document.getElementById('p6').innerText = alertMsg; // This segment 
displays the validation rule for email.
inputtext.focus();
return false;
}
}
}
</script>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span 
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li><a href="index.html">Home</a>
</li>
<li><a href="invitation.html">Invitation</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
<li><a href="registration.html" class="active">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="pageForm">
<form action="interests.html" id="regform" name="regform"  >

<p id="head"></p>
<label for="userName">Username:</label>
<input type="text" name="userName" id="userName" placeholder="Enter your 
Username" />

<p id="p1"></p>
<label for="Password">Password:
</label>
<input type="password" name="password" id="password" placeholder="Enter 
your Password" />

<p id="p2"></p>
<label for="passwordVerify">Verify your Password:
</label>
<input type="password" name="passwordVerify" id="passwordVerify" 
placeholder="Enter in your Password again" />

<p id="p3"></p>
<label for="firstName">First Name:
</label>
<input type="text" name="firstName" id="firstName" placeholder="Enter 
your First Name" />

<p id="p4"></p>
<label for="lastName">Last Name:
</label>
<input type="text" name="lastName" id="lastName" placeholder="Enter your 
Last Name" />

<p id="p5"></p>
<label for="email">Email:
</label>
<input type="text" name="email" id="email" placeholder="Enter your Email 
Address" />

<p id="p6"></p>
<label for="phoneNumber">Phone Number
</label>
<input type="text" name="phone" id="phone" placeholder="Enter your Phone 
Number" />

<p id="p7"></p>
<label for="signUpNewsletter">Sign up for newsletter:
</label>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter" 
value="Yes" checked> Yes 
<input type="radio" name="signUpNewsletter" id="signUpNewsletter" 
value="No"> No
<input type="submit"  value="Next step">
</form>
</section>

<!--<footer>This events site is for IT-FP3215 tasks.
</footer>-->
</body>

</html>

Interest.html：

<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Interests Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script type="text/javascript" src="js/interest.js"></script>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span 
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li><a href="index.html">Home</a>
</li>
<li><a href="invitation.html">Invitation</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
<li><a href="registration.html" class="active">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="pageForm">
<form action="confirm.html" id="addform">
<input type="hidden" name="userName" id="userName" />
<input type="hidden" name="password" id="password" />
<input type="hidden" name="passwordVerify" id="passwordVerify" />
<input type="hidden" name="firstName" id="firstName" />
<input type="hidden" name="lastName" id="lastName" />
<input type="hidden" name="email" id="email" />
<input type="hidden" name="phone" id="phone" />
<input type="hidden" name="signUpNewsletter" id="signup" />
<label for="checkbox">Interests:
</label><br/>

<input type="checkbox" class="check1" id="check1" name="interests" 
value="Swimming"> Swimming<br>
<input type="checkbox" name="interests" id="check2" class="check2"  
value="Travelling"> Travelling <br>
<input type="checkbox" name="interests" id="check3" class="check3" 
value="Reading"> Reading <br>

<label for="signUpNewsletter">Sign up for newsletter:
</label><br/>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter" 
value="Yes" checked> Yes <br>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter" 
value="No"> No<br>

<label for="comments">Comments:
</label><br/>
<textarea name="comments" id="comments" placeholder="Your Comments" 
rows="10" cols="60"> </textarea><br>

<label for="referred">Referred by:
</label><br>
<input type="text" name="referred" id="referred" placeholder="Enter who 
referred you" /><br>

<input type="button" value="Register" onclick="storeCookie()">
</form>
</section>

<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>

</html>

Confirm.html：

<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Interests Page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script type="text/javascript" src="js/confirm.js"></script>

<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span 
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li><a href="index.html">Home</a>
</li>
<li><a href="invitation.html">Invitation</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
<li><a href="registration.html" class="active">Registration</a>
</li>
</ul>

</nav>
</header>
<section id="pageFormContent">

Username: <p id="username">Placeholder</p>
Password: <p id="password">Placeholder</p>
First Name: <p id="firstName">Placeholder</p>
Last Name: <p id="lastName">Placeholder</p>
email: <p id="email">Placeholder</p>
Phone: <p id="phone">Placeholder</p>
Sign up News Letter: <p id="signup">Placeholder</p>
interest 1: <p id="username"></p>
Interest 2: <p id="username"></p>
Interest 3: <p id="username"></p>
Comments: <p id="phone">Placeholder</p>

<!--
Process content to display content on screen

-->
</section>

<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>

</html>

PHP：     

<?php

echo "You form is successfully submitted. Thank you for registering.";

?>

Validation.js：

//a function which splits the url into the different variabls
window.onload= function(){
var params = {};
var param_array = window.location.href.split('?')[1].split('&');//split 
the rul
for(var i in param_array){//save the parts in the arry
x = param_array[i].split('=');
params[x[0]] = x[1];
}
document.getElementById("userName").value = params.userName;//gets the 
values of the username

document.getElementById("password").value = params.password;//gets 
password value
document.getElementById("passwordVerify").value = params.passwordVerify;
document.getElementById("firstName").value = params.firstName;//first 
name
document.getElementById("lastName").value = params.lastName;
document.getElementById("email").value = params.email;
document.getElementById("phone").value = params.phone;
document.getElementById("signup").value = params.signUpNewsletter;

}
function storeCookie(){
var username=document.getElementById("userName").value; //saves the 
username in a variabe
document.cookie= "username=" + username; //saves the username variable in 
a cookie
alert(document.cookie);
var password=document.getElementById("password").value; //saves the 
password in a variable
document.cookie= "password=" + password; //saves the password varible in 
a cookie
var fname=document.getElementById("firstName").value;//saves the first 
name in a variable
document.cookie= "firstName=" + fname; //saves the firstname varible in a 
cookie
var lname=document.getElementById("lastName").value ; //saves the last 
name in a variable
document.cookie= "lastName=" + lname; //saves the lastnaem varible in a 
cookie
var email=document.getElementById("email").value; //saves the email in a 
variable
document.cookie= "email=" + email; //saves the email varible in a cookie
var phone=document.getElementById("phone").value ; //saves the phone in a 
variable
document.cookie= "phone=" + phone;//saves the phone varible in a cookie
var signup=document.getElementById("signup").value; ////saves the sign up 
value in a variable
document.cookie= "signUpNewsletter=" + signup;//saves the signup varible 
in a cookie
var comments=document.getElementById("comments").value; //saves the 
comments in a variable
document.cookie= "comments=" + comments; //saves the comments varible in 
a cookie
var referred=document.getElementById("referred").value;//saves the 
referred by value in a variable
document.cookie= "referred=" + referred; //saves the referred by varible 
in a cookie

if(document.querySelector('.check1').checked){ //check if the checkbox is 
checked if yes, it saves the value in  cookie
var interest1=document.getElementById("check1").value;
document.cookie= "interest1=" + interest1; 

}
if(document.querySelector('.check2').checked){  //check if the checkbox 
is checked if yes, it saves the value in  cookie
var interest2=document.getElementById("check2").value;
document.cookie= "interest2=" + interest2;

}    
if(document.querySelector('.check3').checked){  //check if the checkbox 
is checked if yes, it saves the value in  cookie
var interest3=document.getElementById("check3").value;
document.cookie= "interest3=" + interest3;

}
document.getElementById("addform").submit();//submits the form
}

1 个答案:

答案 0 :(得分：1)

发现并解决了问题：

registration.html：

  • 在meta标签中添加了正确的head标签。
  • 您必须使用整体正确的页面名称。我决定使用interests.html（而不是interest.html）。因此，我将form标记更改为<form action="interests.html"...>。
  • 我在onsubmit="return formValidation();"标签中添加了form，以便可以验证您的表单。
  • 第9行出现错误："script" element between "head" and "body"。我在<script type="text/javascript">...</script>标签之间移动了head。
  • <input type="radio" name="signUpNewsletter" id="signUpNewsletter"处的ID重复“ signUpNewsletter”。您不得有重复的ID。所以我改为“ signUpNewsletter1”和“ signUpNewsletter2”。
  • 在“断”行上引发的错误。我通过将相应的值和/或注释放在一行上来更正了所有错误。

interests.html：

  • 在meta标签中添加了正确的head标签。
  • 将<script type="text/javascript" src="js/validation.js"></script>添加到head标记中，以便您可以访问“ validation.js”中的功能。否则，您将收到一个错误。
  • 我将<script src="js/interest.js" ...></script>重命名为<script src="js/interests.js" ...></script>。
  • 第8行出现错误："script" element between "head" and "body"。我在<script type="text/javascript" src="js/interest.js"></script>标签之间移动了head。
  • <input type="radio" name="signUpNewsletter" id="signUpNewsletter"处的ID重复“ signUpNewsletter”。您不得有重复的ID。所以我改为“ signUpNewsletter1”和“ signUpNewsletter2”。
  • 始终用分号（“;”）关闭js脚本。所以我在onclick="storeCookie();"中添加了一个。
  • 在“断”行上引发的错误。我通过将相应的值和/或注释放在一行上来更正了所有错误。

confirm.html：

  • 在meta标签中添加了正确的head标签。
  • 第9行出现错误："script" element between "head" and "body"。我在<script type="text/javascript" src="js/confirm.js"></script>标签之间移动了head。
  • 在interest 1: <p id="username"></p>处重复的ID“用户名”。您不得有重复的ID。因此我将其更改为“ interest1”，“ interest2”和“ interest3”。
  • Comments: <p id="phone">Placeholder</p>处的ID重复的“电话”。应该是Comments: <p id="comments">Placeholder</p>，所以我更正了。

js / validation.js：

  • 在“断”行上引发的错误。我通过将相应的值和/或注释放在一行上来更正了所有错误。

建议：

  • 为了避免在代码中发现很多错误，您应该开始使用良好的IDE，这表明您的代码容易出错，并且可以完美地格式化代码。我个人使用Netbeans 8.2-选择下载PHP库（下载页面的第4列）。 PHP的最新版本，例如9.0版将很快上市（可能会在几周内）。请注意，当前发布的9.0版仅适用于Java项目！因此，请稍等片刻，直到发布用于PHP的新9.0库。
  • 为了实现您的功能，您应该使用php页面而不是html页面。这样您就可以通过php代码而不是js代码处理提交的表单数据或url。
  • 无论何时运行页面，都从浏览器的相应“开发工具”菜单中打开“控制台”或“检查器”。例如，在Firefox浏览器中，可以在菜单“工具> Web Developer”下找到“控制台”和“检查器”。使用这些工具，您可以查看页面引发的最终错误，也可以研究页面结构。这些工具可以实现很多其他很棒的事情。

注意：

我没有更改您页面的文本内容。我只是采取了适当的步骤使您的代码处于运行中且没有错误。

页面（包含已解析的代码）：

所有页面均包含工作代码。只需使用它们而不是您的。

registration.html： 

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Invitation Page</title>

        <link rel="stylesheet" type="text/css" href="css/main.css" />

        <script type="text/javascript">
            function formValidation() {
                // Make quick references to our fields.
                var username = document.getElementById('userName');
                var password = document.getElementById('password');
                var passwordv = document.getElementById('passwordVerify');
                var firstname = document.getElementById('firstName');
                var lastname = document.getElementById('lastName');
                var email = document.getElementById('email');
                var phone = document.getElementById('phone');
                var signup = document.getElementById('signUpNewsletter');

                // To check empty form fields.
                if (username.value.length == 0) {
                    // This segment displays the validation rule for all fields
                    document.getElementById('head').innerText = "* All fields are required * ";
                    username.focus();
                    return false;
                }

                // Check each input in the order that it appears in the form.
                if (textAlphanumeric(username, "* For your username please use alphabets and numbers only * ")) {
                    if (lengthDefine(password, 8, 16)) {
                        if (matchPass(password, passwordv, "* Passwords do not match! *")) {
                            if (inputAlphabet(firstname, "* For your name please use alphabets only * ")) {
                                if (inputAlphabet2(lastname, "* For your name please use alphabets only * ")) {
                                    if (emailValidation(email, "* Please enter a valid email address *")) {
                                        if (textAlphanumeric(phone, "* Enter phone number in format (xxx)xxx-xxxx * ")) {
                                            return true;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                return false;
            }

            // Function that checks whether input text is numeric or not.
            function textNumeric(inputtext, alertMsg) {
                var numericExpression = /^[0-9]+$/;

                if (inputtext.value.match(numericExpression)) {
                    return true;
                } else {
                    // This segment displays the validation rule for zip.
                    document.getElementById('p6').innerText = alertMsg;
                    inputtext.focus();
                    return false;
                }
            }

            // Function that checks whether input text is an alphabetic character or not.
            function inputAlphabet(inputtext, alertMsg) {
                var alphaExp = /^[a-zA-Z]+$/;

                if (inputtext.value.match(alphaExp)) {
                    return true;
                } else {
                    // This segment displays the validation rule for name.
                    document.getElementById('p3').innerText = alertMsg;
                    //alert(alertMsg);
                    inputtext.focus();
                    return false;
                }
            }

            // Function that checks whether input text is an alphabetic character or not.
            function inputAlphabet2(inputtext, alertMsg) {
                var alphaExp = /^[a-zA-Z]+$/;

                if (inputtext.value.match(alphaExp)) {
                    return true;
                } else {
                    // This segment displays the validation rule for name.
                    document.getElementById('p4').innerText = alertMsg;
                    //alert(alertMsg);
                    inputtext.focus();
                    return false;
                }
            }

            // Function that checks whether input text includes alphabetic and numeric characters.
            function textAlphanumeric(inputtext, alertMsg) {
                var alphaExp = /^[0-9a-zA-Z]+$/;

                if (inputtext.value.match(alphaExp)) {
                    return true;
                } else {
                    // This segment displays the validation rule for address.
                    document.getElementById('p5').innerText = alertMsg;
                    inputtext.focus();
                    return false;
                }
            }

            // Function that checks whether the input characters are restricted according to defined by user.
            function lengthDefine(inputtext, min, max) {
                var uInput = inputtext.value;

                if (uInput.length >= min && uInput.length <= max) {
                    return true;
                } else {
                    // This segment displays the validation rule for username.
                    document.getElementById('p1').innerText = "* Please enter between " + min
                            + " and " + max + " characters *";
                    inputtext.focus();
                    return false;
                }
            }

            // Function that checks whether the 2 passwords are correct.
            function matchPass(pass1, pass2, alertMsg) {
                if (pass1.value === pass2.value) {
                    return true;
                } else {
                    // This segment displays the validation rule for username.
                    document.getElementById('p2').innerText = alertMsg;
                    pass2.focus();
                    return false;
                }
            }

            // Function that checks whether an user entered valid email address or not and displays alert message on wrong email address format.
            function emailValidation(inputtext, alertMsg) {
                var emailExp = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;

                if (inputtext.value.match(emailExp)) {
                    return true;
                } else {
                    // This segment displays the validation rule for email.
                    document.getElementById('p5').innerText = alertMsg;
                    inputtext.focus();
                    return false;
                }
            }

            // Function that checks whether an user entered valid phone number or not and displays alert message on wrong phone address format.
            function phoneValidation(inputtext, alertMsg) {
                var phoneExp = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1} [0 - 9]{4}$ /;

                if (inputtext.value.match(phoneExp)) {
                    document.getElementById("regform").submit();
                    return true;
                } else {
                    // This segment displays the validation rule for email.
                    document.getElementById('p6').innerText = alertMsg;
                    inputtext.focus();
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <header>
            <div class="top">
                <a class="logo" href="index.html">
                    CapellaVolunteers<span class="dotcom">.org</span>
                </a>
            </div>
            <nav>
                <ul class="topnav">
                    <li>
                        <a href="index.html">Home</a>
                    </li>
                    <li>
                        <a href="invitation.html">Invitation</a>
                    </li>
                    <li>
                        <a href="gallery.html">Gallery</a>
                    </li>
                    <li>
                        <a href="registration.html" class="active">Registration</a>
                    </li>
                </ul>
            </nav>
        </header>

        <section id="pageForm">
            <form action="interests.html" id="regform" name="regform" onsubmit="return formValidation();">
                <p id="head"></p>
                <label for="userName">Username:</label>
                <input type="text" name="userName" id="userName" placeholder="Enter your Username" />

                <p id="p1"></p>
                <label for="Password">Password:</label>
                <input type="password" name="password" id="password" placeholder="Enter your Password" />

                <p id="p2"></p>
                <label for="passwordVerify">Verify your Password:</label>
                <input type="password" name="passwordVerify" id="passwordVerify" placeholder="Enter in your Password again" />

                <p id="p3"></p>
                <label for="firstName">First Name:</label>
                <input type="text" name="firstName" id="firstName" placeholder="Enter your First Name" />

                <p id="p4"></p>
                <label for="lastName">Last Name:</label>
                <input type="text" name="lastName" id="lastName" placeholder="Enter your Last Name" />

                <p id="p5"></p>
                <label for="email">Email:</label>
                <input type="text" name="email" id="email" placeholder="Enter your Email Address" />

                <p id="p6"></p>
                <label for="phoneNumber">Phone Number</label>
                <input type="text" name="phone" id="phone" placeholder="Enter your Phone Number" />

                <p id="p7"></p>
                <label for="signUpNewsletter">Sign up for newsletter:</label>
                <input type="radio" name="signUpNewsletter" id="signUpNewsletter1" value="Yes" checked> Yes
                <input type="radio" name="signUpNewsletter" id="signUpNewsletter2" value="No"> No

                <input type="submit" value="Next step">
            </form>
        </section>

        <!--
        <footer>
            This events site is for IT-FP3215 tasks.
        </footer>
        -->
    </body>

</html>

interests.html： 

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Interests Page</title>

        <link rel="stylesheet" type="text/css" href="css/main.css" />

        <script type="text/javascript" src="js/validation.js"></script>
        <script type="text/javascript" src="js/interests.js"></script>
    </head>
    <body>
        <header>
            <div class="top">
                <a class="logo" href="index.html">
                    CapellaVolunteers<span class="dotcom">.org</span>
                </a>
            </div>
            <nav>
                <ul class="topnav">
                    <li>
                        <a href="index.html">Home</a>
                    </li>
                    <li>
                        <a href="invitation.html">Invitation</a>
                    </li>
                    <li>
                        <a href="gallery.html">Gallery</a>
                    </li>
                    <li>
                        <a href="registration.html" class="active">Registration</a>
                    </li>
                </ul>
            </nav>
        </header>

        <section id="pageForm">
            <form action="confirm.html" id="addform">
                <input type="hidden" name="userName" id="userName" />
                <input type="hidden" name="password" id="password" />
                <input type="hidden" name="passwordVerify" id="passwordVerify" />
                <input type="hidden" name="firstName" id="firstName" />
                <input type="hidden" name="lastName" id="lastName" />
                <input type="hidden" name="email" id="email" />
                <input type="hidden" name="phone" id="phone" />
                <input type="hidden" name="signUpNewsletter" id="signup" />

                <label for="checkbox">Interests:</label><br/>
                <input type="checkbox" name="interests" id="check1" class="check1" value="Swimming"> Swimming<br>
                <input type="checkbox" name="interests" id="check2" class="check2" value="Travelling"> Travelling <br>
                <input type="checkbox" name="interests" id="check3" class="check3" value="Reading"> Reading <br>

                <label for="signUpNewsletter">Sign up for newsletter:</label><br/>
                <input type="radio" name="signUpNewsletter" id="signUpNewsletter1" value="Yes" checked> Yes <br>
                <input type="radio" name="signUpNewsletter" id="signUpNewsletter2" value="No"> No<br>

                <label for="comments">Comments:</label><br/>
                <textarea name="comments" id="comments" placeholder="Your Comments" rows="10" cols="60"> </textarea><br>

                <label for="referred">Referred by:</label><br>
                <input type="text" name="referred" id="referred" placeholder="Enter who referred you" /><br>

                <input type="button" value="Register" onclick="storeCookie();">
            </form>
        </section>

        <footer>
            This events site is for IT-FP3215 tasks.
        </footer>
    </body>

</html>

confirm.html：

如果您想从interests.html获取发布的值，那么您也应该将js/validation.js导入confirm.html中。由你决定。

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Interests Page</title>

        <link rel="stylesheet" type="text/css" href="css/main.css" />

        <script type="text/javascript" src="js/confirm.js"></script>
    </head>
    <body>
        <header>
            <div class="top">
                <a class="logo" href="index.html">
                    CapellaVolunteers<span class="dotcom">.org</span>
                </a>
            </div>
            <nav>
                <ul class="topnav">
                    <li>
                        <a href="index.html">Home</a>
                    </li>
                    <li>
                        <a href="invitation.html">Invitation</a>
                    </li>
                    <li>
                        <a href="gallery.html">Gallery</a>
                    </li>
                    <li>
                        <a href="registration.html" class="active">Registration</a>
                    </li>
                </ul>
            </nav>
        </header>

        <section id="pageFormContent">
            Username: <p id="username">Placeholder</p>
            Password: <p id="password">Placeholder</p>
            First Name: <p id="firstName">Placeholder</p>
            Last Name: <p id="lastName">Placeholder</p>
            email: <p id="email">Placeholder</p>
            Phone: <p id="phone">Placeholder</p>
            Sign up News Letter: <p id="signup">Placeholder</p>
            interest 1: <p id="interest1"></p>
            Interest 2: <p id="interest2"></p>
            Interest 3: <p id="interest3"></p>
            Comments: <p id="comments">Placeholder</p>

            <!-- Process content to display content on screen -->
        </section>

        <footer>
            This events site is for IT-FP3215 tasks.
        </footer>
    </body>
</html>

js / validation.js： 

//a function which splits the url into the different variabls
window.onload = function () {
    var params = {};
    var param_array = window.location.href.split('?')[1].split('&'); //split the url

    for (var i in param_array) {//save the parts in the array
        x = param_array[i].split('=');
        params[x[0]] = x[1];
    }

    document.getElementById("userName").value = params.userName;//gets the values of the username
    document.getElementById("password").value = params.password;//gets password value
    document.getElementById("passwordVerify").value = params.passwordVerify;
    document.getElementById("firstName").value = params.firstName;//first name
    document.getElementById("lastName").value = params.lastName;
    document.getElementById("email").value = params.email;
    document.getElementById("phone").value = params.phone;
    document.getElementById("signup").value = params.signUpNewsletter;
};

function storeCookie() {
    var username = document.getElementById("userName").value; //saves the username in a variabe
    document.cookie = "username=" + username; //saves the username variable in a cookie

    var password = document.getElementById("password").value; //saves the password in a variable
    document.cookie = "password=" + password; //saves the password varible in a cookie

    var fname = document.getElementById("firstName").value;//saves the first name in a variable
    document.cookie = "firstName=" + fname; //saves the firstname varible in a cookie

    var lname = document.getElementById("lastName").value; //saves the last name in a variable
    document.cookie = "lastName=" + lname; //saves the lastnaem varible in a cookie

    var email = document.getElementById("email").value; //saves the email in a variable
    document.cookie = "email=" + email; //saves the email varible in a cookie

    var phone = document.getElementById("phone").value; //saves the phone in a variable
    document.cookie = "phone=" + phone;//saves the phone varible in a cookie

    var signup = document.getElementById("signup").value; ////saves the sign up value in a variable
    document.cookie = "signUpNewsletter=" + signup;//saves the signup varible in a cookie

    var comments = document.getElementById("comments").value; //saves the comments in a variable
    document.cookie = "comments=" + comments; //saves the comments varible in a cookie

    var referred = document.getElementById("referred").value;//saves the referred by value in a variable
    document.cookie = "referred=" + referred; //saves the referred by varible in a cookie

    if (document.querySelector('.check1').checked) { //check if the checkbox is checked if yes, it saves the value in  cookie
        var interest1 = document.getElementById("check1").value;
        document.cookie = "interest1=" + interest1;
    }

    if (document.querySelector('.check2').checked) {  //check if the checkbox is checked if yes, it saves the value in  cookie
        var interest2 = document.getElementById("check2").value;
        document.cookie = "interest2=" + interest2;
    }

    if (document.querySelector('.check3').checked) {  //check if the checkbox is checked if yes, it saves the value in  cookie
        var interest3 = document.getElementById("check3").value;
        document.cookie = "interest3=" + interest3;
    }

    document.getElementById("addform").submit();//submits the form
}

修改1

页面调用顺序：

以这种方式调用页面：

加载registration.html>单击“下一步” 按钮>加载interests.html>单击“注册” 按钮>加载{{1 }}。

项目结构：

我可以向您保证我的代码正确且经过测试。因此，首先，重新检查您正在使用的文件名。它们应如以下文件系统结构所示：

confirm.html

激活cookie

为了正确测试页面，您必须清除cookie （由css main.css js confirm.js interests.js validation.js confirm.html gallery.html index.html interests.html invitation.html registration.html 中的代码设置），然后再进行每次测试。因此，在Firefox中，转到菜单“历史记录>清除最近的历史记录...” 并设置：

  • 清除时间范围：“一切”。
  • 检查 Cookie 和缓存。

然后点击“立即清除” 按钮。

此外，为了使Cookie正常运行，您必须将浏览器设置为接受Cookie 。因此，如果您使用的是Firefox，请遵循these instructions。您应该具有以下设置：

  • 接受来自网站的Cookie和网站数据（推荐）：已选中。
  • 保持浏览 ：。我会选择“ Firefox已关闭”。
  • 接受第三方Cookie和站点数据：“始终”。尽管“从不”更好，但是对于测试项目，请将其设置为“始终”。

别忘了检查“控制台”和“检查器”。

尽管其他因素可能会阻止页面正常运行，但我希望上述措施能使您的项目正常运行。

编辑2

发现问题：

在页面js/validation.js中，即使所有字段都有效，registration.html函数也不返回formValidation()。我现在相应地更改了js脚本。请注意，之前，所有其他功能都驻留在true函数中。我将它们带到外面并更改了formValidation()，以使其正常工作。再次检查formValidation()。

注意：

我的测试未考虑验证功能的工作原理，仅在页面触发适当提交到没有它的其他页面时才考虑。然后，最后，我还测试了该函数是否被触发。当我看到它的调用正确时，我停止了测试。所以这是我的错。对不起！现在，我进行了完整的测试，它可以正常工作。我希望它也能在您的系统上工作。

相关问题
最新问题