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

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

這里呢因?yàn)槭峭獠恳氲慕M件，而且表單應(yīng)該不止一個(gè)頁(yè)面所以本人建議，將它放在微信的utill文件夾中

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

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

平時(shí)如果沒(méi)有想自己定義的話可以像這樣使用：

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

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

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

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

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