寫一個簡單易用可擴展vue表單驗證插件(vue-validate-easy)

ISherry 發布于2019-08-22 16:32 / 1769人閱讀

摘要：寫一個表單驗證插件需求目標簡單易用可擴展如何簡單開發者要做的寫了一個表單，指定一個，指定其驗證規則。調用提交表單方法，可以獲取驗證成功后的數據。

寫一個vue表單驗證插件(vue-validate-easy) 需求

目標：簡單易用可擴展

如何簡單 開發者要做的

寫了一個表單，指定一個name，指定其驗證規則。

調用提交表單方法，可以獲取驗證成功后的數據。

調用重置表單方法重置表單

自定義驗證方法

程序應該做的

獲取表單元素，綁定事件

有輸入時，獲取表單值，使用開發者指定的規則進行驗證，若驗證錯誤給予錯誤提示。

實現方法

獲取原生表單元素，vue指令獲取到的是包裹原生表單元素的外層元素，這里我使用data-type屬性來獲取原生表單元素

驗證規則，驗證參數，自定義錯誤提示語由 vue的指令值來獲取

提交時，我們需要一個表單標識，這里我使用了data-scope屬性來對表單進行分組

重置，通過data-scope重置整個表單

常用方法

懶驗證，通過.lazy指令修飾符

遠程驗證, 通過async await

延時驗證, .deay指令修飾符，和data-delay屬性

表單主動驗證，單字段主動驗證

單字段表單重置

可擴展

錯誤消息自定義

驗證方法自定義

錯誤提示處理自定義

自定義表單元素（不借助原生元素）

完成后的使用代碼

// 你只要指定 data-scope data-name data-type v-validate-easy 這四個屬性的值，然后通過調用this.V.$submit(scope)就可以進行提交表單了

    
      
        郵箱
        
      
    
    
    
      
        密碼
        
      
    
    
    
      
        確認密碼

  methods: {
    reset(scope) {
      this.V.$reset(scope)
    },
    submit(scope) {
      this.V.$submit(scope, (canSumit,data) => {
        // canSumit為true時，則所有該scope的所有表單驗證通過
        if(!canSumit) return

        // 發送請求
        axios({ url: "/test",data, method: "post"})
          .then(() => {
            // 成功響應處理
          })
          .catch(() => {
            // 錯誤處理
          })
      })
    }
  },

對自定義組件使用，就更加簡潔

  
    用戶登錄

vue-validate-easy github地址

歡迎大家star，對該項目有什么問題和建議，歡迎提issue

vue-validate-easy 文檔地址

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94438.html

寫一個簡單易用可擴展vue表單驗證插件(vue-validate-easy)

摘要：寫一個表單驗證插件需求目標簡單易用可擴展如何簡單開發者要做的寫了一個表單，指定一個，指定其驗證規則。調用提交表單方法，可以獲取驗證成功后的數據。寫一個vue表單驗證插件(vue-validate-easy) 需求目標：簡單易用可擴展如何簡單開發者要做的寫了一個表單，指定一個name，指定其驗證規則。調用提交表單方法，可以獲取驗證成功后的數據。調用重置表單方法重置表單自...

keke 2019-08-02 10:13 評論0 收藏0
寫一個簡單易用可擴展vue表單驗證插件(vue-validate-easy)

摘要：寫一個表單驗證插件需求目標簡單易用可擴展如何簡單開發者要做的寫了一個表單，指定一個，指定其驗證規則。調用提交表單方法，可以獲取驗證成功后的數據。寫一個vue表單驗證插件(vue-validate-easy) 需求目標：簡單易用可擴展如何簡單開發者要做的寫了一個表單，指定一個name，指定其驗證規則。調用提交表單方法，可以獲取驗證成功后的數據。調用重置表單方法重置表單自...

ccj659 2019-08-29 15:05 評論0 收藏0
雜篇 - Vue豆瓣系列文章

摘要：起初，項目使用的是，其提供的方法用著比較爽，由于項目的很多數據來自豆瓣的，直接上簡單方便，跨域什么的不考慮?？缬騿栴}，上面已經介紹，在不能操控的豆瓣數據上，使用的是。項目地址在線演示不識廬山真面目，只緣身在此山中。大概一個月前，開源了Vue重構豆瓣移動端的項目，效果還可以，收到了很多小伙伴的反饋，話說是要寫一些文章的，但遲遲沒有動筆，估計小伙伴們等的花都謝了，拖延癥是病，需要治...

lijinke666 2019-08-20 16:53 評論0 收藏0
前端相關匯總

摘要：簡介前端發展迅速，開發者富有的創造力不斷的給前端生態注入新生命，各種庫框架工程化構建工具層出不窮，眼花繚亂，不盲目追求前沿技術，學習框架和庫在滿足自己開發需求的基礎上，然后最好可以對源碼進行調研，了解和深入實現原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0