моя html форма при отправке не вызывает функцию проверки пароля. Что-то не так с кодом? - PullRequest
Новая
       44

моя html форма при отправке не вызывает функцию проверки пароля. Что-то не так с кодом?

0 голосов
/ 02 мая 2020 
<html>
    <script>
    function passwordvalidation() #validate if password is strong and if botth passwords are equal
    {
      var x=document.forms["signup"]["psw"].value;
      var y=document.form["signup"]["psw-repeat"].value;
      var z=document.form["signup"]["email"].value;
      alert(x);
      if (x == ""||y==""||z=="") {
        alert("form must be filled out");
        return false;
      }
      else if(y!=x)
      {
        alert("password does not match");
        return false;
      }
      else if (!(x.match(/[a-z]/g) && x.match( 
                        /[A-Z]/g) && x.match( 
                        /[0-9]/g) && x.match( 
                        /[^a-zA-Z\d]/g) && x.length >= 8)) 
                        {
                          alert("weak password")
                          return false;
                        }
      else
      {
        return true;
      }
    }

    </script>
    <style>
    body {font-family: Arial, Helvetica, sans-serif;}
    * {box-sizing: border-box}

    /* Full-width input fields */
    input[type=text], input[type=password] {
      width: 100%;
      padding: 15px;
      margin: 5px 0 22px 0;
      display: inline-block;
      border: none;
      background: #f1f1f1;
    }

    input[type=text]:focus, input[type=password]:focus {
      background-color: #ddd;
      outline: none;
    }

    hr {
      border: 1px solid #f1f1f1;
      margin-bottom: 25px;
    }

    /* Set a style for all buttons */
    button {
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 100%;
      opacity: 0.9;
    }

    button:hover {
      opacity:1;
    }

    /* Extra styles for the cancel button */
    .cancelbtn {
      padding: 14px 20px;
      background-color: #f44336;
    }

    /* Float cancel and signup buttons and add an equal width */
    .cancelbtn, .signupbtn {
      float: left;
      width: 50%;
    }

    /* Add padding to container elements */
    .container {
      padding: 16px;
    }

    /* Clear floats */
    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }

    /* Change styles for cancel button and signup button on extra small screens */
    @media screen and (max-width: 300px) {
      .cancelbtn, .signupbtn {
         width: 100%;
      }
    }
    </style>
    <body>

    <form name="signup" action="/login" onsubmit="return passwordvalidation()" style="border:1px solid #ccc">
      <div class="container">
        <h1>Sign Up</h1>
        <h6>Please fill in this form to create an account.</h6>
        <p>Strong password must contain 8 characters </p>
        <hr>

        <label for="email"><b>Email</b></label>
        <input type="text" placeholder="Enter Email" name="email" required>

        <label for="psw"><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="psw" required>

        <label for="psw-repeat"><b>Repeat Password</b></label>
        <input type="password" placeholder="Repeat Password" name="psw-repeat" required>





        <div class="clearfix">

          <button type="submit"  class="signupbtn">Sign Up</button>
        </div>
      </div>
    </form>

    </body>
</html>

Ответы [ 3 ]

0 голосов
/ 02 мая 2020

Это вызывает функцию проверки, но вы допустили орфографическую ошибку во второй и третьей строке. Правильный document.form -> document.forms document.form не определено, и ваша функция завершается с TypeError, когда вы вызываете document.form["signup"] без возврата false, и, таким образом, ваша форма перемещается к определенному действию

0 голосов
/ 02 мая 2020 

function passwordvalidation(form) 
    {
  
      var x=form["psw"].value;

     var y=form["psw-repeat"].value;

      var z=form["email"].value;
      
      if (x == ""||y==""||z=="") {
        alert("form must be filled out");
           console.log("form must be filled out");
        return false;
      }
      else if(y!=x)
      {
        alert("password does not match");
        return false;
      }
    
      else if (!(x.match(/[a-z]/g) && x.match( 
                        /[A-Z]/g) && x.match( 
                        /[0-9]/g) && x.match( 
                        /[^a-zA-Z\d]/g) && x.length >= 8)) 
                        {
                          alert("weak password")
                          return false;
                        }
      else
      {
        return true;
      }
    }
body {font-family: Arial, Helvetica, sans-serif;}
    * {box-sizing: border-box}

    /* Full-width input fields */
    input[type=text], input[type=password] {
      width: 100%;
      padding: 15px;
      margin: 5px 0 22px 0;
      display: inline-block;
      border: none;
      background: #f1f1f1;
    }

    input[type=text]:focus, input[type=password]:focus {
      background-color: #ddd;
      outline: none;
    }

    hr {
      border: 1px solid #f1f1f1;
      margin-bottom: 25px;
    }

    /* Set a style for all buttons */
    button {
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 100%;
      opacity: 0.9;
    }

    button:hover {
      opacity:1;
    }

    /* Extra styles for the cancel button */
    .cancelbtn {
      padding: 14px 20px;
      background-color: #f44336;
    }

    /* Float cancel and signup buttons and add an equal width */
    .cancelbtn, .signupbtn {
      float: left;
      width: 50%;
    }

    /* Add padding to container elements */
    .container {
      padding: 16px;
    }

    /* Clear floats */
    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }

    /* Change styles for cancel button and signup button on extra small screens */
    @media screen and (max-width: 300px) {
      .cancelbtn, .signupbtn {
         width: 100%;
      }
    }
<form name="signup" action="/login" onsubmit="return passwordvalidation(this)" style="border:1px solid #ccc">
      <div class="container">
        <h1>Sign Up</h1>
        <h6>Please fill in this form to create an account.</h6>
        <p>Strong password must contain 8 characters </p>
        <hr>

        <label for="email"><b>Email</b></label>
        <input type="text" placeholder="Enter Email" name="email" required>

        <label for="psw"><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="psw" required>

        <label for="psw-repeat"><b>Repeat Password</b></label>
        <input type="password" placeholder="Repeat Password" name="psw-repeat" required>





        <div class="clearfix">

          <button type="submit"class="signupbtn">Sign Up</button>
        </div>
      </div>
    </form>
0 голосов
/ 02 мая 2020

В этих строках есть несколько ошибок: 

var x=document.forms["signup"]["psw"].value;
var y=document.form["signup"]["psw-repeat"].value;
var z=document.form["signup"]["email"].value;

Вы можете использовать много методов для получения входных значений, но этот способ вызывает ошибки. Проверьте, как это сделать, используя document.getElementBy *** или аналогичный

...