用vuejs對Form驗證怎么進行對submit驗證，驗證失敗不跳轉，成功才跳轉？我試了好幾個方法都沒實現，很郁悶，要么不驗證，要么就是驗證了不進行跳轉。
<input type="button" v-on:click="return submit()" class="btn btn-success" value="GO"/>
如何用vuejs實現更好的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完整代碼在這里點擊預覽可以查看
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
