寫一個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)就可以進行提交表單了
<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