ボタンをクリックした後にデータを検証する方法は？

Question

送信ボタンをクリックした後にのみ入力を検証する必要があります。ただし、フォーカスが失われた後に必要なルールがアクティブになっています。私はVue.jsでVeeValidateを使用しています。

HTML：

<input 
    name="Email" 
    v-validate 
    data-vv-rules="required|email" 
    id="email" 
    type="email" 
    v-model="email" 
    placeholder="Email " 
> 

JS：

this.$validator.validateAll().then(success => { 

}) 

Answer 1

あなたがそうのようなデフォルトの検証動作を無効にするにはdata-vv-validate-onを使用することができます。data-vv-validate-on="none"

は、その後、あなたの送信ボタンにクリックイベントハンドラを追加しますa @click="submit"。

そして、あなたのコンポーネントのsubmit方法は次のようになりますUXの観点から

methods: { 
    submit() { 
    this.$validator.validateAll().then(success => { 
     // submit the value 
    }) 
    } 
}