DOMを使用した検証スプレー

31486 ワード
DOM 検証＃ケンショウ＃ テキストリンク
登録会員IDとパスワードの有効性を検証する印刷を行いました.
index.html
<body>
    <h1>회원가입</h1>
    <fieldset>
      <div>
      <label>아이디</label>
      <input type="text" id="username" required />
      <div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>
      <div class="success-message hide">사용할 수 있는 아이디입니다</div>
      <div class="validation hide">아이디는 영어와 숫자로만 가능합니다</div>
    </div>
    </fieldset>
    <fieldset>
      <label>비밀번호</label>
      <input type="password" id="password" required />
      <div class="validation-ps hide">
        최소 8자 이상이면서, 알파벳과 숫자 및 특수문자는 최소 하나 포함
      </div>
    </fieldset>
    <fieldset>
      <label>비밀번호 확인</label>
      <input type="password" id="password-retype" required />
      <div class="mismatch-message hide">두 비밀번호가 일치하지 않습니다</div>
    </fieldset>
    <fieldset>
      <button id="submit">회원가입</button>
    </fieldset>
    <script src="script.js"></script>
  </body>
  • は、まずDOM操作HTMLを使用する入力またはdivにid、classを指定します.
    • script.js
    let elInputUsername = document.querySelector("#username");
let elFailureMessage = document.querySelector(".failure-message");
let elSuccesssMessage = document.querySelector(".success-message");

let elpassword = document.querySelector("#password");
let elpasswordRe = document.querySelector("#password-retype");
let mismatchMessage = document.querySelector(".mismatch-message");

let elValidation = document.querySelector(".validation");
let elValidationPs = document.querySelector(".validation-ps");

let submitBtn = document.querySelector("#submit");
    まず、DOM操作を使用する要素をquerySelectorに読み込み、変数に格納します.
    // 4글자 이상인지
function isMoreThan4Length(value) {
  return value.length >= 4;
}

// 패스워드가 일치 하는지
function isMatch(password1, password2) {
  if (password1 == password2) {
    return true;
  } else {
    return false;
  }
}

// [유효성 검증 함수]: 영어 또는 숫자만 가능
function onlyNumberAndEnglish(str) {
  return /^[A-Za-z][A-Za-z0-9]*$/.test(str);
}

// [유효성 검증 함수]: 최소 8자 이상하면서, 알파벳과 숫자 및 특수문자(@$!%*#?&) 는 하나 이상 포함
function strongPassword(str) {
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(
    str
  );
}
    アクティビティで使用する関数は4種類あります.(コメントを参照)
    次に、入力ごとにイベントコードを見てみましょう.
  • id入力時
    • elInputUsername.onkeyup = function () {
  if (isMoreThan4Length(elInputUsername.value)) {
    elFailureMessage.classList.add("hide");
  } else {
    elFailureMessage.classList.remove("hide");
  }

  if (onlyNumberAndEnglish(elInputUsername.value)) {
    elValidation.classList.add("hide");
  } else {
    elValidation.classList.remove("hide");
  }

  if (
    isMoreThan4Length(elInputUsername.value) &&
    onlyNumberAndEnglish(elInputUsername.value)
  ) {
    elSuccesssMessage.classList.remove("hide");
    alert('성공');
  } else {
    elSuccesssMessage.classList.add("hide");
  }
};
    条件に応じてDOMを使用してクラス名を変更します.
    ex)<div class="success-message hide">の初期値はsuccess-message hideである.elSuccesssMessage.classList.remove("hide");が実行されると、非表示が消去され、divが表示される.
  • パスワード入力時
    • elpassword.onkeyup = function () {
  if (strongPassword(elpassword.value)) {
    elValidationPs.classList.add("hide");
  } else {
    elValidationPs.classList.remove("hide");
  }
  if (isMatch(elpassword.value, elpasswordRe.value)) {
    mismatchMessage.classList.add("hide");
  } else {
    mismatchMessage.classList.remove("hide");
  }
};
  • 確認パスワード入力時
    • 入力
    elpasswordRe.onkeyup = function () {
  if (isMatch(elpassword.value, elpasswordRe.value)) {
    mismatchMessage.classList.add("hide");
  } else {
    mismatchMessage.classList.remove("hide");
  }
};
  • 会員入力ボタン
    • をクリック
    submitBtn.addEventListener("click", function () {
  if (
    isMoreThan4Length(elInputUsername.value) &&
    onlyNumberAndEnglish(elInputUsername.value) &&
    strongPassword(elpassword.value) &&
    isMatch(elpassword.value, elpasswordRe.value)
  ) {
    alert("축하합니다!");
  } else if (
    isMoreThan4Length(elInputUsername.value) === false ||
    onlyNumberAndEnglish(elInputUsername.value) === false
  ) {
    alert("id를 다시 확인하세요!");
  } else if (
    strongPassword(elpassword.value) === false ||
    isMatch(elpassword.value, elpasswordRe.value) === false
  ) {
    alert("비밀번호를 다시 확인하세요!");
  }
});
    スプレーをかける
    DOMはquerySelectorとclassListを使用します.add、remove程度が少ないので使いやすいです.
    久しぶりに有効性検証が行われ、指定条件が少し混同されていましたが、難しくなくて面白かったです.
    [BOJ]3184番羊(Java)
    [Ava]Constructor(コンストラクション関数メソッド)