大家好,今天是2020年1月6日,一个在冬日里久违的艳阳天。今天绵阳动力网络公司继续为大家带来新的微信小程序开发教程之WxValidate验证表单的实现方法。
表单验证在小程序开发里经常用到,因为涉及到验证的内容比较多,比如文本内容的数量、是否为数字、是否为手机号码、是否为电子邮箱等等。如果是自己来写会比较繁琐,今天就为大家介绍一个简单实用的方法: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 }) }, })以上就是利用WxValidate做表单验证的全部代码,很简单吧。欢迎大家收藏,在需要的时候来使用。