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