<template>
  <div class="ui--content-wrapper">
    <!--Contents Area -->
    <!-- Form Area -->
    <div class="ui--form-container">
      <h4 class="mb-5">Regex Input</h4>
      <div class="mb-3">
        <label>숫자만 <span class="ui--text-required">/^[0-9]*$/g</span></label>
        <sdl-regex-input class="form-control" :regExp="/^[0-9]*$/g" placeholder="숫자만 입력가능합니다." />
      </div>
      <div class="mb-3">
        <label>영문자만 <span class="ui--text-required">/^[a-zA-Z]*$/g</span></label>
        <sdl-regex-input class="form-control" :regExp="/^[a-zA-Z]*$/g" placeholder="영문자만 입력가능합니다." />
      </div>
      <div class="mb-3">
        <label>한글과 공백 <span class="ui--text-required">/^[ㄱ-ㅎ가-힣\s]*$/g</span></label>
        <sdl-regex-input
          class="form-control"
          :regExp="/^[ㄱ-ㅎ가-힣\s]*$/g"
          placeholder="한글과 공백만 입력가능합니다."
        />
      </div>

      <div class="alert alert-warning" role="alert">
        &#128209; TIP 이메일이나 masking 관련 정보는
        <a href="https://github.com/text-mask/text-mask" target="_blank">https://github.com/text-mask/text-mask</a> 참조
      </div>
    </div>
    <!--//Contents Area -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      isEmailValidation: false,
    };
  },
};
</script>
<style scoped></style>
