Question

我在链接“注册”表单时遇到了一些问题，使其保存到我的数据库中，以便创建注册登录的用户可以登录。

我有一个注册页面和一个登录页面（显然），我有脚本来验证电子邮件和所有这些。我需要知道的是一些建议或者代码。

这是“注册”页面：

<!DOCTYPE html>
<html>


<head>
<style>
*{
 margin:0px;
 padding:0px;
 }
body{
 font-family:Tahoma, Geneva, sans-serif;
 }
#container{
 width:550px;
 background-color:rgba(250,250,252,.9);
 margin:auto;
 margin-top:10px;
 margin-bottom:10px;
 box-shadow:0 0 3px #999;
 }
#container_body{
 padding:20px;
 }
.form_title{
 font-size:35px;
 color:#141823;
 text-align:center;
 padding:10px;
 font-weight:normal;
 }
.head_para{
 font-size:19px;
 color:#99a2a7;
 text-align:center;
 font-weight:normal;
 }
#form_name{
 padding:25px 0 0 15px;
 }
.firstnameorlastname{
  margin-right:20px;
 }
.input_name{
 width:207px;
 padding:5px;
 font-size:18px;
 }
#email_form{
 clear:both;
 padding:15px 0 10px 0px;
 }
.input_email{
 width:434px;
 padding:5px;
 font-size:18px;
 }
#Re_email_form{
 padding:10px 0 10px 0px;
 }
.input_Re_email{
 width:434px;
 padding:5px;
 font-size:18px;
 }
#password_form{
 padding:10px 0 10px 0px;
 }
.input_password{
 width:434px;
 padding:5px;
 font-size:18px;
 }
.birthday_title{
 font-size:16px; 
 color:#8b919d; 
 font-weight:normal;
 padding:0 0 10px 0;
 }
select{
 padding:5px;
 }
#birthday{
 font-size:12px;
 color:#8b919d;
 padding-top:10px;
 }
#radio_button{
 padding:10px 0 0 0;
 }
#sign_user{
 font-size:14px;
 color:#FFF;
 text-align:center;
 background-color:#3B5998;
 padding:10px;
 margin-top:10px;
 cursor: pointer;
 }
#errorBox{
 color:#F00;
 }
</style>


</head>
<body>
<div id="emptyDiv"></div>
<div id="description"></div>
<!--container start-->
<div id="container">
  <div id="container_body">
    <div>
      <h2 class="form_title">User Registration Form</h2>
      <p class="head_para">Form Validated Using Javascript</p>
    </div>
    <!--Form  start-->
    <div id="form_name">
      <div class="firstnameorlastname">
       <form name="form" >
       <div id="errorBox"></div>
        <input type="text" name="Name" value="" placeholder="First Name"  class="input_name" >
        <input type="text" name="LastName" value="" placeholder="Last Name" class="input_name" >

      </div>
      <div id="email_form">
        <input type="text" name="Email" value=""  placeholder="Your Email" class="input_email">
      </div>
      <div id="Re_email_form">
        <input type="text" name="enterEmail" value=""  placeholder="Re-enter Email" class="input_Re_email">
      </div>
      <div id="password_form">
        <input type="password" name="Password" value=""  placeholder="New Password" class="input_password">
      </div>
      <!--birthday details start-->
      <div>
        <h3 class="birthday_title">Birthday</h3>
      </div>
      <div>
        <select name="birthday_month" >
          <option value="" selected >Month</option>
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
        </select>
        &nbsp;&nbsp;
        <select name="birthday_day" >
          <option value="" selected>Day</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        &nbsp;&nbsp;
        <select name="birthday_year">
          <option value="" selected>Year</option>
          <option value="2013">2013</option>
          <option value="2012">2012</option>
          <option value="2011">2011</option>
          <option value="2010">2010</option>
          <option value="2009">2009</option>
        </select>
      </div>
      <!--birthday details ends-->
      <div id="radio_button">
        <input type="radio" name="radiobutton" value="Female">
        <label >Female</label>
        &nbsp;&nbsp;&nbsp;
        <input type="radio" name="radiobutton" value="Male">
        <label >Male</label>
      </div>
       <div>
        <p id="sign_user" onClick="Submit()">Sign Up </p>
      </div>
     </form>
    </div>
    <!--form ends-->
  </div>
</div>
<script type= "text/javascript">

