驗證VueJS模型中的數據？任何Vue驗證器都不起作用

你好，驗證VueJS模型中的數據？任何Vue驗證器都不起作用

很多人都知道，你不能在大多數UI組件中使用Vue驗證器，這使得驗證變得困難。我使用的是@mjanys的Vue Material Components，它非常棒。作者提供了處理驗證結果的東西 - 真/假和消息，這種類型的庫很常見，但我如何提供模型中數據的實時驗證？我希望我很清楚，但如果沒有，請讓我知道，我會盡力解釋更多。

我還需要能夠通過ajax驗證 - 例如，註冊時使用的唯一用戶名等。

來源

2016-08-11 M U

所以它其實很簡單，但您可以通過幾種方法解決它。最簡單的方法是創建一個驗證器函數，將您的值和驗證類型傳遞給

我已經創建了一個小提琴來說明。爲了驗證，你可以寫自己的驗證功能，或者使用類似validator.js

https://jsfiddle.net/vbranden/joyeybq8/

在總結驗證功能看起來像

methods: { 
    validate: function (value, type) { 
     switch (type) { 
     case 'age': 
      return value > 0 
     case 'alpha': 
      return validator.isAlpha(value) 
     case 'alphanumeric': 
      return validator.isAlphaNumeric(value) 
     case 'email': 
      return validator.isEmail(value) 
     default: 
      return true 
     } 
    } 
    }

數據看起來像

data: { 
    age: null, 
    lastName: '', 
    password: '', 
    email: '' 
    }

並在組件

<md-input :value.sync="email" type="email" :valid="validate(email, 'email')">

您可以看到，您通過驗證的值使其處於活動狀態，然後確定運行哪種驗證功能的類型

來源

2016-08-11 15:08:28 vbranden

驗證VueJS模型中的數據？任何Vue驗證器都不起作用

回答

相關問題