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

ccj659 發(fā)布于2019-08-29 15:05 / 2536人閱讀

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

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

目標：簡單易用可擴展

如何簡單 開發(fā)者要做的

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

調(diào)用提交表單方法，可以獲取驗證成功后的數(shù)據(jù)。

調(diào)用重置表單方法重置表單

自定義驗證方法

程序應(yīng)該做的

獲取表單元素，綁定事件

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

實現(xiàn)方法

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

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

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

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

常用方法

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

遠程驗證, 通過async await

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

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

單字段表單重置

可擴展

錯誤消息自定義

驗證方法自定義

錯誤提示處理自定義

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

完成后的使用代碼

// 你只要指定 data-scope data-name data-type v-validate-easy 這四個屬性的值，然后通過調(diào)用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

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

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