Vue 3 실전: 실시간 폼 검증

<div id='form' style='font-family:monospace;padding:16px;background:#0d1117;color:#e8e8e8'>
<div id='form-out'></div>
</div>
<script src='https://unpkg.com/vue@3/dist/vue.global.js'></script>
<script>
const{createApp,ref,computed}=Vue;
createApp({
  setup(){
    const name=ref('');const email=ref('');const pw=ref('');
    const touched=ref({name:false,email:false,pw:false});
    const errors=computed(()=>({
      name:!name.value?'이름 필수':name.value.length<2?'2자 이상':'',
      email:!email.value?'이메일 필수':!/^[^s@]+@[^s@]+.[^s@]+$/.test(email.value)?'형식 오류':'',
      pw:!pw.value?'비밀번호 필수':pw.value.length<8?'8자 이상':'',
    }));
    const isValid=computed(()=>!Object.values(errors.value).some(Boolean));
    const submit=()=>isValid.value&&alert('SYSTEM REGISTRATION COMPLETE');
    return{name,email,pw,touched,errors,isValid,submit};
  },
  template:`<div>
    <div v-for='[field,label,type] in [["name","이름","text"],["email","이메일","email"],["pw","비밀번호","password"]]' :key='field' style='margin-bottom:12px;'>
      <input :type='type' v-model='this[field]' @blur='touched[field]=true' :placeholder='label' style='background:#111;color:#e8e8e8;border:1px solid;padding:8px;font-size:11px;font-family:monospace;width:100%;box-sizing:border-box;' :style='{borderColor:touched[field]&&errors[field]?"#10b981":"#333"}'/>
      <div v-if='touched[field]&&errors[field]' style='color:#10b981;font-size:10px;margin-top:2px;'>{{errors[field]}}</div>
    </div>
    <button @click='submit' :disabled='!isValid' :style='{background:isValid?"#10b981":"#1a1a1a",color:isValid?"#080808":"#333",cursor:isValid?"pointer":"not-allowed"}' style='border:none;padding:10px;width:100%;font-family:monospace;font-size:11px;letter-spacing:0.1em;'>
      {{isValid?'REGISTER':'VALIDATION REQUIRED'}}
    </button>
  </div>`
}).mount('#form-out');
</script>