微信小程序表單驗(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)文章
一個(gè)超簡(jiǎn)單的JS拖拽實(shí)現(xiàn)代碼(兼容IE,Firefox)
網(wǎng)上找的一個(gè)超簡(jiǎn)單的JS拖拽,喜歡拖拽效果的朋友可以參考下。2010-04-04
javascript實(shí)現(xiàn)的樣式表(CSS) 格式整理與壓縮
javascript實(shí)現(xiàn)的樣式表(CSS) 格式整理與壓縮,可以分為多行與單行,非常不錯(cuò)。2010-05-05
基于javascript實(shí)現(xiàn)圖片懶加載
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片懶加載的方法及思路,有時(shí)我們需要用懶加載,也就是延遲加載圖片的方式,來(lái)提高網(wǎng)站的親和力,需要的朋友可以參考下2016-01-01
使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫(huà)效果的示例代碼(前端組件化)
這篇文章主要介紹了使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫(huà)效果的示例代碼(前端組件化),本文重點(diǎn)給大家介紹基礎(chǔ)的動(dòng)畫(huà)類實(shí)現(xiàn)時(shí)間軸,通過(guò)示例代碼給大家介紹的很詳細(xì),需要的朋友可以參考下2021-04-04

