是否有一種簡單的方法可以使用 bootstrap 和 Vue.Js 觸發表單驗證 onSubmit 而不是 onLoad？

Question

我有一個最初為空的密碼重置表單，我想在提交時驗證沒有任何字段為空。 我正在為每個字段執行以下操作：

    <b-form-group id="currentPassword" 
              label="Old password"
              :invalid-feedback="oldPasswordFeedback">
        <b-form-input id="password" 
                      v-model="passwords.currentPassword" 
                      placeholder="Enter your old Password" 
                      type="password"  
                      maxlength="60" 
                      required/>
    </b-form-group>

表格是這樣定義的

  <b-form validated="" id="passwordChangeForm" @submit.prevent="changePassword" class="container-fluid">

問題是，每當我導航到該頁面時，默認情況下所有字段都被標記為無效並顯示它們的錯誤消息，因為它們是空的。 我希望在提交表單時進行驗證。 有沒有一種簡單的方法可以做到這一點而無需安裝額外的驗證插件？

Answer 1

在您的組件聲明中，您設置了required屬性，該屬性在您加載頁面時嘗試驗證您的表單，因此您可以利用Vue.js並在您的數據對象中創建req屬性，該屬性最初設置為false 。

我提供以下簡化示例來向您展示如何做到這一點

 new Vue({ el: '#app', data() { return { item:'', currentPassword:'', req:false } }, methods: { changePassword: function() { this.req=true; } } });

 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" /> <!-- Add this after vue.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <div id="app" class="container"> <div> <b-form validated="" id="passwordChangeForm" @submit.prevent="changePassword" class="container-fluid"> <b-form-group id="currentPassword" label="Old password"> <b-form-input id="password" v-model="currentPassword" placeholder="Enter your old Password" type="password" :required="req" /> </b-form-group> <b-button type="submit" variant="primary">Submit</b-button> </b-form> </div> </div>