寫一個vue表單考證插件(vue-validate-easy)

需求

目的：簡樸易用可擴大

怎樣簡樸

開發者要做的

1. 寫了一個表單，指定一個name，指定其考證劃定規矩。
2. 挪用提交表單要領，能夠獵取考證勝利后的數據。
3. 挪用重置表單要領重置表單
4. 自定義考證要領

順序應當做的

1. 獵取表單元素，綁定事宜
2. 有輸入時，獵取表單值，運用開發者指定的劃定規矩舉行考證，若考證毛病賦予毛病提醒。

完成要領

• 獵取原生表單元素，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)就能夠舉行提交表單了
<form>
    <div class="my-form-group" data-scope="register" data-name="email" data-type="input"
    v-validate-easy="[['required','郵箱為必填項目'],['email']]">
      <label>
        <div class="label">郵箱</div>
        <input class="input" type="text" spellcheck="false" placeholder="請輸入郵箱"/>
      </label>
    </div>
    
    <div id="pwd" class="my-form-group" data-scope="register" data-name="password" data-type="input"
    v-validate-easy="[['required','暗碼不能為空'],['password'],['maxLength',[32],'暗碼最長為32位']]">
      <label>
        <div class="label">暗碼</div>
        <input class="input" type="text" spellcheck="false" placeholder="請再次輸入暗碼"/>
      </label>
    </div>
    
    <div class="my-form-group" data-scope="register" data-name="password" data-type="input"
    v-validate-easy="[['required','確認暗碼不能為空'],['equalTo',['pwd'],'暗碼輸入不一致']]">
      <label>
        <div class="label">確認暗碼</div>
        <input class="input" type="text" spellcheck="false" placeholder="請輸入郵箱"/>
      </label>
    </div>
    <div class="btn-group">
      <button class="my-btn" @click.prevent="submit('register')">註冊</button>
      <button class="my-btn" @click.prevent="reset('register')">重置</button>
    </div>
  </form>

  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(() => {
            // 毛病處置懲罰
          })
      })
    }
  },

對自定義組件運用，就越發簡約

  <form>
    <h3>用戶登錄</h3>
    <my-input label="用戶名" data-scope="login" data-name="username" v-validate-easy="[['required']]"></my-input>
    <my-input label="暗碼" data-scope="login" type="password" data-name="pwd" v-validate-easy="[['required']]"></my-input>

    <div class="btn-group">
      <button class="my-btn" @click.prevent="submit('login')">登錄</button>
      <button class="my-btn" @click.prevent="reset('login')">重置</button>
    </div>
  </form>

vue-validate-easy github地點

迎接人人star，對該項目有什麼問題和發起，迎接提issue

vue-validate-easy 文檔地點