function Submit(){
 var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
 var fname = document.form.Name.value,
  lname = document.form.LastName.value,
  femail = document.form.Email.value,
  freemail = document.form.enterEmail.value,
  fpassword = document.form.Password.value,
  fmonth = document.form.birthday_month.value,
  fday = document.form.birthday_day.value,
  fyear = document.form.birthday_year.value;

 if( fname == "" )
   {
     document.form.Name.focus() ;
  document.getElementById("errorBox").innerHTML = "enter the first name";
     return false;
   }
 if( lname == "" )
   {
     document.form.LastName.focus() ;
   document.getElementById("errorBox").innerHTML = "enter the last name";
     return false;
   }

   if (femail == "" )
 {
  document.form.Email.focus();
  document.getElementById("errorBox").innerHTML = "enter the email";
  return false;
  }else if(!emailRegex.test(femail)){
  document.form.Email.focus();
  document.getElementById("errorBox").innerHTML = "enter the valid email";
  return false;
  }

   if (freemail == "" )
 {
  document.form.enterEmail.focus();
  document.getElementById("errorBox").innerHTML = "Re-enter the email";
  return false;
  }else if(!emailRegex.test(freemail)){
  document.form.enterEmail.focus();
  document.getElementById("errorBox").innerHTML = "Re-enter the valid email";
  return false;
  }

  if(freemail !=  femail){
   document.form.enterEmail.focus();
   document.getElementById("errorBox").innerHTML = "emails are not matching, re-enter again";
   return false;
   }


 if(fpassword == "")
  {
   document.form.Password.focus();
   document.getElementById("errorBox").innerHTML = "enter the password";
   return false;
  }

   if (fmonth == "") {
        document.form.birthday_month.focus();
  document.getElementById("errorBox").innerHTML = "select the birthday month";
        return false;
     }
  if (fday == "") {
        document.form.birthday_day.focus();
  document.getElementById("errorBox").innerHTML = "select the birthday day";
        return false;
     }
  if (fyear == "") {
        document.form.birthday_year.focus();
  document.getElementById("errorBox").innerHTML = "select the birthday year";
        return false;
     }
  if(document.form.radiobutton[0].checked == false && document.form.radiobutton[1].checked == false){
    document.getElementById("errorBox").innerHTML = "select your gender";
    return false;
   }
  if(fname != '' && lname != '' && femail != '' && freemail != '' && fpassword != '' && fmonth != '' && fday != '' && fyear != ''){
   document.getElementById("errorBox").innerHTML = "form submitted successfully";
   alert("Form Submitted Successfully");
   window.location = "Books.html";
   }

}



</script>
</body>
</html>

这是登录页面：

 <!DOCTYPE html>
    <html>
    <head>
    <style>
    #submit{
    position: relative;
     font-size:14px;
     color:#FFF;
     text-align:center;
     background-color:#3B5998;
     padding:10px;
     cursor: pointer;
     }
    p {
    color: blue;


    }


    </style>





        </head>
        <body>
        <script type = "text/javascript">

        var count = 2;
        function validate() {
        var un = document.myform.username.value;
        var pw = document.myform.pword.value;
        var valid = false;

        var unArray = ["Philip", "George", "Sarah", "Michael"];  // as many as you like - no comma after final entry
        var pwArray = ["Password1", "Password2", "Password3", "Password4"];  // the corresponding passwords;

        for (var i=0; i <unArray.length; i++) {
        if ((un == unArray[i]) && (pw == pwArray[i])) {
        valid = true;
        break;
        }
        }

        if (valid) {
        alert ("Login was successful");
        window.location = "Books.html";
        return false;
        }

        var t = " tries";
        if (count == 1) {t = " try"}

        if (count >= 1) {
        alert ("Invalid username and/or password.  You have " + count + t + " left.");
        document.myform.username.value = "";
        document.myform.pword.value = "";
        setTimeout("document.myform.username.focus()", 25);
        setTimeout("document.myform.username.select()", 25);
        count --;
        }


        }

        </script>

        <form name = "myform">
        <p>ENTER USER NAME <input type="text" name="username"> ENTER PASSWORD <input type="password" name="pword">
        <div id= "submit"><input type="button" value="Check In" name="Submit" onclick= "validate()"></div>
        </p>

        </form>


        </body>
        </html>

Answer 1

如果您正在尝试创建PHP注册/登录页面，请查看使用SESSION变量。（http://php.net/manual/en/book.session.php）

