[JavaScript] Validation check μ˜ˆμ‹œ

κΉ€μœ€μ„­Β·2023λ…„ 9μ›” 5일
JavaScript예제

HTML&CSS&JAVASCRIPT

λͺ©λ‘ 보기
9/10
post-thumbnail

νšŒμ›κ°€μž… μ–‘μ‹μœΌλ‘œ λ³΄λŠ” validation check

πŸ•œ κ²°κ³Ό

πŸ’‘ μ˜ˆμ‹œ

 <head>
    <style type="text/css">
      /** ν•˜λ‚˜μ˜ μž…λ ₯ μ˜μ—­μ„ μ •μ˜ν•˜λŠ” <div>νƒœκ·Έ */
      .input_group {
        height: 42px;
        border-bottom: 1px dotted #ccc;
        font: 1em/40px '돋움', 'Helvetica';
      }

      /** μž…λ ₯μ–‘μ‹μ˜ 제λͺ©μ„ λ³Ό 수 있게 ν•˜λŠ” νƒœκ·Έ */
      .input_group > label {
        width: 80px; display: inline-block;
      }
  	</style>

  </head>

  <body>
    <form name="form1" onsubmit="doSubmit(); return false;">
      <fieldset>
      	<legend>νšŒμ›κ°€μž…</legend>
  		<div class="input_group first">
    		<label>이름</label>
  			<input type="text" name="user_name" />
    	</div>
  		<div class="input_group">
    		<label>성별</label>
  			<label><input type="radio" name="gender" value="M"> λ‚¨μž</label>
  			<label><input type="radio" name="gender" value="F"> μ—¬μž</label>
  		</div>
  		<div class="input_group">
    		<label>직업</label>
  			<select name="job">
    			<option>----- μ„ νƒν•˜μ„Έμš” -----</option>
  				<option value="dev">ν”„λ‘œκ·Έλž˜λ¨Έ</option>
  				<option value="pub">퍼블리셔</option>
  			</select>
  		</div>
  		<div class="input_group">
    		<label>μ·¨λ―Έ</label>
  			<label><input type="checkbox" value="좕ꡬ" name="hobby"> 좕ꡬ</label>
  			<label><input type="checkbox" value="농ꡬ" name="hobby"> 농ꡬ</label>
  			<label><input type="checkbox" value="야ꡬ" name="hobby"> 야ꡬ</label>
  		</div>
  		<div class="input_group">
    		<label>&nbsp;</label>
  			<input type="submit" name="button" id="button" value="제좜" />
    		<input type="button" name="button2" value="리셋" />
     	</div>
  	</fieldset>
  </form>

  <script>
      function doSubmit(){
      // λ°˜λ³΅μš”μ†Œ = λ³€μˆ˜λ‘œ λ°›κΈ°
      let frm = document.form1;
      //validation check
      //text μš”μ†Œμ— μž…λ ₯μ—¬λΆ€ 검사
      if(!frm.user_name.value){
        // 값이 없을 λ•Œ
        alert('이름을 μž…λ ₯ν•΄μ£Όμ„Έμš”')
        document.form1.user_name.focus(); 
        // μ—¬κΈ°κΉŒμ§€ ν–ˆμœΌλ©΄ 이 λ°‘μœΌλ‘œλŠ” μ§„ν–‰ν•˜μ§€λ§ˆ
        return false;
      }

      // λΌλ””μ˜€ λ²„νŠΌ μž…λ ₯ μ—¬λΆ€ 검사
      if(!frm.gender[0].checked && !frm.gender[1].checked){
        alert('성별을 μ„ νƒν•΄μ£Όμ„Έμš”')
        frm.gender[0].focus();
        return false;
      }

      // select μš”μ†Œμ— λŒ€ν•œ 선택 μœ„μΉ˜ 검사
      if(frm.job.selectedIndex < 1){
        alert('직업을 μ„ νƒν•΄μ£Όμ„Έμš”')
        frm.job.focus();
        return false;
      }

      // μ²΄ν¬λ°•μŠ€ 선택 μ—¬λΆ€ 검사
      // chkκ°€ trueκ°€ 되면 ν•˜λ‚˜λΌλ„ 선택 λΌμžˆλ‹€λŠ” 뜻
      let chk = false; 

      for(let i = 0 ; i < frm.hobby.length ; i++){
        if (frm.hobby[i].checked){
          chk = true;
          break;
        }
      }

      if(!chk){
        alert("μ·¨λ―Έλ₯Ό 선택해 μ£Όμ„Έμš”");
        frm.hobby[0].focus();
        return false;
      }

      if(confirm("μž…λ ₯ν•˜μ‹  λ‚΄μš©μ΄ λ§žμŠ΅λ‹ˆκΉŒ?")){
        frm.submit();
      }
    }

  </script>
</body>
profile
κΉ€μœ€μ„­
KIC캠퍼슀 ꡐ윑수료 (2023.01~2023.06) - JAVA, JSP, Springboot, DBeaver
이전 포슀트

[JavaScript] JQuery ν•¨μˆ˜ β‘‘

λ‹€μŒ 포슀트

[JavaScript] JavaScript 예제

0개의 λŒ“κΈ€