Vuelidate复选框验证

Posted 2023-02-22

【中文标题】Vuelidate复选框验证

【英文标题】：Vuelidate check box validation

【发布时间】：2018-12-14 11:32:42

【问题描述】：

我正在使用 Vue.js，我是新手。我目前正在验证。我曾使用 vuelidate 作为我的验证库。我已经成功完成了表单验证，但是当我不得不检查复选框的验证时出现了问题。

如何检查复选框的验证？另外，我使用 bootstrapvue 来显示复选框。

   <b-col lg="6" md="6" sm="6">
      <label>Bus Route</label>
      <b-form-group>
        <b-form-checkbox v-for="route in busRouteList"
                         v-model.trim="selectedRoute"
                         v-bind:value="route.value"
                         v-bind:unchecked-value="$v.selectedRoute.$touch()">
          route.text</b-form-checkbox>
      </b-form-group>
      <div class="form-group__message" v-if="$v.selectedRoute.error && !$v.selectedRoute.required">
        Field is required
      </div>
    </b-col>

validations: 

      selectedRoute: 
        required
      ,

【问题讨论】：

您可以发布您的数据（）吗？你是如何初始化 selectedRoute 的？

【参考方案1】：

这对我有用。 基本上，您需要将其值 'sameAs' 设为布尔值 'true'，这意味着复选框已被选中。 所以，即：

privacyCheck: 
  sameAs: sameAs(true)
,

【参考方案2】：

`

validations: 
    terms: 
        checked: (val) => return val;
    

`

【参考方案3】：

使用vuelidate-next（支持 Vue 2 和 Vue 3）就像使用 sameAs 内置验证器和 true 作为直接参数一样简单。例如，在 setup 方法中使用时：

const termsAccepted = ref(false)

const v$ = useVuelidate(
   termsAccepted:  sameAs: sameAs(true)  ,
   termsAccepted 
)

return  v$, termsAccepted 

【参考方案4】：

因为 false 也是有效值，所以你应该尝试使用sameAs

import  sameAs  from 'vuelidate/lib/validators'

terms: 
   sameAs: sameAs( () => true ) 

【讨论】：

差不多，更像：terms: sameAs: val => val === true .

@zenw0lf 您的建议不起作用，因为根据文档：“当作为函数提供时，它接收正在验证的模型作为参数”而不是值。所以它更像terms: sameAs: vueModel => vueModel.terms === true 无论如何，帖子所有者提供的解决方案是最好的。

@icosmin 阅读关于自定义验证器的部分。有用。我已经使用并测试了该验证器以要求用户接受 ToS 等。vuelidate.js.org/#custom-validators

【参考方案5】：

我希望这个小例子能帮助您了解如何验证复选框。 您必须检查输入何时更改。我建议您使用@change。

在模板中

<div class="input">
  <label for="country">Country</label>
  <select id="country" v-model="country">
    <option value="usa">USA</option>
    <option value="india">India</option>
    <option value="uk">UK</option>
    <option value="germany">Germany</option>
  </select>
</div>
<div class="input inline" :class="invalid: $v.terms.$invalid">
  <input type="checkbox" id="terms" v-model="terms" @change="$v.terms.$touch()">
  <label for="terms">Accept Terms of Use</label>
</div>

因此，如果所选国家/地区为德国，则条款将有效。

validations: 
  terms: 
    checked(val) 
      return this.country === "germany" ? true : val;
    
  

当然是国家，术语在 data() 中定义：

country:'',
terms: false

【参考方案6】：

你应该绑定@change方法：

 <b-form-checkbox v-for="route in busRouteList"
                         v-model.trim="selectedRoute"
                         v-bind:value="route.value"
                         @change="$v.selectedRoute.$touch()">

你可能想使用自定义函数：

selectedRoute: 
  checked (val) 
    return val
  
,