我的要求是这样的。

  • 我必须输入字段以验证用户输入。
  • 当用户填写字段并单击“提交”按钮时,在转到提交之前,我要显示所有错误消息。
  • 如果用户数据
  • 中没有错误,则应提交

    这是我的代码。

    <template>
      <div>
          <h1>Add Items</h1>
          Product Name :
          <input
          type="text"
          name="product"
          v-model="product"
          v-validate="'required|alpha_dash'"
          >
          <span style="color:red;">{{errors.first('product')}}</span>
          <br>
          Product Price :
          <input
          type="number"
          name="price"
          v-model="price"
          v-validate="'required|min_value:100|max_value:500'"
          >
        <span style="color:red;">{{errors.first('product')}}</span>
          <br>
          <button @click="submit">Save</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          price: "",
          product: ""
        };
      },
      methods: {
        submit() {
          alert("On submit");
        }
      }
    };
    </script>


    现在它只显示第一个错误{{errors.first('product')}}而不是这个我想一次显示所有错误



    这仅在您触摸输入字段时显示错误。无论您是否触摸这些字段,我都想显示所有验证错误,当您单击“提交”按钮时,我想显示所有错误。

    最佳答案

    您可以使用validateAll方法:

       submit() {
          this.$validator.validateAll()
          if (!this.errors.any()) {
            alert('submit')
          }
        }
    

    fiddle here

    07-24 09:43
    查看更多