検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScript は Web ログイン登録を実装します

JavaScript は Web ログイン登録を実装します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2023-05-16 11:14:373367ブラウズ

インターネットの発展に伴い、さまざまな機能を利用するためにユーザーの登録やログインを必要とする Web サイトやアプリケーションが増えています。 Web サイトやアプリケーションにログインと登録を実装するには、通常、バックエンド テクノロジの使用が必要ですが、実装は面倒で、長い開発サイクルが必要です。同時に、フロントエンド開発者は JavaScript テクノロジを使用してログインおよび登録機能を実装することもでき、ユーザーにより便利なエクスペリエンスとより速い開発速度を提供します。

この記事では、JavaScript を使用して基本的な Web サイトとアプリケーションのログインおよび登録機能を実装する方法を紹介します。

1. フロントエンドの基本的な準備

ログインおよび登録機能の実装を開始する前に、フロントエンドの基本的な技術的基盤を準備する必要があります。 HTML 言語: Web ページの基礎となるシステム。Web ページ内の要素のレイアウトとコンテンツを決定します。

    CSS スタイル: Web ページの美化のサポートを提供し、Web ページ内の要素の色、フォント、サイズ、その他のスタイルを決定します。
  1. JavaScript言語：Webページやアプリケーションに動的な対話機能を提供し、ログイン登録の検証などを実現します。
  3. 2. Webサイト/アプリケーションへのログイン実装
ログイン機能を実装する前に、アカウント番号やパスワードなど、ユーザーのログインに必要な情報を決定する必要があります。通常、入力ボックスを使用してこの情報を取得し、ユーザーが入力したアカウント番号とパスワードが合法かどうかを確認する必要があります。

次は、基本的なログイン ページの HTML コードです: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
</head>
<body>
    <h1>Login Page</h1>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username"><br>
        <label for="password">Password:</label>
        <input type="password" id="password"><br>
        <button type="submit" id="loginBtn">Login</button>
    </form>
    <script src="login.js"></script>
</body>
</html>

この HTML コードでは、

ff9c23ada1bcecdd1a0fb5d5a0f18437

タグを使用してユーザー入力ボックスを含めます。およびログイン ボタン。

2e1cf0710519d5598b1f0f14c36ba674 ラベルは入力ボックスの目的を説明するために使用されます。d5fd7aea971a85678ba271703566ebfd ラベルは入力ボックスを作成するために使用されます。37a9605a910bf1fbe848fe3f47ab78d9 ラベルはログイン ボタンの作成に使用されます。 この HTML コードでは、ログイン ロジックを実装するために「login.js」という名前の JavaScript ファイルを指定します。この JavaScript ファイルのコードは次のとおりです。 

function doLogin() {
    // 获取用户输入的账号和密码
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    // 进行账号和密码的验证
    if (username === "admin" && password === "123456") {
        alert("Login success!");
    } else {
        alert("Incorrect username or password!");
    }
}

// 监听登录按钮的点击事件
document.getElementById("loginBtn").addEventListener("click", doLogin);

このコードでは、ユーザー ログイン ロジックを処理する

doLogin()

という関数を作成しました。まず、ユーザーが入力したアカウント番号とパスワードを取得し、その情報を確認します。この例では、認証に単純なユーザー名とパスワードを使用します。ユーザー名とパスワードが正しく入力されると、「ログイン成功!」というプロンプト ボックスが表示されます。そうでない場合は、「ユーザー名またはパスワードが間違っています!」というプロンプト ボックスが表示されます。

最後に、JavaScript コードの addEventListener()

関数を使用して、ログイン ボタンのリスニング イベントを追加しました。ボタンがクリックされると、

doLogin() が実行されます。ユーザー入力を処理する関数。 3. Web サイト/アプリケーションの登録実装

ログイン機能の実装と同様に、アカウント番号、パスワード、確認パスワードなどのユーザー登録に必要な情報を最初に決定する必要があります。ここでは、「パスワードの確認」フィールドに検証を追加する必要があります。以下は、基本的な登録ページの HTML コードです。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Register Page</title>
</head>
<body>
    <h1>Register Page</h1>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username"><br>
        <label for="password">Password:</label>
        <input type="password" id="password"><br>
        <label for="confirmPassword">Confirm Password:</label>
        <input type="password" id="confirmPassword"><br>
        <button type="submit" id="registerBtn">Register</button>
    </form>
    <script src="register.js"></script>
</body>
</html>

同様に、この HTML コードでは、

ff9c23ada1bcecdd1a0fb5d5a0f18437

タグを使用して、ユーザー入力ボックスと登録ボタンを含めます。

