프런트 측에서 폼의 검증을 추가했으므로 그 망비록

Qiita 첫 투고입니다.
어떤 회사에서 프론트 개발에 종사하고 있습니다.

양식 작성시
"input 태그에 특정 클래스를 붙이는 것만으로 필수 항목으로 인식하고 싶다"
라고 문득 생각했으므로 jQuery를 사용해 작성해 보았습니다.

밸리데이션

입력 내용이 적절한지 입력 체크
(필수 항목입니다! 적절한 이메일 주소를 기입하십시오! 등으로 꾸짖을 수 있습니다)

정규식

정규 표현이란 "다양한 문자열을 하나의 문자열로 표현할 수 있는 기법"입니다.
javascript라고 /ac+c/ 등과 같은 슬래시로 둘러싸인 정규 표현 리터럴을 이용합니다.
h tps://오키나 완피자. 하테나 bぉg. 코m/엔트리/2020/05/22/104507

예)^[A-Za-z0-9]{1} = 선두가 알파벳 혹은 숫자의 캐릭터 라인

전화번호, 이메일 주소 확인

이전의 정규 표현을 사용하면 다음과 같은 체크가 가능합니다.

//メールアドレスのバリデーション(例)
var regexp = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;
 if (!regexp.test(content)) {
  //正規表現とマッチしなかった時の処理
 }

test() 메소드는, 정규 표현과 지정된 캐릭터 라인이 일치할지 어떨지를 조사하는 메소드입니다. 논리 값을 반환합니다.

//電話番号のバリデーション(例)  
let contentTel = content.replace(/\D/g, '');
if !contentTel.match(/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/)) {
 flag = true;
}

replace() 메소드는 캐릭터 라인안에 있는, 지정한 캐릭터 라인을 다른 캐릭터 라인에 치환해 줍니다.
여기서 숫자 이외의 문자를 잘라줍니다.

--추기--
전화 번호의 트리밍 부분에 관해 조언 받았습니다.
ㅎㅎ 감사합니다 !!

지정한 입력 항목만 필수 항목으로 설정

본제입니다 (웃음)
input 태그에 "require"라는 클래스를 붙이는 것만으로 입력 체크를 실시할 수 있도록 합니다.


절차는 다음과 같습니다.

①requireがついたinputタグのバリデーション結果を記憶するためのハッシュを作る。
②requireという名前のクラスがついたinput全てに背番号をつけてハッシュに格納する。
③入力が終了した瞬間に入力チェックを行い、結果をハッシュに登録する。
④入力項目のタイプに応じたバリデーション処理を作成する。
⑤ハッシュの値全てがtrueなら、送信ボタンを押せる状態にする。
⑥おまけ：input以外のチェック項目を追加したい...

①, ② 필수 항목 등록

  let valitationHash = {};
  let $require = $(".require");
  $require.each(function (index, element) {
    let name = "input" + index;
    $(element).attr("data-input-name", name);  //⑥番のおまけで少し変更あり
    valitationHash[name] = false;  //valitationHash = {input1: false, input2: false, ....}
  })

require가 붙은 input 요소에 data-input-name 속성을 추가합니다.
이 값이 등번호가 되어 입력 체크 타이밍에 사용합니다.
해시 안은 valitationHash = {input1: false, input2: false, ....}⑤의 체크단계에서는 모든 값이 true가 되면 송신을 누를 수 있도록 합니다.

