在登錄表單中執行提交按鈕后，我正在刷新

Question

我使用 html 和 css 和 javascripts 制作了一個簡單的登錄頁面。 但是，當我提交時，如果在幾秒鍾后執行一些 javascript 行，頁面會自動刷新。當我提交表單時，它會顯示想要的 output 但網頁刷新幾秒鍾。 HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>intern.local</title>
    <link rel="stylesheet"><link rel="stylesheet" href="./index.css">
    <script src="./index.js"></script>
</head>
<body>
<div class="outer"> 
    <div class="inner one" 
        id="box_one">
        <h1 class="main">
            Welcome to intern.local
        </h1>
        <h3 id='login_1'>
            Enter details and login to continue.
        </h3>
    </div>
    <div class="inner two" 
        id="box_two">
        <div class="head">
            <h1> Welcome</h1>
            <h2>Please Login</h2>
            <div class="error">
                    Please Enter valid Password.
            </div>
            <div id="login" 
                class="login">
                
                <form class="login_form" onsubmit="validate()">
                    
                    <input type="text"
                            pattern="^\w+([\.-]?\w+)*@docquity.com"
                            id="uname" 
                            class="inp uname" 
                            name="uname"
                            placeholder="Username" required><br>
                    <input type="password" 
                            minlength="6"
                            id="pass" 
                            class="inp pwd" 
                            name="pass"
                            placeholder="Password" required>
                    <small id="pass_error"></small>
                    <input type="submit" 
                            id="smt" 
                            value="Submit"
                            class="btn sbmt">
                </form>
                
            </div>
        </div>
    </div>
</div>    
</body>
</html>

css代碼

body {
    margin:0px;
    height:100%;
    border: none;
    padding:0px;
  }

.inner{
    float:left;
    width: 50%;
    height: 100vh;

}
.one {
    background-color:cornsilk;
}
.two{
    /*background: rgb(63,94,251);*/
    background: radial-gradient(circle, rgb(103, 126, 238) 0%, rgb(185, 74, 97) 150%);
    padding: 0%;
    border: 0%;
    margin: 0%;
    color: cornsilk;
}
.head{
    height: auto;
    padding-top: 15%;
}
.head h1 {
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 40px;
}
.head h2{
    text-align: center;

}
form {
    margin: 0 auto;
}
.login {
    text-align: center;
}
.inp {
    border: none;
    background: none;
    box-shadow: 0px 2px 0px 0px white;
    width: 50%;
    color:blanchedalmond;
    font-size: 25px;
    outline: none;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 5%;
    padding-left: 2%;
}
.inp:focus:invalid{
    box-shadow: 0px 2px 0px 0px red;
}
small {
    color: red;
    font-weight: bold;
}
.pwd {
    margin-bottom: 10%;
}
.uname::placeholder, .pwd::placeholder{
    color: blanchedalmond;
}
.btn {
    align-items: center;
    background-color: #fff;
    border-radius: 24px;
    border-style: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    color: #000102;
    display: inline-flex;   
    height: 48px;
    justify-content: center;
    padding: 2px 24px;   
    width: 30%;
    font-size: 25px;
    
    
}
.sbmt:hover{
    background-color: darkslategray;
    color: floralwhite;
}

.main {
    margin-top: 20%;
    text-align: center;
    font-size: 60px;
    background: -webkit-linear-gradient(rgb(171, 10, 185), rgb(209, 8, 42));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.one h3 {
    text-align: center;
    color:darkslategray;
}

.error_message{
    background-color: red;
    margin-left: 25%;
    margin-right: 25%;
    text-align: center;
}

.error {
    display: none;
}

javascript碼

function mail_velidate(mail){
  var mail_pattern = /^\w+([\.-]?\w+)*@docquity.com/;
  if(mail.match(mail_pattern))
  {
    return true;
  }
  else{
    return false;
  }
}

function password_check(pass){
  var pass_regex = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/;
  if (pass.match(pass_regex)){
    return true;
  }
  else{
    return false;
  }
}
const mail = document.getElementById("uname");

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByClassName("uname");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Give valid docquity mail id");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

function validate(){
  var user = document.getElementById("uname").value;
  var pass = document.getElementById("pass").value;

  if(password_check(pass)){
      document.getElementById('login').innerHTML = "<h1>Logged In</h1>";
      document.getElementById('login_1').innerHTML = '<h3>Logged In successfully</h3>';
      document.getElementById('box_two').style.display = 'none';
      document.getElementById('box_one').style.width = '100%';
  }
  else{
    document.getElementsByClassName("error")[0].className = "error_message";
  }
}

代碼行document.getElementsByClassName("error")[0].className = "error_message"; 給我問題。

Answer 1

在您的 HTML 上，您需要放置event.preventDefault(); 像這樣：

<form class="login_form" onsubmit="event.preventDefault(); validate();">

event.preventDefault()將在提交時停止任何默認行為。 在submit的情況下，它是頁面重新加載。

https://codepen.io/tunk/pen/tjGdp

在登錄表單中執行提交按鈕后，我正在刷新

問題描述

1 個解決方案

解決方案1
2 2022-01-12 19:07:23

在登錄表單中執行提交按鈕后，我正在刷新

問題描述

1 個解決方案

解決方案1 2 2022-01-12 19:07:23

解決方案1
2 2022-01-12 19:07:23