2023.5.2 プログラミングメモ

・郵便番号入力フォームのバリデーションチェック（途中まで）
数字7桁単体まで

ソースコード
・html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:title" content="JS">
  <meta property="og:description" content="jQuery課題">
  <meta property="og:site_name" content="トップページ">
  <title>問4</title>
  <link rel="icon" href="#">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <div class="content">
    <p>パスワードを入力してください</p>
    <input type="text" class="content__form" >
  
    <button class="content__button">確認</button>
    <p class="error__text" style="display: none">入力された値が正しくありません</p>
  </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

JS
'use  strict';

const confirm_button = document.getElementsByClassName('content__button')[0];

// 確認ボタンクリック時の処理
confirm_button.addEventListener('click', () => {
  /*
// 郵便番号（ハイフンなし7桁）
  */
  const password_regex = new RegExp( /^\d{7}$/ );
  const password_value = document.getElementsByClassName('content__form')[0].value;
  // formのvalueを正規表現でチェック
  const password_value_checked_result = password_regex.test(password_value);
  const error_text = document.getElementsByClassName('error__text')[0];

  // チェック結果でエラー文言を出し分け
  password_value_checked_result
    // ? error_text.style.display = 'none'
		? console.log('OK')
		: console.log('NG');
    // : error_text.style.display = 'block';
});

// 記号、空白など\u0020
// value.match(/(<|>|&|"|'|\u005c|\u0020)/));

// 郵便番号（ハイフンなし7桁）
// /^\d{7}$/

// 半角アルファベット（・数値）
// /\A[0-9]+\z/
5月2日 14:03
★new RegExp で正規表現オブジェクト

現状の動き
「確認」を押すと正規表現(new RegExp)をチェック(test)する。(7桁数字のみ)
マッチしていたらエラーメッセージを表示しない(none)
マッチしていないとエラーメッセージを表示する(block)

理想の動き
「確認」を押すと正規表現(new RegExp)をチェック(test)する。(複数の条件すべて)
各条件を満たしていたらエラーメッセージを表示しない
条件を満たしていなかったら各条件に応じたエラーメッセージを表示する。

参考

正規表現
https://qiita.com/fubarworld2/items/9da655df4d6d69750c06

ソースコード参考
https://qiita.com/ushi_osushi/items/b2064c4e40e61bf63ccc#%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE


●5/4

現状の動き
「確認」を押すと正規表現(new RegExp)をチェック(test)する。(7桁数字のみ)(空白以外)(英字以外)
マッチしていたらエラーメッセージを表示しない(none)
マッチしていないとエラーメッセージを表示する(block)

・JS

const confirm_button = document.getElementsByClassName('content__button')[0];

// 確認ボタンクリック時の処理
confirm_button.addEventListener('click', () => {
  /*
// 郵便番号（ハイフンなし7桁）
  */

  // 英字以外
  const password_regex_1 = RegExp( /[^a-zA-Z]+/ );
  // 空白以外
  const password_regex_2 = RegExp( /[^\s]+/ );
  // ハイフンなし7桁の数字
  const password_regex_3 = RegExp( /^[0-9]{7}$/ );
  const password_value = document.getElementsByClassName('content__form')[0].value;
  // formのvalueを正規表現でチェック
  const password_value_checked_result = (password_regex_1, password_regex_2, password_regex_3).test(password_value);
  const error_text = document.getElementsByClassName('error__text')[0];

  // チェック結果でエラー文言を出し分け
  password_value_checked_result
    ? error_text.style.display = 'none'
		// ? console.log('OK')
		// : console.log('NG');
    : error_text.style.display = 'block';
});