如何使用 Vuelidate 验证 <select> 输入

Question

您好，我正在尝试使用 Vuelidate 验证输入，我在其他帖子中看到过，但这只是关于文本输入的问题，但我需要选择输入验证，我的代码是：

\n

网页代码：

\n

<div class="form-group">\n   <label for="exampleInputEmail1">Tipo de Caja</label>\n   <select class="form-control" \n   v-model="$v.form.cashier_type_id.$model"\n   :class="{\n       'is-valid':!$v.form.cashier_type_id.$error && $v.form.serie.$dirty,\n       'is-invalid':$v.form.cashier_type_id.$error && $v.form.serie.$dirty\n   }"\n   id="exampleFormControlSelect1">\n   <option value="">- Seleccione -</option>\n   <option value="2">Autom\xc3\xa1tica</option>\n   <option value="3">Electr\xc3\xb3nica</option>\n   <option value="1">Manual</option>\n  </select>\n</div>\n

\n

我的Vue代码：

\n

      validations: {\n        form: {\n            name: {\n                required,\n                minLength: minLength(2)\n            },\n            serie: {\n                required,\n                minLength: minLength(2)\n            },\n            cashier_type_id: {\n                required\n            }\n        }\n    }\n

\n

我添加了必需的，但问题是当我选择该选项时它不会将颜色更改为绿色，所以我想知道如何进行验证？

\n

谢谢

\n

Answer 1

这是所需选择的快速而简单的示例。

Vue.use(window.vuelidate.default)
const { required, minLength } = window.validators

new Vue({
    el: "#app",
  data: {
    text: '',
    myselect: ''
  },
  validations: {
    text: {
        required,
      minLength: minLength(5)
    },
    myselect: {
    required
    }
  },
  methods: {
    status(validation) {
        return {
        error: validation.$error,
        dirty: validation.$dirty
      }
    }
  }
})

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;
}

.error:focus {
  outline-color: #F99;
}

<script src="https://unpkg.com/vuelidate@0.7.6/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate@0.7.6/dist/vuelidate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="$v.text.$model" :class="status($v.text)">
  <select v-model="$v.myselect.$model" name="myselect" id="" :class="status($v.myselect)">
    <option selected value>Select One</option>
    <option value="1">Example 1</option>
    <option value="2">Example 2</option>
  </select>

  <pre>{{ $v }}</pre>
</div>