Vue js vuelidate 사용자 지정 검증

Vue js vuelidate 사용자 지정 검증

닫혔어. 이 질문은 좀 더 자세히 설명해야 합니다.초점을 맞춥니다.현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?이 게시물을 편집하여 하나의 문제에 초점을 맞추도록 질문을 업데이트하십시오.

3년 전에 문을 닫았어요

이 질문을 개선하다

기본적인 재고 관리 시스템을 만들고 있습니다.유효성을 확인하려는 송장금액에서 사용자가 입력하는 가격은 최소 판매가격 이상이어야 합니다.검증에는 vuelidate 패키지를 사용합니다.

vuelidate를 사용하여 이를 실현하는 방법

를 사용할 수 있습니다.custom validator불렀다price_greater다음과 같습니다.

   const price_greater = (value, vm) => (value >= vm.min_price);

에 추가합니다.validations속성:

validations: {
    user_price: {
         required,
         price_greater
       }
}

다음 예를 확인합니다.

Vue.use(window.vuelidate.default)
const {
  required
} = window.validators;
const price_greater =
  (value, vm) => (value >= vm.min_price);
new Vue({
  el: "#app",
  data() {
    return {
      min_price: 455,
      user_price: 0,
      respectMinPrice: false
    }
  },
  methods: {
    status(validation) {
      return {
        error: validation.$error,
        dirty: validation.$dirty
      }
    }
  },

  validations: {

    user_price: {
      required,
      price_greater
    }
  }
})

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.dirty {
  border-color: #5A5;
  background: #EFE;
}

.dirty:focus {
  outline-color: #8E8;
}

.error {
  border-color: red;
  background: #FDD;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>



<div id="app">
  <input v-model="$v.user_price.$model" placeholder="user_price" type="number" :class="status($v.user_price)">

  <p class="error" v-show="respectMinPrice">user price must be greater or equal to min selling price</p>
</div>

단일 파일 구성 요소를 사용하는 경우 이 솔루션을 확인하십시오.

언급URL : https://stackoverflow.com/questions/52917019/vue-js-vuelidate-custom-validation