微信小程序表单验证WxValidate的使用

时间:2021-05-18

效果图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: '请输入手机号', tel: '请输入正确格式手机号', }, post: { required: '请输入职位', }, weChat: { required: '请输入微信号', }, specialPlane: { required: '请输入座机号', }, 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 }) },})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章