2017-02-12 129 views
0

我真的很喜歡這個工具,因爲它們簡單而緊湊。但有時我面對缺少插件/片段(我的JS技能還相當薄弱,通常我是後端開發者),所以這裏的這些情況之一:什麼是驗證輸入(Skeleton + Vue.js)的最佳方式?

例如,我有簡單的形式,像這樣的:

<div class="row"> 
    <div class="six columns"> 
     <label for="email">Contact email*</label> 
     <input v-model="email" class="u-full-width" type="email" id="email" placeholder="[email protected]" name="email"> 
    </div> 
    <div class="six columns"> 
     <label for="date">Launch date*</label> 
     <input v-model="date" class="u-full-width" type="text" id="date" placeholder="June, 2014"> 
    </div> 
</div> 

正如你所看到的,我想讓這個字段是必需的,電子郵件輸入應該是電子郵件格式,如***@***.***,日期字段可以是任何東西。

實現它的最好方法是什麼?我還發現了3個Vue插件,你最喜歡誰?

感謝您的任何實例/段/等

回答

1

既然你來自後端並沒有專家,JS(我也不是:d )我建議你自己做。你會學到更多。

這是我會怎麼做:

<input name="email" v-model="email" @keyup="validateEmail()" /> 

... vue component or instance ... 
data: function() { // if you are doing this on Vue instance and not component then data property will look differently but if in component it has to be a function that returns an object 
    return { 
    email: "" 
    } 
}, 
methods: { 
    validateEmail: function() { 
    console.log(this.email) 
    // here you have access to email input as it changes so you can use either regex or substring or some other string manipulation to determine if the string satisfies your criteria 
    } 
相關問題