Vue.js에서의 이메일 검증

Vue.js에서의 이메일 검증

나는 Vue와 24시간 동안 일했으니, 무지를 용서해 주세요.여기저기 찾아다니며 가까워지고 있지만, 저의 이해 부족과 기본 원칙이 분명합니다.

버튼을 클릭하면 열리는 모달 기능이 있습니다.이 모달은 전자 메일 입력이 포함된 양식을 표시합니다.그럭저럭 모달은 작동했지만, 이메일을 잘못 입력해도 아무 일도 일어나지 않습니다.

컴포넌트 코드는 다음과 같습니다.

<template>
<div>
  <!-- Aside -->
  <aside class="aside">
    <button class="aside__btn button" @click="showModal = true">
      Send Me The Tips
    </button>
  </aside>

  <!-- Modal -->
  <div class="modal" v-if="showModal">
    <div class="modal-container">
      <a href="#" class="close" @click="showModal = false"></a>

      <p class="modal__steps">Step 1 of 2</p>
      
      <div class="relative">
        <hr class="modal__divider" />
      </div>

      <div class="modal__heading-container">
         <p class="modal__heading">Email Your Eail To Get <span class="modal__heading-span">Free</span>
         </p>
         <p class="modal__heading">iPhone Photography Email Tips:</p>
      </div>

      <form> 
        <input for="email" type="email" placeholder="Please enter your email here" required v-model="email">
        <span class="floating-placeholder" v-if="msg.email">{{msg.email}}</span>
        <!-- <span class="floating-placeholder">Please enter your email here</span> -->
        <button class="modal__button button">Send Me The Tips</button>
      </form>
    </div>
  </div>
  </div>
</template>

<script>
  export default ({
    data () {
      return {
        showModal: false,
        email: '',
        msg: [],
      }
    }, 
    watch: {
      email(value) {
        // binding this to the data value in the email input
        this.email = value;
        this.validateEmail(value);
      }
    },
    methods: {
      validateEmail(value){
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value))
    {
      this.msg['email'] = '';
    } else{
      this.msg['email'] = 'Please enter a valid email address';
    } 
      }
    }
  })
</script>

그게 중요한 거라면 라라벨을 쓸 거야

시계를 삭제하고 이벤트청취자를 추가합니다.

<input for="email" type="email" placeholder="Please enter your email here" required v-model="email" @blur="validateEmail" >

validate Email 메서드를 다음과 같이 업데이트합니다.

validateEmail() {
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email)) {
        this.msg['email'] = 'Please enter a valid email address';
    } else {
        this.msg['email'] = '';
    }
}

이벤트 청취자를 변경하도록 할 수도 있습니다.@change니즈에 더 잘 맞는다면 말이야

폼 검증을 처리하는 Vuelidate도 확인할 수 있습니다.예를 들어 다음과 같습니다.

<template>
    <div>
        <input
            class="rounded shadow-sm border border-warning"
            v-model="form.email"
            placeholder="E-mail"
            @input="$v.form.email.$touch"
            :state="$v.form.email.$dirty ? !$v.form.email.$error : null" />
    </div>
</template>

<script>
import {required, email} from "vuelidate/lib/validators";
  
export default {
  data() {
    return {
      form: {
       
        email: null,
      }
    };
  },
  validations: {
    form: {
      email: {
        required,
        email
      }
    }
  },
};
</script>

언급URL : https://stackoverflow.com/questions/62824483/email-validation-in-vue-js