如何使用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)。

如何用vuejs實(shí)現(xiàn)更好的Form validation?

好像還是vue-validator資料多些，接下來打算用這個(gè)了：https://github.com/vuejs/vue-validator

vue用于表單驗(yàn)證目前有三個(gè)插件

vue-validator

Vue validator

vue-form

舉個(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">請(qǐng)輸入用戶名.</p>
            <p class="bg-danger text-center" v-if="myform.email.$error.email">請(qǐng)輸入正確的郵箱.</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ù)覽可以查看

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于vue hash模式微信分享#號(hào)的解決
這篇文章主要介紹了基于vue hash模式微信分享#號(hào)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue-router路由模式詳解(小結(jié))
這篇文章主要介紹了vue-router路由模式詳解(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
基于Vue.js與WordPress Rest API構(gòu)建單頁(yè)應(yīng)用詳解
這篇文章主要介紹了基于Vue.js與WordPress Rest API構(gòu)建單頁(yè)應(yīng)用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue3+ElementPlus+VueCropper實(shí)現(xiàn)上傳圖片功能
文章介紹了如何在Vue3、ElementPlus和VueCropper組件中實(shí)現(xiàn)圖片上傳和裁剪功能,包括放大、縮小等操作,感興趣的朋友跟隨小編一起看看吧
2025-01-01
Vue實(shí)現(xiàn)類似Spring官網(wǎng)圖片滑動(dòng)效果方法
這篇文章主要介紹了Vue實(shí)現(xiàn)類似Spring官網(wǎng)圖片滑動(dòng)效果方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
ant design Vue 純前端實(shí)現(xiàn)分頁(yè)問題
這篇文章主要介紹了ant design Vue 純前端實(shí)現(xiàn)分頁(yè)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue實(shí)現(xiàn)圖書管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖書管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
基于vue實(shí)現(xiàn)分頁(yè)組件的示例代碼
分頁(yè)組件是一種用戶界面元素,用于在長(zhǎng)列表或數(shù)據(jù)集中分割內(nèi)容,分頁(yè)組件是每個(gè)開發(fā)人員必須掌握的一個(gè)組件,廣泛應(yīng)用在各個(gè)場(chǎng)所,用以用戶方便閱讀等,本文就給大家介紹一下如何基于vue寫出的分頁(yè)組件,需要的朋友可以參考下
2023-08-08
Vuex中mutations和actions的區(qū)別及說明
這篇文章主要介紹了Vuex中mutations和actions的區(qū)別及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
在vue3.0中如何配置代理
這篇文章主要介紹了在vue3.0中如何配置代理問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04