Notice
Recent Posts
Recent Comments
Link
Β«   2025/07   Β»
일 μ›” ν™” 수 λͺ© 금 ν† 
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Outputor

μ •κ·œμ‹ λ³Έλ¬Έ

πŸ’» μžλ°”μŠ€ν¬λ¦½νŠΈ πŸ”»/JavaScript μž…λ¬Έ

μ •κ·œμ‹

output7 2022. 1. 26. 19:44

μ •κ·œμ‹

 

μ •κ·œ ν‘œν˜„μ‹ - JavaScript | MDN

μ •κ·œ ν‘œν˜„μ‹μ€ λ¬Έμžμ—΄μ— λ‚˜νƒ€λŠ” νŠΉμ • 문자 μ‘°ν•©κ³Ό λŒ€μ‘μ‹œν‚€κΈ° μœ„ν•΄ μ‚¬μš©λ˜λŠ” νŒ¨ν„΄μž…λ‹ˆλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ, μ •κ·œ ν‘œν˜„μ‹ λ˜ν•œ κ°μ²΄μž…λ‹ˆλ‹€.  이 νŒ¨ν„΄λ“€μ€ RegExp의 exec λ©”μ†Œλ“œμ™€ test λ©”μ†Œλ“œ  ,

developer.mozilla.org

 

EX)

 

  1. /abc/ ➑ μ–΄λ–€ λ¬Έμžμ— 'abc'λΌλŠ” 단어가 μžˆλŠ”μ§€ 물어보고 싢을 λ•Œ 쓰면됨

  2. test ν•¨μˆ˜ ➑ μ •κ·œμ‹μ— 뢙일 수 μžˆλŠ” ν•¨μˆ˜λ‘œ νŒŒλΌλ―Έν„°μ— μ •κ·œμ‹μœΌλ‘œ ν…ŒμŠ€νŠΈν•΄λ³Ό κΈ€μžλ₯Ό λ„£μ–΄μ£Όλ©΄ 됨
     β–« /abc/.test('abcdef')

  3. /t/ 처럼 κΈ€μžλ₯Ό κ·ΈλŒ€λ‘œ 적으면 tλΌλŠ” κΈ€μžκ°€ μžˆλŠ”μ§€ μ—†λŠ”μ§€ λ¬Όμ–΄λ³Ό 수 있음

  4. /[A-D]/ ➑ λŒ€κ΄„ν˜Έμ™€ λŒ€μ‰¬ 기호λ₯Ό μ‚¬μš©ν•˜λ©΄ AλΆ€ν„° DκΉŒμ§€μ˜ κΈ€μžκ°€ μžˆλŠ”μ§€ λ¬Όμ–΄λ³Ό 수 있음

  5. /[κ°€-ν•˜]/ ➑ ν•œκΈ€λ„ κ°€λŠ₯함

  6. /\S/ ➑ μ—­μŠ¬λž˜μ‹œ(λ˜λŠ” μ›ν™”κΈ°ν˜Έ)와 SλΌλŠ” κΈ€μžλ₯Ό 뢙이면 λͺ¨λ“  문자λ₯Ό λœ»ν•˜κ³  ν•œκΈ€μžλ§Œ μ°Ύμ•„μ€Œ (특수기호 포함, λŒ€λ¬ΈμžS)

  7. /\S+/ ➑ + 기호λ₯Ό 뢙이면 뒀에 μ˜€λŠ” κΈ€μžλ“€λ„ \S와 μΌμΉ˜ν•˜λ©΄ ν•¨κ»˜ μ°Ύμ•„λ‹¬λΌλŠ” λœ»μž„
  8. \. ➑ λ§ˆμΉ¨ν‘œλŠ” μ •κ·œμ‹μ—μ„œ νŠΉμˆ˜ν•œ 문법이기 λ•Œλ¬Έμ— 문법을 μ“°λŠ”κ²Œ μ•„λ‹ˆλΌ μ§„μ§œ λ§ˆμΉ¨ν‘œλ₯Ό μ°Ύμ•„λ‹¬λΌλΌλŠ” 의미둜 μ“°λ €λ©΄ μ—­μŠ¬λž˜μ‹œλ₯Ό μ•žμ— λΆ™μ—¬μ•Ό 함

 

- [X] μ΄λ©”μΌν˜•μ‹κ³Ό 곡백 검사 λ™μ‹œμ— ν•˜κΈ°
- [X] λΉ„λ°€λ²ˆν˜Έμ— λŒ€λ¬Έμž κ²€μ‚¬ν•˜κΈ°

 

 

 

더보기

HTML

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./regularExpressionEmail.js" defer></script>
    <style>
      .btn {
        outline: none;
        padding: 8px 30px;
        background: #000;
        color: #fff;
        font-weight: bold;
        border: none;
        border-radius: 5px;
        margin-top: 20px;
        cursor: pointer;
        transition: all 0.4s;
      }
      .btn:hover {
        transform: scale(0.98);
      }
    </style>
  </head>
  <body>
    <form>
      <div style="margin-bottom: 10px">
        <label for="email" style="width: 70px; display: inline-block">이메일</label>
        <input type="email" id="email" />
        <span class="emailError" style="color: red"></span>
      </div>
      <div>
        <label for="password" style="width: 70px; display: inline-block">λΉ„λ°€λ²ˆν˜Έ</label>
        <input type="password" id="password" />
        <span class="passwordError" style="color: blue"></span>
      </div>
      <button type="submit" class="btn">둜그인</button>
    </form>
  </body>
</html>

 

더보기

JS

 

const $ = (selector) => document.querySelector(selector);
let email = '';
let password = '';

$('#email').addEventListener('input', (e) => {
  email = e.target.value;
});

$('#password').addEventListener('keydown', (e) => {
  password = e.target.value;
});

$('.btn').addEventListener('click', (e) => {
  if (!/\S+@\S+\.\S+/.test(email) || /\s/.test(email)) {
    e.preventDefault();
    $('.emailError').textContent = '이메일 ν˜•μ‹μ— 맞게 μž…λ ₯ν•˜μ„Έμš”(곡백X)';
  } else {
    $('.emailError').textContent = '';
  }

  if (!/[A-Z]/.test(password)) {
    e.preventDefault();
    return ($('.passwordError').textContent = 'λΉ„λ°€λ²ˆν˜Έμ— λŒ€λ¬Έμžλ₯Ό μΆ”κ°€ν•΄μ£Όμ„Έμš”');
  } else {
    $('.passwordError').textContent = '';
  }
});

'πŸ’» μžλ°”μŠ€ν¬λ¦½νŠΈ πŸ”» > JavaScript μž…λ¬Έ' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

369κ²Œμž„  (0) 2022.01.25
폼 전솑할 λ•Œ 값이 곡백인 경우 전솑을 λ§‰λŠ” κΈ°λŠ₯  (0) 2022.01.12
UI λ§Œλ“œλŠ” 3가지 법칙  (0) 2022.01.12
'πŸ’» μžλ°”μŠ€ν¬λ¦½νŠΈ πŸ”»/JavaScript μž…λ¬Έ' Related Articles more