本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考,具体如下:
Wxml
<form bindsubmit=formSubmit bindreset=formReset> <input name=name class={{whoClass=='name'?'placeholderClass':'inputClass'}} placeholder=请填写您的姓名 type=text confirm-type=next focus={{whoFocus=='name'?true:false}} bindblur=nameBlurFocus /> <radio-group name=gender bindchange=radioChange> <radio value=0 checked />女士 <radio value=1 />先生 </radio-group> <input name=mobile class={{whoClass=='mobile'?'placeholderClass':'inputClass'}} type=number maxlength=11 placeholder=请填写您的手机号 bindblur=mobileBlurFocus focus={{whoFocus=='mobile'?true:false}} /> <input name=company class={{whoClass=='company'?'placeholderClass':'inputClass'}} placeholder=公司名称 type=text confirm-type=next focus={{whoFocus=='company'?true:false}} /> <input name=client class={{whoClass=='client'?'placeholderClass':'inputClass'}} placeholder=绑定客户 type=text confirm-type=done focus={{whoFocus=='client'?true:false}} /> <button formType=submit>提交</button> </form> <loading hidden={{submitHidden}}> 正在提交... </loading>
app.js
import wxValidate from 'utils/wxValidate' App({ wxValidate: (rules, messages) => new wxValidate(rules, messages) })
news.js
var appInstance = getApp() //表单验证初始化 onLoad: function () { this.WxValidate = appInstance.WxValidate( { name: { required: true, minlength: 2, maxlength: 10, }, mobile: { required: true, tel: true, }, company: { required: true, minlength: 2, maxlength: 100, }, client: { required: true, minlength: 2, maxlength: 100, } } , { name: { required: '请填写您的姓名姓名', }, mobile: { required: '请填写您的手机号', }, company: { required: '请输入公司名称', }, client: { required: '请输入绑定客户', } } ) }, //表单提交 formSubmit: function (e) { //提交错误描述 if (!this.WxValidate.checkForm(e)) { const error = this.WxValidate.errorList[0] // `${error.param} : ${error.msg} ` wx.showToast({ title: `${error.msg} `, image: '/pages/images/error.png', duration: 2000 }) return false } this.setData({ submitHidden: false }) var that = this //提交 wx.request({ url: '', data: { Realname: e.detail.value.name, Gender: e.detail.value.gender, Mobile: e.detail.value.mobile, Company: e.detail.value.company, client: e.detail.value.client, Identity: appInstance.userState.identity }, method: 'POST', success: function (requestRes) { that.setData({ submitHidden: true }) appInstance.userState.status = 0 wx.navigateBack({ delta: 1 }) }, fail: function () { }, complete: function () { } }) }
相关推荐:
原文地址:https://www.jb51.cc/weapp/1202612.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。