ヴィスタックのクローン符号化と同時に,正規表現を用いてログインホームページを実現した.もちろんまだデータは届いていません

正規表現

指定した文字列で見つけられる文字パターンを表す式.
正規表現の辞書的意味として、特定のルールを持つ文字列の集合を表す形式言語です.主に、プログラミング言語またはテキストエディタで文字列を検索および置換するために使用されます.入力した文字列に条件が表示されている場合は、通常の条件文は複雑かもしれませんが、正規表現を使用すると簡単に表現できます.しかし、欠点はコードが簡単で、可読性が悪く、式を熟知していないと理解しにくいことです.

欠点の原因は?

汎用性と生産性は良好ですが、入力文字列の処理が簡潔であることが最大の原因だと思います.
プログラムは,入力側のユーザがどのような構成の文字列を入力するか予測しにくい.したがって,様々な形式の文字列入力に対して,すべての状況を統一した文字列処理を行うことは困難である.この場合、正規表現で簡潔に処理できる
パスワードやEメールを入力するときに他の例を表示しないでください.

異なる形式で格納電話番号データを大量に抽出する必要がある場合、

.

ユーザーが入力した電子メール、携帯電話番号、IPアドレスが正しいかどうかを検証したい

コードで変数の名前を指定しますが、その変数名を含む関数を除外するには、

を選択します.

特定の条件と位置に基づいて文字列のスペースまたは特殊文字を削除する場合、

正規表現の使用例

Eメールinputには、Eメール形式のEメールが含まれている必要があります.
パスワードpasswordでは、次のページに進むページを生成するには、アルファベット+数字+特殊文字の組み合わせ8～25ビットを使用します.
Eメール、パスワード、ログインボタンの要素を取得します.

const emailForm = document.querySelector("#email-input-box");
const passwordForm = document.querySelector("#password-input-box");
const loginButton = document.querySelector("#login-button");

EAMIL_CHECK_REGEXは、電子メールをチェックする正規表現を含む
同様に、PWD_CHECK_REGEXには、パスワードをチェックする正規表現が加えられる.

const EAMIL_CHECK_REGEX =
  /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;
const PWD_CHECK_REGEX = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/;

電子メールとパスワードのテキストが受信されると、ボタンがアクティブになります.

emailForm.addEventListener("keyup", listener);
passwordForm.addEventListener("keyup", listener);

function listener() {
  switch (!(emailForm.value && passwordForm.value)) {
    case true:
      loginButton.disabled = true;
      break;
    case false:
      loginButton.disabled = false;
      break;
  }
}

ログインボタンをクリックし、電子メールとパスワードのtest()メソッドを使用して正規表現をテストします.test()メソッドは、所与の文字列が正規表現を満たすか否かを判別し、trueまたはfalseを呼び出す.
テストに失敗した場合は、対応するプロンプトウィンドウが表示され、終了します.focus()にカーソルの点滅方法が追加されました.
この通知ウィンドウの問題点が表示されます.

loginButton.addEventListener("click", () => {
  if (!EAMIL_CHECK_REGEX.test(emailForm.value)) {
    alert("이메일 형식으로 입력 해주세요.");
    emailForm.focus();
    return false;
  }

  if (!PWD_CHECK_REGEX.test(passwordForm.value)) {
    alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 합니다.");
    passwordForm.focus();
    return false;
  }

  alert("로그인 되었습니다.");
  location.href = "index.html";
});