在前端工作中，小程序是開發(fā)中必不可少的平臺工具，但是小程序本身只支持簡單地type類型限制，自身是沒有其他的驗證功能的，這里文匯軟件小編就來給大家介紹下微信小程序如何進行表單驗證。

首先，我們看下這個頁面，有姓名、郵箱、手機號、身份證。這四個表單元素都是需要驗證的。但是微信小程序本身是不帶驗證的，這里我們就需要來借助外部插件幫助我們實現(xiàn)表單驗證的功能了，本人在這里使用的是jquerry Validate 封套的。

這里呢因為是外部引入的組件，而且表單應(yīng)該不止一個頁面所以本人建議，將它放在微信的utill文件夾中

這個插件主要有兩個參數(shù)rules和messages具體使用如下圖

這里如果想添加自定義驗證的話可以使用addMethod這個自帶的函數(shù),第一個是你定義的對象名，里面是你的驗證規(guī)則，第二個是一個回調(diào)函數(shù)里面是可以設(shè)置你的具體表單的值觸發(fā)的條件，最后一個是返回的錯誤提示文字

平時如果沒有想自己定義的話可以像這樣使用：

先在頁面加載時注冊：rule（存放規(guī)則的對象）message(設(shè)置初始值和錯誤提示) 以及他們的父級對象initValidate

而這個父級對象的使用如下圖，required為自帶的選項設(shè)置該字段是否必填，下面的email:true，請看之前圖片的配置，minlength設(shè)置輸入的最小長度

然后我們需要定義錯誤提示的模態(tài)框模板

這些都定義好后我們需要將它放在觸發(fā)的事件內(nèi)，如下圖表單提交時使用this.WxValidate.checkForm(params)進行驗證

以上就是小編分享的了，如果喜歡的話就來文匯軟件關(guān)注小編吧