VeeValidate 'required

本文介绍了VeeValidate 'required_if:' 规则的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我使用了文档中的语法规则 required_if:vee-validate required_if 规则但它没有工作.

有人能指出我正确的方向吗?我需要这个简单的 required_if 规则才能继续工作.

JSfiddle:

Vue.use(VeeValidate)新的 Vue({el: '#app',数据() {返回 {第一的: ''，最后的: ''，}},方法: {提交(){this.$validator.validateAll().then(结果 => {控制台日志(这个)警报(结果)})}}})

@import url('https://unpkg/semantic-ui-css@2.2.9/semantic.css');跨度错误{颜色:#9F3A38；}

<script src="https://cdnjs.cloudflare/ajax/libs/vue/2.5.17/vue.js"></script><script src="https://unpkg/vee-validate@2.0.0-beta.25"></script><div id="应用程序"><form class="ui form" @submit.prevent="onSubmit"><div class="field" :class="{error: errors.has('first')}"><label>名称</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 class="field" :class="{error: errors.has('last')}"><label>电子邮件</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>
<button type="submit" class="ui submit button">Submit</button></表单>

解决方案

@Randy Casburn 指出了我的正确 -谢谢大佬！

问题出在版本上.我在这个例子下工作:我的代码和盒子

希望对某人有所帮助;-)

I have used syntax rule required_if from docs: vee-validate required_if rule and it doesn't work.

Can someone point me to the right direction? I need this simple required_if rule to work before I go further.

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/semantic-ui-css@2.2.9/semantic.css');
span.error {
  color: #9F3A38;
}

<script src="https://cdnjs.cloudflare/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg/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>

解决方案

@Randy Casburn pointed me right - thanks man!

The trouble was with versions. I got it working under this example: my codesandbox

Hope it helps somebody ;-)

这篇关于VeeValidate 'required_if:' 规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！