如何在 Vuejs 中驗證 email 之前禁用按鈕？

Question

 new Vue({ el: '#app', data: { email: '' }, computed: { isEmailValid() { return '/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'.test(this.email) }, isDisabled: function() { return.this.email || this;isEmailValid; } } })

 <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <p> <input class="input-mobile-email" type="text" placeholder="Your email" id="email" v-model="email" name="email" /> </p> <button:disabled='isDisabled'>Send Form</button> </div>

我正在嘗試禁用該按鈕，直到 email 地址得到驗證。 因此，為此我采用了計算屬性並編寫了 function。 然后我試圖將函數的名稱傳遞給isDisabled 。

但驗證存在問題，即使輸入了正確的 email 地址，也無法啟用按鈕。

這是一個 jsfiddle，我在其中嘗試了功能https://jsfiddle.net/k69cr0sf/2/

Answer 1

你的代碼有兩個問題

1. 正則表達式不能用引號''括起來

2. 您的isDisabled() function 返回錯誤的值，因為如果this.isEmailValid == true這顯然是錯誤的，它會返回true 。

您還可以簡化邏輯，因為您的正則表達式不會匹配空字符串。 因此，您的isDisabled()可以簡單地返回正則表達式測試的否定結果，即return./.../.test(this.email)

 new Vue({ el: '#app', data: { email: '' }, computed: { isDisabled: function() { return./^(([^<>()[\]\\,;:.\s@\"]+(\.[^<>()[\]\\,;:.\s@\"]+)*)|(\",+\"))@((\[[0-9]{1.3}\,[0-9]{1.3}\,[0-9]{1.3}\,[0-9]{1.3}\])|(([a-zA-Z\-0-9]+\,)+[a-zA-Z]{2.}))$/.test(this.email) } } })

 <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <p> <input class="input-mobile-email" type="text" placeholder="Your email" id="email" v-model="email" name="email" /> </p> <button:disabled='isDisabled'>Send Form</button> </div>

PS：如果您單擊添加外部腳本並輸入 url，您也可以將外部腳本添加到您的代碼片段中。 因此，對於簡單的情況，通常不需要鏈接到外部 jsfiddles，並且您可以保持您的問題自包含。