审核最小值期权

时间:2018-07-16 07:41:09

标签: vuejs2 vuelidate

我想验证一个可选的“股票”价值。我正在使用vuelidate(https://monterail.github.io/vuelidate/

如果其他值(“价格”)大于0,则“库存”值必须大于0

如果未定义“价格”值,则必须禁用股票价值验证器

价格是输入值(十进制数),股票是滑块(数字)

[编辑]

代码示例

<template>
  <form @submit.prevent="submit" class="offer-form">
    <q-field label="Prix initial" helper="Indiquer le prix initial de l'offre" :error="hasItemError('price')" :error-label="itemErrorLabel('price')">
      <q-input type="number" color="input" @blur="$v.item.price.$touch()" v-model="item.price" />
    </q-field>                 
    <q-field label="Stock" helper="Indiquer le nombre de stock" :error="hasItemError('stock')" :error-label="itemErrorLabel('stock')">
      <q-slider color="input" label-always  label :step=1 :min="0" @blur="$v.item.stock.$touch()" :max="50" v-model="item.stock"/>
    </q-field>
    <q-btn
        icon="fas fa-check"
        label="Valider"
        color="green"
        @click="submit"
    />
  </form>
</template>

<script>
import { required, requiredIf, decimal, minValue } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      item: {
        id: null,
        title: '',
        description: '',
        price: null,
        reductionPercentage: 15,
        stock: 0,
        startDate: new Date(),
        endDate: null,
        product: null,
        shop: null,
        images: []
      },
  },
  validations: {
    item: {
      title: { required },
      startDate: { required },
      endDate: { required },
      price: { decimal },
      reductionPercentage: {
        requiredIf: requiredIf((vueInstance) => {
          return vueInstance.price > 0
        }),
        minValue: minValue(15)
      },
      stock: {
        requiredIf: requiredIf((vueInstance) => {
          return vueInstance.price > 0
        }),

        // minValue ???
      }
    }
  },
  methods: {
    submit () {
      this.onSubmit = true
      if (this.isValidate()) {
        // Validation ok
      }
      this.onSubmit = false
    },
    isValidate () {
      this.$v.item.$touch()
      if (this.$v.item.$error) {
        this.$q.notify({message: 'Vérifiez les champs en erreur', position: 'center'})
        return false
      }
      return true
    }
  }
}

我对此进行了测试,但不可行=>

minValue: minValue((vueInstance) => {
   return vueInstance.price > 0 ? vueInstance.stock > 0 : true
})

我该怎么做?

谢谢

3 个答案:

答案 0 :(得分:0)

您没有提供很多代码,所以很难理解您的目标,但是我会尽力,请告诉我是否正是您想要的:)

股票验证者是复选框或函数还是?

var app = new Vue({
  el: '#app',
  data: {
    price: 0,
    stock: 0,
  },
  
  computed: {
  stockvalidator: function()
  {
    if(this.price > 0 && this.stock > 0) return true
    else if(this.price > 0 && this.stock <= 0) return false
    else return false 
    
    
    
  }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">


  <input type="number" v-model="price">
  Price: {{price}}
  
  <input type="number" v-model="stock">
  Stock: {{stock}}
  
  <br>
  
  <input :disabled="!stockvalidator" type="checkbox"> Stock Validator is {{stockvalidator}}
  
</div>

答案 1 :(得分:0)

不知道您是否还在为此苦苦挣扎,还是有人遇到同样的问题,但这是我的两分钱。

class FunAllowedinput
{
    public string FunctionName{get;set;}
}
public JsonResult FunAllowed(FunAllowedInput input)
{            
    var records = db.Functions.Where(x => x.FunctionName == input.FunctionName).ToList();
    string result = "False";

    if (records.Count > 0)
        result = "True";

    return Json(records, JsonRequestBehavior.AllowGet);
}

干杯!

答案 2 :(得分:0)

我认为你可以这样做:

stock: {
    requiredIf: requiredIf(() => {
      return this.price > 0 || this.price
    }),
    minvalue: helpers.withMessage(
      "The minimum value for the stock is 0",
      helpers.withAsync(async value => {
        let retvalue;
        if(this.price > 0 && value > 0){
          retvalue = true;
        }
        else if (this.price > 0 && value <= 0){
          retvalue = false;
        }
        else{
          retvalue = true;
        }
        return retvalue;
      })
    )
  }

记住从 vuelidate 导入“helpers”。

我建议您使用自定义验证器制作自己的文件,然后您可以在项目的每个地方使用它。类似于 utils/customValidators.js。