コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

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

WBOY
リリース： 2023-05-16 11:14:37
オリジナル
3206 人が閲覧しました

インターネットの発展に伴い、さまざまな機能を利用するためにユーザーの登録やログインを必要とする 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 コードでは、

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

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 コードでは、

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

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 サイトの他の関連記事を参照してください。

ソース：php.cn
前の記事：AndroidはJavaScriptを変更します 次の記事：JavaScriptの通常の改行置換
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1972
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2132
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1800
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1698
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1706
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート