JavaScript を使用して登録情報を確認する方法について説明します。-フロントエンドQ&A-php.cn

インターネットの発展に伴い、登録は多くの人が完了しなければならない作業になりました。 Web サイトやアプリケーションに登録することが非常に一般的になり、これらの登録プロセスでは、ユーザーはユーザー名、パスワード、電子メールアドレスなどの多くの個人情報を入力する必要があります。この情報の信頼性と安全性を確保するために、登録情報を確認する必要があります。 Web 開発では、JavaScript 検証が広く使用されています。この記事では、JavaScript を使用して登録情報を確認し、いくつかの特別な機能を追加する方法について説明します。

一般的に、フロントエンドフォーム検証プロセスは、フォーカスを取得したときとフォーカスを失ったときにトリガーされます。 JavaScript を使用すると、フォーカスが得られたときにプロンプトメッセージをポップアップ表示し、フォーカスが失われたときに対応する検証を実行できます。

まず、HTML マークアップで、form 要素を含むフォームを作成する必要があります。 form 要素には、入力フィールドと送信ボタンが含まれている必要があります。この例では、単純な登録フォームを例として使用します。

<form name="registerForm" onsubmit="return validateForm()" action="/submit-form" method="POST">
    <label>用户名:</label><input type="text" name="userName" required /><br />
    <label>密码:</label><input type="password" name="password" required /><br />
    <label>确认密码:</label><input type="password" name="rePassword" required /><br />
    <label>电子邮件:</label><input type="email" name="email" required /><br />
    <button type="submit">注册</button>
</form>

ログイン後にコピー

form 要素に、「required」や「onsubmit」などの新しい属性がいくつかあることがわかります。このうち、「required」はフォームを送信する前に入力ボックスに入力する必要があることを意味し、「onsubmit」はフォームを送信する前に実行されるJavaScript関数を意味します。

次に、フォームデータを検証するための JavaScript 関数を実装する必要があります。この例では、validateForm() という関数を実装します。この関数は、フォームに入力されたデータを取得し、検証を行います。

function validateForm() {
  // Get the input data
  var username = document.forms["registerForm"]["userName"].value;
  var password = document.forms["registerForm"]["password"].value;
  var repassword = document.forms["registerForm"]["rePassword"].value;
  var email = document.forms["registerForm"]["email"].value;

  // Check username
  if (username == "") {
    alert("用户名不能为空！");
    document.forms["registerForm"]["userName"].focus();
    return false;
  }

  // Check password
  if (password == "") {
    alert("密码不能为空！");
    document.forms["registerForm"]["password"].focus();
    return false;
  }

  // Check confirm password
  if (repassword == "") {
    alert("确认密码不能为空！");
    document.forms["registerForm"]["rePassword"].focus();
    return false;
  } else {
    if (repassword != password) {
      alert("两次密码不匹配！");
      document.forms["registerForm"]["password"].value = "";
      document.forms["registerForm"]["rePassword"].value = "";
      document.forms["registerForm"]["password"].focus();
      return false;
    }
  }

  // Check email
  var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;
  if (email == "") {
    alert("电子邮件不能为空！");
    document.forms["registerForm"]["email"].focus();
    return false;
  } else if (!emailReg.test(email)) {
    alert("电子邮件格式不正确！");
    document.forms["registerForm"]["email"].value = "";
    document.forms["registerForm"]["email"].focus();
    return false;
  }

  // If all the data is correct, return true
  return true;
}

ログイン後にコピー

この関数では、いくつかの簡単な検証条件を使用して、フォームデータの正確性をチェックします。たとえば、ユーザー名が空かどうか、パスワードと確認用パスワードが同じかどうか、電子メールの形式が正しいかどうかなどを確認します。入力データが要件を満たしていない場合は、警告メッセージがポップアップ表示され、フォームの送信を防ぐために false が返されます。すべてのデータが要件を満たしている場合は true を返します。

次に、フォーカスを取得する入力ボックスとフォーカスを失う入力ボックスで対応する操作を実行する JS 関数を追加する必要があります。

// Add onfocus event
document.getElementsByName("userName")[0].onfocus = function() {
  document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "请输入用户名";
};

document.getElementsByName("password")[0].onfocus = function() {
  document.getElementsByName("password")[0].nextElementSibling.innerHTML = "请输入密码";
};

document.getElementsByName("rePassword")[0].onfocus = function() {
  document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "请再次输入密码";
};

document.getElementsByName("email")[0].onfocus = function() {
  document.getElementsByName("email")[0].nextElementSibling.innerHTML = "请输入电子邮件地址";
};

// Add onblur event
document.getElementsByName("userName")[0].onblur = function() {
  if (document.getElementsByName("userName")[0].value == "") {
    document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "用户名不能为空！";
  } else {
    document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "";
  }
};

document.getElementsByName("password")[0].onblur = function() {
  if (document.getElementsByName("password")[0].value == "") {
    document.getElementsByName("password")[0].nextElementSibling.innerHTML = "密码不能为空！";
  } else {
    document.getElementsByName("password")[0].nextElementSibling.innerHTML = "";
  }
};

