微信小程序表單驗證WxValidate的使用
更新時間:2019年11月27日 11:41:09 作者:Independent
這篇文章主要介紹了微信小程序表單驗證WxValidate的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(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: '請輸入手機(jī)號',
tel: '請輸入正確格式手機(jī)號',
}, post: {
required: '請輸入職位',
}, weChat: {
required: '請輸入微信號',
}, specialPlane: {
required: '請輸入座機(jī)號',
}, email: {
required: '請輸入電子郵箱',
email: '請輸入正確格式電子郵箱',
}
};
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
})
},
})
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
一個超簡單的JS拖拽實現(xiàn)代碼(兼容IE,Firefox)
網(wǎng)上找的一個超簡單的JS拖拽,喜歡拖拽效果的朋友可以參考下。2010-04-04
javascript實現(xiàn)的樣式表(CSS) 格式整理與壓縮
javascript實現(xiàn)的樣式表(CSS) 格式整理與壓縮,可以分為多行與單行,非常不錯。2010-05-05
使用JavaScript 實現(xiàn)時間軸與動畫效果的示例代碼(前端組件化)
這篇文章主要介紹了使用JavaScript 實現(xiàn)時間軸與動畫效果的示例代碼(前端組件化),本文重點給大家介紹基礎(chǔ)的動畫類實現(xiàn)時間軸,通過示例代碼給大家介紹的很詳細(xì),需要的朋友可以參考下2021-04-04

