微信小程序表單驗(yàn)證WxValidate的使用
更新時(shí)間:2019年11月27日 11:41:09 作者:Independent
這篇文章主要介紹了微信小程序表單驗(yàn)證WxValidate的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
效果圖GIF
git地址:WxValidate
使用
import WxValidate from '../../utils/WxValidate'; Page({ data: { basicInfo: { tel: '', post: '', weChat: '', specialPlane: '', email: '', intro: '' } }, onLoad() { this.initValidate(); }, initValidate() { const rules = { tel: { required: true, tel: true, }, post: { required: true, }, weChat: { required: true, }, specialPlane: { required: true, }, email: { required: true, email: true } }; const messages = { tel: { required: '請(qǐng)輸入手機(jī)號(hào)', tel: '請(qǐng)輸入正確格式手機(jī)號(hào)', }, post: { required: '請(qǐng)輸入職位', }, weChat: { required: '請(qǐng)輸入微信號(hào)', }, specialPlane: { required: '請(qǐng)輸入座機(jī)號(hào)', }, email: { required: '請(qǐng)輸入電子郵箱', email: '請(qǐng)輸入正確格式電子郵箱', } }; this.WxValidate = new WxValidate(rules, messages) }, formChange(val) { let obj = {} obj[`basicInfo.${val.currentTarget.dataset.val}`]= val.detail.value this.setData(obj) }, submitForm(e) { const params = e.detail.value if (!this.WxValidate.checkForm(params)) { const error = this.WxValidate.errorList[0] this.showModal(error) return false } }, showModal(error) { wx.showToast({ title: error.msg, icon: 'none', duration: 2000 }) }, })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript彈出新窗口并控制窗口移動(dòng)到指定位置的方法
這篇文章主要介紹了JavaScript彈出新窗口并控制窗口移動(dòng)到指定位置的方法,涉及javascript針對(duì)彈出窗口的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04JavaScript的模塊化:封裝(閉包),繼承(原型) 介紹
在復(fù)雜的邏輯下, JavaScript 需要被模塊化,模塊需要封裝起來(lái),只留下供外界調(diào)用的接口。閉包是 JavaScript 中實(shí)現(xiàn)模塊封裝的關(guān)鍵,也是很多初學(xué)者難以理解的要點(diǎn)2013-07-07JavaScript Array對(duì)象擴(kuò)展indexOf()方法
JavaScript中Array對(duì)象沒(méi)有indexOf()方法,可通過(guò)下面的代碼擴(kuò)展,需要的朋友可以參考下2014-05-05JavaScript注冊(cè)時(shí)密碼強(qiáng)度校驗(yàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript注冊(cè)時(shí)密碼強(qiáng)度校驗(yàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06在小程序中集成redux/immutable/thunk第三方庫(kù)的方法
這篇文章主要介紹了在小程序中集成redux/immutable/thunk第三方庫(kù)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08getElementByID、createElement、appendChild幾個(gè)DHTML元素
WEB標(biāo)準(zhǔn)下可以通過(guò)getElementById(), getElementsByName(), and getElementsByTagName()訪問(wèn)2008-06-06