javascript Vuelidate：在点击时验证，而不是在触摸字段时

Vuelidate: validate on click, not when field touched

提问by nemezis

I'm kinda new to vuelidate, and everything works fine, except I have no clue how to run validation only when the button Submithas been clicked. Right now it marks touched field red when you start providing any input and I'd like it to wait with that, till user wants to submit filled form.

我对 vuelidate 有点陌生，一切正常，除了我不知道如何仅在Submit单击按钮时运行验证。现在，当您开始提供任何输入时，它会将触摸字段标记为红色，我希望它等待，直到用户想要提交填写的表单。

Here's what I've got up to now:

这是我现在所做的：

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

new Vue({
 el: "#app",
  data: {
   user: {
     login: '',
      password: '',
      repeatedPassword: ''
    }
  },
  validations: {
   user: {
     login: {
       required,
        minLength: minLength(5)
      },
      password: {
       required,
        minLength: minLength(8)
      },
      repeatedPassword: {
       required,
        sameAs: sameAs('password')
      }
    }
  }
})

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

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

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

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

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

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
`<div id="app">

  <input type="text" placeholder="login"
    v-model="user.login"
    v-on:input="$v.user.login.$touch"
    v-bind:class="{error: $v.user.login.$error, valid: $v.user.login.$dirty && !$v.user.login.$invalid}">
  <br/>    
  <input type="password" placeholder="password"
    v-model="user.password"
    v-on:input="$v.user.password.$touch"
    v-bind:class="{error: $v.user.password.$error, valid: $v.user.password.$dirty && !$v.user.password.$invalid}">
  <br/>  
  <input type="password" placeholder="repeat password"
    v-model="user.repeatedPassword"
    v-on:input="$v.user.repeatedPassword.$touch"
    v-bind:class="{error: $v.user.repeatedPassword.$error, valid: $v.user.repeatedPassword.$dirty && !$v.user.repeatedPassword.$invalid}"
  >
  <button :disabled="$v.user.$error" @click="$v.user.$touch()">
    Submit!
  </button>
</div>`

采纳答案by retrograde

I could never really get used to the Vuelidate way of doing things, but, generally speaking, it works like this: https://monterail.github.io/vuelidate/#sub-basic-form

我永远无法真正习惯 Vuelidate 的做事方式，但一般来说，它是这样工作的：https://monterail.github.io/vuelidate/#sub-basic-form

Setting it up like this allows you to have validation for each form input/element and then an overall check to see if the form is "dirty" and/or "invalid"

像这样设置它允许您对每个表单输入/元素进行验证，然后全面检查表单是否“脏”和/或“无效”

form: {
"name": {
"required": false,
"$invalid": true,
"$dirty": false,
"$error": false,
"$pending": false,
"$params": {
  "required": {
    "type": "required"
  }
}
},
"Age": {
  "required": false,
  "$invalid": true,
  "$dirty": false,
  "$error": false,
  "$pending": false,
  "$params": {
    "required": {
      "type": "required"
    }
  }
},
"$invalid": true,  <------- This is what you are after for valid/invalid
"$dirty": false,   <------- This is what you are after to see if the form has been used.
"$error": false,  <-------  This checks both invalid and dirty
"$pending": false,
"$params": {
   "nestedA": null,
   "nestedB": null
}
}

As far as using this in practice, one option would be to call validateform event on submit.

至于在实践中使用它，一种选择是在提交时调用 validateform 事件。

@click.prevent="validateform"

Then create a validateform method in your vue instance that checks

然后在你的 vue 实例中创建一个 validateform 方法来检查

$v.form.$invalid  or $v.form.$error

then either display errors or call the actual submit method

然后要么显示错误要么调用实际的提交方法

回答by roli roli

Then the only thing you have to do after setting up the validations is to call a method that will validate the errors. So follow below:

然后，在设置验证后您唯一要做的就是调用一个方法来验证错误。所以请遵循以下：

<button @click="validate">Submit</button>

The method:

方法：

validate () {
  this.$v.$touch() //it will validate all fields
  if (!this.$v.$invalid) { //invalid, becomes true when a validations return false
   //you dont have validation error.So do what u want to do here
  }
}