如何使用vuejs實現(xiàn)更好的Form validation?
更新時間：2017年04月07日 11:16:23 作者：丁一鳴
如何使用vuejs實現(xiàn)更好的Form validation？這篇文章主要介紹了vue-form插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用vuejs對Form驗證怎么進行對submit驗證，驗證失敗不跳轉(zhuǎn)，成功才跳轉(zhuǎn)？我試了好幾個方法都沒實現(xiàn)，很郁悶，要么不驗證，要么就是驗證了不進行跳轉(zhuǎn)。
<input type="button" v-on:click="return submit()" class="btn btn-success" value="GO"/>
如何用vuejs實現(xiàn)更好的Form validation?
好像還是vue-validator資料多些，接下來打算用這個了：https://github.com/vuejs/vue-validator
vue用于表單驗證目前有三個插件
舉個例子吧，我用的的是vue-form
html:
<form v-form name="myform" @submit.prevent="onSubmit" role="form">
<legend class="text-center">Vue-form demo</legend>
<div class="form-group">
<label>郵箱*</label>
<input class="form-control" v-model="model.name" v-form-ctrl required name="name" />
</div>
<div class="form-group">
<label>用戶名*</label>
<input class="form-control" v-model="model.email" v-form-ctrl name="email" type="email" required />
</div>
<div class="errors" v-if="myform.$submitted">
<p class="bg-danger text-center" v-if="myform.name.$error.required">請輸入用戶名.</p>
<p class="bg-danger text-center" v-if="myform.email.$error.email">請輸入正確的郵箱.</p>
</div>
<button class="btn btn-success btn-block" type="submit">提交</button>
</form>
js:
new Vue({
el: '#app',
data: {
myform: {},
model: {}
},
methods: {
onSubmit: function() {
console.log(this.myform.$valid);
if(this.myform.$valid==true)
alert("提交成功");
}
}
});
demo完整代碼在這里點擊預覽可以查看
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決父組件將子組件作為彈窗調(diào)用只執(zhí)行一次created的問題
這篇文章主要介紹了解決父組件將子組件作為彈窗調(diào)用只執(zhí)行一次created的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Vue 列表頁帶參數(shù)進詳情頁的操作(router-link)
這篇文章主要介紹了Vue 列表頁帶參數(shù)進詳情頁的操作(router-link)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家介紹了Vue.js3.2響應式部分的優(yōu)化升級詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue $refs動態(tài)拼接獲取值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
如果我們在每個組件中去重復定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2021-08-08
Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性詳解
這篇文章主要介紹了Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
在做項目的時候常需要設(shè)置背景圖片和透明度,下面這篇文章主要給大家介紹了關(guān)于Vue中設(shè)置背景圖片和透明度的簡單方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue搭建后臺系統(tǒng)需要做的幾點，文中給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
最近學習一下前端框架Vue,整體上感覺還是比較有意思的,但是在安裝vue-cli腳手架的時候,出現(xiàn)了一些問題,解決問題也花費了不少時間,下面這篇文章主要給大家介紹了關(guān)于解決vue終端報錯:不是內(nèi)部或外部命令的相關(guān)資料,需要的朋友可以參考下2023-02-02