寫一個(gè)簡單易用可擴(kuò)展vue表單驗(yàn)證插件(vue-validate-easy)

keke 發(fā)布于2019-08-02 10:13 / 2316人閱讀

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

寫一個(gè)vue表單驗(yàn)證插件(vue-validate-easy) 需求

目標(biāo)：簡單易用可擴(kuò)展

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

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

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

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

自定義驗(yàn)證方法

程序應(yīng)該做的

獲取表單元素，綁定事件

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

實(shí)現(xiàn)方法

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

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

提交時(shí)，我們需要一個(gè)表單標(biāo)識(shí)，這里我使用了data-scope屬性來對(duì)表單進(jìn)行分組

重置，通過data-scope重置整個(gè)表單

常用方法

懶驗(yàn)證，通過.lazy指令修飾符

遠(yuǎn)程驗(yàn)證, 通過async await

延時(shí)驗(yàn)證, .deay指令修飾符，和data-delay屬性

表單主動(dòng)驗(yàn)證，單字段主動(dòng)驗(yàn)證

單字段表單重置

可擴(kuò)展

錯(cuò)誤消息自定義

驗(yàn)證方法自定義

錯(cuò)誤提示處理自定義

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

完成后的使用代碼

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

    
      
        郵箱
        
      
    
    
    
      
        密碼
        
      
    
    
    
      
        確認(rèn)密碼

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

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

對(duì)自定義組件使用，就更加簡潔