最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
微信小程序表单验证功能完整实例
时间:2017-12-20 编辑:猪哥 来源:一聚教程网
本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考,具体如下:
Wxml
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 () { } }) }
-
上一个: 美图美拍加好友方法介绍
-
下一个: 苏宁易购分期付款被银行拒绝怎么办
相关文章
- 微信怎么上传抗原检测结果 微信上传抗原检测结果方法 04-15
- 微信运动如何设置状态 微信运动设置状态方法 03-30
- 微信怎么查询三个月前顺丰快递信息 微信查询三个月前顺丰快递信息方法 03-30
- 微信如何设置收款多人播报 微信设置收款多人播报方法 03-18
- 微信小老虎图标怎么设置 微信小老虎图标设置方法 03-09
- 微信如何绑定武汉通 微信绑定武汉通操作方法 03-19