③ 입력 체크 결과를 해시에 등록

  $(".require").change(function() {
    checkValitate(this);
  })
  function checkValitate(elem) {
    let type = $(elem).attr("type");
    let name = $(elem).attr("data-input-name");
    let flag = true;
    let content = $(elem).val();
    if(type == 'text') { //type="text"の場合の入力チェック
      if(content == ""){
        flag = false;
      }
    } else if (type == 'email') { //type="email"の場合の入力チェック
      var regexp = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;
      if (!regexp.test(content)) {
        flag = false;
      }
    } else if (type == 'tel') {
      let contentTel = content.replace(/[━.*‐.*―.*－.*\-.*ー.*\-]/gi,'');
      console.log(contentTel);
      if (!contentTel.match(/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/)) {
        flag = false;
      } else if (type == 'example'){
        if(checkExample()){
          flag = false;
        }
      } 
    setValitationHash(name , flag)  //⑤番号とチェック結果を引数として渡します
  }

입력 유형에 따라 유효성 검사 항목이 다르기 때문에
입력 항목의 종류별로 분기시킵니다.

⑤ 해시의 모든 값이 true이면 버튼을 누를 수 있도록

  function setValitationHash (name, boolean){
    valitationHash[name] = boolean; 
    pushable(valitationHash);
  }
  function pushable (hash) {
    let pushableValue = true;
    for (let key in hash) {
      if(hash[key] == false){
       pushableValue = false;
      }
    }
    if(pushableValue){
     buttonOn()
    } else {
     buttonOff()
    }
  }
  function buttonOn() {
    $(".button").prop("disabled", false);
  }
  function buttonOff() {
    $(".button").prop("disabled", true);
  }

for..in.. 문을 사용하여 해시의 모든 값을 확인합니다.
모두 true이면 송신 가능하게 해 완료입니다.

//for in サンプル
let ageList = {yusaku:"12", kiyomi: "25", yuki: "30"};
 for (let name in ageList) {
  console.log("私は" + name + "、" + ageList[name] + "です。")
 }

덤

폼은 input 태그만이 아니라는 것을 완전히 잊고 있었습니다.

아무래도 select 태그도 require 동료에 더해 주고 싶다,,

⑥select 태그를 인식할 수 있도록 수정

범용성을 갖추기 위해,
input의 속성에 새로운 data-input-type을 추가합니다.

  $require.each(function (index, element) {
    let name = "input" + index;
    setTypeAndName(element, name)
    valitationHash[name] = false;
  })
  function setTypeAndName(element, name) {
    let type = "text"; 
    let tagname = $(element).prop("tagName");
    if(tagname == "SELECT"){
      type = "select";
    } else if (tagname == "INPUT"){
      type = $(element).attr("type");
    } else if (tagname == "SPAN") {
      type = "checkbox"
    }
    $(element).attr("data-input-name", name);
    $(element).attr("data-input-type", type);
  }

태그의 이름으로 판별하여 data-input-type 속성에 "select"를 추가했습니다.
prop("tagName")로 태그 값을 얻을 수 있습니다.
그리고 checkValitate(elem) 함수에 data-input-type 속성이 select시의 패턴을 추가합니다.

function checkValitate(elem) {
 let type = $(elem).attr("data-input-type"); // type属性ではなくdata-input-type属性を取得するように処理を変更
 .
 .c
 } else if (type == 'select') {
  //処理内容
 }
 .
 .
}

오시마

이번 Qiita에 처음 투고했습니다.
이번 코딩으로 밸리데이션의 다른 라이브러리를 조사하는 계기가 되어 매우 좋은 경험이 되었습니다.
또한 워드 프레스의 컨택트 폼 7 등
프런트에서의 밸리데이션 설정이 없는 것에서도 의외로 사용할 수 있기도 했으므로, 좋았을까라고 생각합니다(웃음)

미경험으로부터 web제작에 종사해 주셔서 1년이 지났습니다만 역시 JavaScript를 접하는 것은 즐겁네요.
더 좋은 방법이 있으면 조언하실 수 있으면 기쁩니다. 격려가 됩니다.
清澄 감사합니다! !

참고
test() 메소드
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 쟈 / ㅇ cs / ぇ b / ゔ ぁ Sc 리 pt / 레후 렌 세 / G

정규식
htps : // 코 m / 소 rf t / ms / 2b50c1 에후 2 에아 54 아 762d7

연관 배열을 반복
htps : // 코 m / ぃ ふぇ ゔ ぃ ぉ / ms / 15359535 834832 08