[Vue.js] 암호와 암호를 검사하는 양식의 유효성 검사

하고 싶은 일


제목에서 보듯이 이렇게 무엇을 비교해 보자
일반적인 양식 검증
전제로 vevalidate 플러그인을 사용합니다.
앞으로 자주 쓸 거니까 간단하게 필기하도록 하겠습니다.

해본 일

 <the-heading02 :title="'パスワード再発行'" />
    <div class="c-input-text__wrap">
      <div class="input__wrap">
        <base-input
          ref="email"
          v-model="email"
          v-validate="'required|email|max:256'"
          :placeholder="'メールアドレス'"
          name="email"
          data-vv-as="このメールアドレス"
          class="first_input"
          :class="{ 'has-error': errors.has('email') }"
        />
        <base-input
          v-model="re_email"
          v-validate="'required|email|max:256|confirmed:email'"
          :placeholder="'メールアドレス確認用'"
          name="re_email"
          data-vv-as="このメールアドレス"
          class="second_input"
          :class="{ 'has-error': errors.has('re_email') }"
        />
      </div>

      <!-- ERRORS -->
      <div v-show="errors.any()" class="validate__area">
        <div v-if="errors.has('email')">
          <p class="alert-danger">
            {{ errors.first('email') }}
          </p>
        </div>
        <div v-if="errors.has('re_email')">
          <p class="alert-danger">
            {{ errors.first('re_email') }}
          </p>
        </div>
      </div>

좋은 웹페이지 즐겨찾기