document.getElementsByName("rePassword")[0].onblur = function() {
  if (document.getElementsByName("rePassword")[0].value == "") {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "确认密码不能为空！";
  } else if (document.getElementsByName("rePassword")[0].value != document.getElementsByName("password")[0].value) {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "两次密码不匹配！";
  } else {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "";
  }
};

document.getElementsByName("email")[0].onblur = function() {
  var email = document.getElementsByName("email")[0].value;
  var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;

  if (email == "") {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件不能为空！";
  } else if (!emailReg.test(email)) {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件格式不正确！";
  } else {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "";
  }
};

ログイン後にコピー

これらのコードでは、各入力フィールドにイベントハンドラーを追加しました。フォーカスを獲得するとプロンプトメッセージが表示され、フォーカスを失うと検証結果が表示されます。たとえば、ユーザー名を入力する場合、テキストボックスの横に「ユーザー名を入力してください」と表示され、入力が間違っている場合には特定のエラーメッセージが表示されます。

最後に、これらのコードをまとめて完全な例を作成します。

<form name="registerForm" onsubmit="return validateForm()" action="/submit-form" method="POST">
    <label>用户名:</label><input type="text" name="userName" required /><span></span><br />
    <label>密码:</label><input type="password" name="password" required /><span></span><br />
    <label>确认密码:</label><input type="password" name="rePassword" required /><span></span><br />
    <label>电子邮件:</label><input type="email" name="email" required /><span></span><br />
    <button type="submit">注册</button>
</form>

<script>
  // Add onfocus event
  document.getElementsByName("userName")[0].onfocus = function() {
    document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "请输入用户名";
  };

  document.getElementsByName("password")[0].onfocus = function() {
    document.getElementsByName("password")[0].nextElementSibling.innerHTML = "请输入密码";
  };

  document.getElementsByName("rePassword")[0].onfocus = function() {
    document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "请再次输入密码";
  };

  document.getElementsByName("email")[0].onfocus = function() {
    document.getElementsByName("email")[0].nextElementSibling.innerHTML = "请输入电子邮件地址";
  };

  // Add onblur event
  document.getElementsByName("userName")[0].onblur = function() {
    if (document.getElementsByName("userName")[0].value == "") {
      document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "用户名不能为空！";
    } else {
      document.getElementsByName("userName")[0].nextElementSibling.innerHTML = "";
    }
  };

  document.getElementsByName("password")[0].onblur = function() {
    if (document.getElementsByName("password")[0].value == "") {
      document.getElementsByName("password")[0].nextElementSibling.innerHTML = "密码不能为空！";
    } else {
      document.getElementsByName("password")[0].nextElementSibling.innerHTML = "";
    }
  };

  document.getElementsByName("rePassword")[0].onblur = function() {
    if (document.getElementsByName("rePassword")[0].value == "") {
      document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "确认密码不能为空！";
    } else if (document.getElementsByName("rePassword")[0].value != document.getElementsByName("password")[0].value) {
      document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "两次密码不匹配！";
    } else {
      document.getElementsByName("rePassword")[0].nextElementSibling.innerHTML = "";
    }
  };

  document.getElementsByName("email")[0].onblur = function() {
    var email = document.getElementsByName("email")[0].value;
    var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;

    if (email == "") {
      document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件不能为空！";
    } else if (!emailReg.test(email)) {
      document.getElementsByName("email")[0].nextElementSibling.innerHTML = "电子邮件格式不正确！";
    } else {
      document.getElementsByName("email")[0].nextElementSibling.innerHTML = "";
    }
  };

  function validateForm() {
    // Get the input data
    var username = document.forms["registerForm"]["userName"].value;
    var password = document.forms["registerForm"]["password"].value;
    var repassword = document.forms["registerForm"]["rePassword"].value;
    var email = document.forms["registerForm"]["email"].value;

    // Check username
    if (username == "") {
      alert("用户名不能为空！");
      document.forms["registerForm"]["userName"].focus();
      return false;
    }

    // Check password
    if (password == "") {
      alert("密码不能为空！");
      document.forms["registerForm"]["password"].focus();
      return false;
    }

    // Check confirm password
    if (repassword == "") {
      alert("确认密码不能为空！");
      document.forms["registerForm"]["rePassword"].focus();
      return false;
    } else {
      if (repassword != password) {
        alert("两次密码不匹配！");
        document.forms["registerForm"]["password"].value = "";
        document.forms["registerForm"]["rePassword"].value = "";
        document.forms["registerForm"]["password"].focus();
        return false;
      }
    }

    // Check email
    var emailReg = /^([\w-]+\.)*?[\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$/;
    if (email == "") {
      alert("电子邮件不能为空！");
      document.forms["registerForm"]["email"].focus();
      return false;
    } else if (!emailReg.test(email)) {
      alert("电子邮件格式不正确！");
      document.forms["registerForm"]["email"].value = "";
      document.forms["registerForm"]["email"].focus();
      return false;
    }

    // If all the data is correct, return true
    return true;
  }
</script>

ログイン後にコピー

上記は、JavaScript を使用して登録情報を検証するプロセスです。この例を通じて、フロントエンド検証によってユーザーエクスペリエンスとデータセキュリティが大幅に向上することがわかります。したがって、Web 開発では、フロントエンドのフォーム検証とバックエンドのデータ検証が連携して、完全な検証システムを実現します。

以上がJavaScript を使用して登録情報を確認する方法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。