programing

VeValidate 'required_if:' 규칙 확인

yoursource 2022. 8. 29. 23:20
반응형

VeValidate 'required_if:' 규칙 확인

구문 규칙을 사용했습니다.required_iffrom docs: vee-module required_if 규칙과 동작하지 않는 경우.

누가 저를 올바른 방향으로 안내해주실 수 있나요?다음 단계로 넘어가기 전에 이 간단한 필수 규칙이 필요합니다.

JSfiddle:

Vue.use(VeeValidate)

new Vue({
  el: '#app',
  data() {
    return {
      first: '',
      last: '',
    }
  },
  methods: {
    onSubmit() {
      this.$validator.validateAll()
        .then(result => {
          console.log(this)
          alert(result)
        })
    }
  }
})
@import url('https://unpkg.com/semantic-ui-css@2.2.9/semantic.css');
span.error {
  color: #9F3A38;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vee-validate@2.0.0-beta.25"></script>

<div id="app">
  <form class="ui form" @submit.prevent="onSubmit">
    <div class="field" :class="{error: errors.has('first')}">
      <label>Name</label>
      <input ref="firstName" type="text" name="first" placeholder="first" v-model="first">
      <span class="error" v-if="errors.has('first')">{{errors.first('first')}}</span>
    </div>
    <div class="field" :class="{error: errors.has('last')}">
      <label>Email</label>
      <input type="text" name="last" placeholder="last" v-validate="'required_if:firstName,test'" v-model="last">
      <span class="error" v-if="errors.has('last')">{{errors.first('last')}}</span>
    </div>
    <button type="submit" class="ui submit button">Submit</button>
  </form>
</div>

@랜디 캐스번은 나를 똑바로 가리켰다.-감사합니다!

문제는 버전에 있었다.이 예에서 사용할 수 있습니다: 코드박스

누군가에게 도움이 되었으면 좋겠다;-)

언급URL : https://stackoverflow.com/questions/55143852/veevalidate-required-if-rule

반응형