2e1cf0710519d5598b1f0f14c36ba674 ラベルは入力ボックスの目的を説明するために使用され、d5fd7aea971a85678ba271703566ebfd ラベルは入力ボックスを作成するために使用され、 ラベルは登録ボタンの作成に使用されます。 この HTML コードでは、登録ロジックを実装するために「register.js」という名前の JavaScript ファイルを指定します。この JavaScript ファイルのコードは次のとおりです。 

function doRegister() {
    // 获取用户输入的账号、密码和确认密码
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var confirmPassword = document.getElementById("confirmPassword").value;

    // 进行账号和密码的验证
    if (username === "") {
        alert("Username cannot be empty!");
    } else if (password === "" || confirmPassword === "") {
        alert("Password or confirm password cannot be empty!");
    } else if (password !== confirmPassword) {
        alert("Password and confirm password do not match!");
    } else {
        alert("Register success!");
    }
}

// 监听注册按钮的点击事件
document.getElementById("registerBtn").addEventListener("click", doRegister);

このコードでは、ユーザー登録ロジックを処理する

doRegister()

という関数を作成しました。同様に、ユーザーが入力したアカウント番号、パスワード、確認パスワードを取得し、これらの情報を確認します。この例では、ユーザー名を空にすることはできず、パスワードと確認パスワードを空にすることはできず、パスワードと確認パスワードは一致する必要があるという 3 つの検証を実行します。これら 3 つの条件が満たされると、「登録が成功しました!」というプロンプト ボックスが表示されます。

最後に、JavaScript コードの addEventListener()

関数を使用して、登録ボタンのリスニング イベントを追加しました。ボタンがクリックされると、

doRegister()# が呼び出されます。 ## ユーザー入力を処理する関数。 4. データのローカル ストレージの実装上記のコードは、基本的なログイン/登録機能の実装を完了しますが、入力ボックスは、再ロードされるか、データが正しく入力されないたびにクリアされます。その結果、ユーザー エクスペリエンスが低下するため、データをローカルに保存する、つまりローカル ストレージを実装する必要があります。データ ストレージには localStorage を使用します。これは、キーと値のペアを使用してデータを保存し、ストレージ作業を完了するための setItem、getItem、およびその他の関連インターフェイスを提供します。

以下は、変更されたコード例です: 

// 登录逻辑
function doLogin() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  // 将数据存储到本地
  window.localStorage.setItem("username", username);
  window.localStorage.setItem("password", password);
  if (username === "admin" && password === "123456") {
    alert("Login success!");
  } else {
    alert("Incorrect username or password!");
  }
}

// 监听登录按钮的点击事件
document.getElementById("loginBtn").addEventListener("click", doLogin);

// 注册逻辑
function doRegister() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var confirmPassword = document.getElementById("confirmPassword").value;
  if (username === "") {
    alert("Username cannot be empty!");
  } else if (password === "" || confirmPassword === "") {
    alert("Password or confirm password cannot be empty!");
  } else if (password !== confirmPassword) {
    alert("Password and confirm password do not match!");
  } else {
    // 将数据存储到本地
    window.localStorage.setItem("username", username);
    window.localStorage.setItem("password", password);
    alert("Register success!");
  }
}

// 监听注册按钮的点击事件
document.getElementById("registerBtn").addEventListener("click", doRegister);

// 初始化登录页面的数据
function initLoginPage() {
  var username = window.localStorage.getItem("username");
  var password = window.localStorage.getItem("password");
  if (username && password) {
    document.getElementById("username").value = username;
    document.getElementById("password").value = password;
  }
}

// 初始化注册页面的数据
function initRegisterPage() {
  var username = window.localStorage.getItem("username");
  if (username) {
    document.getElementById("username").value = username;
  }
}

// 判断当前页面是登录页面还是注册页面
if (document.title === "Login Page") {
  initLoginPage();
} else if (document.title === "Register Page") {
  initRegisterPage();
}

このコードでは、localStorage を使用してデータのローカル ストレージを実装します。ユーザーが正常にログインまたは登録すると、ユーザー名とパスワードが localStorage に保存されます。ページがリロードされると、localStorage からユーザー名とパスワードを取得し、対応する入力ボックスに入力します。このようにして、ユーザーはページをリロードした後も最後に入力したデータを保持できるため、ページ操作の利便性が向上します。

要約

上記は、Web サイトやアプリケーションのログインおよび登録機能を JavaScript で実装するためのメソッドと手順です。これらのコード例を通じて、JavaScript を使用して Web サイトやアプリケーションの基本機能を実装し、データのローカル ストレージを実装してページ操作の利便性を向上させる方法を学びました。もちろん、これらのコード例は最も基本的なログイン/登録機能の実装のみを示しており、開発者は実際のニーズに基づいてより複雑な開発作業を実行できます。

以上がJavaScript は Web ログイン登録を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html register 接口 JS 事件 input
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：AndroidはJavaScriptを変更します次の記事：AndroidはJavaScriptを変更します

関連記事

続きを見る