2021_03_19

TIL-検証

1.検証

今日はサイト会員登録ページの検証機能を実現しました.
検証(form validation)とは、入力が必要な条件に合致しなければならないフォーマットです.
1.UIの構成
会員加入ページの機能を実現する前に、UIを構成する必要があります.

labelタグやdivタグなどを用いて簡単に画面を実現した.
2.有効性検証関数の実装
有効性検証関数は、特定の文字列が8文字より大きいかどうか、スペースであるかどうかなど、要件を満たす条件をチェックします.今期実施する有効性は以下の通りである.
会員加入ボタンをクリックした場合

First name入力欄(アイデンティティー入力欄)の値が空の

であるかどうかを確認します.

First name入力欄(アイデンティティー入力欄)の値が8文字より大きい

Password入力欄の値が

であるかどうかを確認します.

Password入力欄の値は、Confirm password入力欄の値と一致する

このような有効性検証を行うことにした.
First name入力バー(アイデンティティー入力バー)の値が空でないことを確認します

//[이벤트 핸들러]
if(!fillIn(inputbox.value)) { //입력칸의 값이 공백이라면
    displayErrorMessage('아이디를 입력하세요.',1)
}
//[유효성 검증 함수]
function fillIn(str) { //입력칸의 값이 공백인지 확인하는 함수
  if(str.length !== 0)
    return true;
  return false;
}
//[시각적 피드백]
function displayErrorMessage(message,check) { //에러 메시지를 보여주는 함수
  if(check === 1) {
    elErrorMessage.classList.add('invalid');
    inputform.classList.add('invalid');
    elErrorMessage.textContent = message;
  }
}

エラーメッセージを表示する関数で、elErrorMessageとinputformに「無効」クラスを追加し、cssの「無効」クラスの要素にエラー画面が表示されます.
First name入力バー(アイデンティティ入力バー)の値が8文字以上であることを確認します

//[이벤트 핸들러]
if(moreThanLength(inputbox.value,8)) {
    alert("아이디 입력 완료");
    displayValidMessage();
}
//[유효성 검증 함수]
function moreThanLength(str, n) {
  return str.length >= n;
}
function displayValidMessage() {
    elErrorMessage.classList.remove('invalid');
    inputform.classList.remove('invalid');
    elErrorMessage.classList.add('valid');
    inputform.classList.add('valid');
    elErrorMessage.textContent='';
}

IDが空白でなければ、8文字以上であれば「ID入力完了」というメッセージが表示され、elErrorMessageとinputformのクラスを「valid」に変換してエラー画面をクリアします.


Password入力バーの値がConfirm password入力バーの値と一致していることを確認します.

//[이벤트 핸들러]
if(!checkPassword(passwordbox.value, confirmbox.value)) {
    displayErrorMessage('비밀번호가 서로 다릅니다.',3)
}

パスワード入力バーの値がConfirm password入力バーの値と異なる場合は、「パスワードが異なります」.「無効」クラスをelErrorMessageとinputformに追加し、エラー画面を表示します.

すべての条件を満たした後、会員加入ボタンをクリックすると、「会員加入完了」のメッセージが出力されます.
ハーモニーが見たいならここに来て!
今日は、会員のページへの参加を実現するための有効性検証関数を作成しました.
明日はそれをもとにTwitter画面を実現しましょう.
今日はここまで~!~