아줌마의 국비학원생활

[35일차][javascript/jquery] 유효성체크

citygray 2023. 6. 7. 17:41
  • form 두번째 예제 선생님 코드로 작성해 보기

유효성 체크 순서

  1. 값 없을때/space 입력시
  2. 형식체크

필수항목 제어(빈값 검사)

HTML

  • html 문서에서 필수항목 제어하기 위해서는 required 또는 required="required"으로 필수항목을 제어하는 이 속성은 반드시 폼태그 내 submit 버튼일 때 제어된다.
<input type="text" name="name" id="name" required autofocus />

Javascript

if (document.getElementById("user_name").value.replace(/\s/g,"")=="") {
        alert("이름을 입력해 주세요.");
        frm.user_name.value="";
        frm.user_name.focus();
        return false;
}

Jquery

let userid = $("input[name='user_id']").val();

if (userid.replace(/\s/g,"")=="") {
    alert("아이디를 입력하세요.");
    $("input[name='user_id']").val("");
    $("input[name='user_id']").focus();
    return false;
}

Jquery - attr 와 prop 차이

  • attr("속성","값) : 속성에 값을 설정할때 사용(attribute), 반드시 필요한 속성
  • prop("속성","값") : 속성에 값을 설정할때 사용(property), 값이 있을 수도 있고 없을 수도 있는 속성