注册后，使用用户名设置SESSION变量，并将用户重定向到登录页面。登录页面应该查找预先存在的$ _SESSION ['user']变量，如果存在则直接记录它们。

另请注意，您当前的代码非常不安全。您正在使用JS对一组用户名和密码进行身份验证。任何黑客（我在这里非常松散地使用这个术语）可以简单地查看源代码并找到有用的用户名/密码组合。你永远不应该在本地验证！

Answer 2

function forgot(){
  event.preventDefault();

  var email = document.getElementById("fe").value;

  if(emailArray.indexOf(email) == -1){
    if (email == ""){
      alert("Email required.");
      return ;
    }
    alert("Email does not exist.");
    return ;
  }

  alert("email is send to your email check it in 24hr. \n Thanks");
  document.getElementById("fe").value ="";
}

document.addEventListener("contextmenu", function(e){
  e.preventDefault();
  alert("Right Click is not allowed");
}, false);

Answer 3

Javascript

    var emailArray=[];
    var passwordArray=[];
    var loginBox = document.getElementById("login");
    var regBox = document.getElementById("register");
    var forgetBox = document.getElementById("forgot");

    var loginTab = document.getElementById("lt");
    var regTab = document.getElementById("rt");

    function regTabFun(){
        event.preventDefault();

        regBox.style.visibility="visible";
        loginBox.style.visibility="hidden";
        forgetBox.style.visibility="hidden";

        regTab.style.backgroundColor="rgb(12, 132, 189)";
        loginTab.style.backgroundColor="rgba(11, 177, 224, 0.82)";
    }
    function loginTabFun(){
        event.preventDefault();

        regBox.style.visibility="hidden";
        loginBox.style.visibility="visible";
        forgetBox.style.visibility="hidden";

        loginTab.style.backgroundColor="rgb(12, 132, 189)";
        regTab.style.backgroundColor="rgba(11, 177, 224, 0.82)";
    }
    function forTabFun(){
        event.preventDefault();

        regBox.style.visibility="hidden";
        loginBox.style.visibility="hidden";
        forgetBox.style.visibility="visible";

        regTab.style.backgroundColor="rgba(11, 177, 224, 0.82)";
        loginTab.style.backgroundColor="rgba(11, 177, 224, 0.82)";

    }


    function register(){
        event.preventDefault();

        var email = document.getElementById("re").value;
        var password = document.getElementById("rp").value;
        var passwordRetype = document.getElementById("rrp").value;

        if (email == ""){
            alert("Email required.");
            return ;
        }
        else if (password == ""){
            alert("Password required.");
            return ;
        }
        else if (passwordRetype == ""){
            alert("Password required.");
            return ;
        }
        else if ( password != passwordRetype ){
            alert("Password don't match retype your Password.");
            return;
        }
        else if(emailArray.indexOf(email) == -1){
            emailArray.push(email);
            passwordArray.push(password);

            alert(email + "  Thanks for registration. \nTry to login Now");

            document.getElementById("re").value ="";
            document.getElementById("rp").value="";
            document.getElementById("rrp").value="";
        }
        else{
            alert(email + " is already register.");
            return ;
        }
    }
    function login(){
        event.preventDefault();

        var email = document.getElementById("se").value;
        var password = document.getElementById("sp").value;

        var i = emailArray.indexOf(email);

        if(emailArray.indexOf(email) == -1){
            if (email == ""){
                alert("Email required.");
                return ;
            }
            alert("Email does not exist. Register First.");
            return ;
        }
        else if(passwordArray[i] != password){
            if (password == ""){
                alert("Confirm Password");
                return ;
            }
            alert("Password does not match.");
            return ;
        }
        else {
            alert(email + " yor are login Now \n welcome to our website.");

            document.getElementById("se").value ="";
            document.getElementById("sp").value="";
            location = "index.html" ;
        }

    }
    function forgot(){
        event.preventDefault();

        var email = document.getElementById("fe").value;

        if(emailArray.indexOf(email) == -1){
            if (email == ""){
                alert("Email required.");
                return ;
            }
            alert("Email does not exist.");
            return ;
        }

        alert("email is send to your email check it in 24hr. \n Thanks");
        document.getElementById("fe").value ="";
    }

Code for CSS and HTML

如何链接＆＃39;注册＆＃39;页面到＆＃39;登录＆＃39;用html / javascript / php

3 个答案: