如何使用 javascript 添加注冊驗證

Question

我得到了這段代碼，要求我使用 Javascript 添加驗證 function。這是一個注冊表單，提交后，如果名字、姓氏、用戶名或密碼為空或密碼的字符長度少於 8 個字符。 如果滿足條件，它會彈出一條消息，告訴用戶注冊成功

<?php
    require "function.php";

    if($_SERVER['REQUEST_METHOD'] == "POST")
    {
        $username = addslashes($_POST['username']);
        $password = addslashes($_POST['password']);
        $date = date('Y-m-d H:i:s');
        $firstname = ($_POST['firstname']);
        $lastname = ($_POST['lastname']);


        $query = "insert into users (username,password,date,firstname,lastname) 
        values ('$username','$password','$date','$firstname','$lastname')";

        $result = mysqli_query($con,$query);

        header("Location: login.php");
        die;
    }
?>

<!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">
    <link rel="stylesheet" href="LogIn.css">
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <title>Sign up</title>
</head>
<body>
    <nav> 
        <ul>
            <li><a href="home.php">Home</a></li>

            <a href="login.php"><button class = "button2"> <span class = "sign"> Login </button></a>
            <a href="signup.php"><button class = "button2"> <span class="sign"> Sign Up</span></button></a>
        </ul>
    </nav>
    
    <div class="signup"> 
        <div class="signup-box">
            <h2>Sign Up for Free</h2>
            <p>It's quick and easy</p>
            
            <form method="post" id = "form">
                <div class ="box">
                    <i class="material-icons">person</i>
                    <input type = "text" name = "firstname" placeholder = "First Name" id = "First_name" required>
                </div>
            
                <div class = "box">
                    <i class="material-icons">person</i>
                    <input type = "text" name = "lastname" placeholder = "Last Name" id = "Last_Name" required>
                </div>
            
                <div class="box">
                    <i class="material-icons">account_circle</i>
                    <input type="text" name="username" placeholder="Your username" id = "User_name" required>
                </div>
            
                <div class="box">
                    <i class="material-icons">lock</i>
                    <input type="password" name="password" placeholder="Your Password" id = "Password" required>
                </div>

                <input type="submit" id = "submit" value="Sign Up"></input>
           
            </form>

        </div>
    </div>
</body>
</html>

我嘗試使用 If 語句並將每個字段值與 null 和密碼進行比較，如果密碼字段的值長度小於 8，我會進行比較。但它不起作用，每當我單擊提交時

Answer 1

在您的form標簽中，您需要指定一個onsubmit事件，例如

onsubmit="return validateForm();"

因此，如果您的validateForm function 返回true （“有效”），則提交form ，如果返回false ，則不提交form 。 現在，讓我們實現validateForm ：

function validateForm() {
    let firstName = document.getElementById("First_name").value;
    let lastName = document.getElementById("Last_Name").value;
    let username = document.getElementById("User_name").value;
    let password = document.getElementById("Password").value;

    error = "";

    let isValid = (!!firstName);

    if (!isValid) error = "First name is empty";

    isValid = isValid && lastName;

    if ((!isValid) && (!error)) error = "Last name is empty";
    
    isValid = isValid && username;

    if ((!isValid) && (!error)) error = "Username is empty";

    isValid = isValid && password;

    if ((!isValid) && (!error)) error = "Password is empty";

    isValid = isValid && (password.length >= 8);

    if ((!isValid) && (!error)) error = "Password too short";

    if (isValid) alert("Validation succeeded");
    else alert(error);

    return isValid;
}

如何使用 javascript 添加注冊驗證

問題描述

1 個解決方案

解決方案1
0 已采納 2022-11-18 16:28:59

如何使用 javascript 添加注冊驗證

問題描述

1 個解決方案

解決方案1 0 已采納 2022-11-18 16:28:59

解決方案1
0 已采納 2022-11-18 16:28:59