结合完整实例形式,分析了微信小程序完成表单验证功能所涉及的视图与逻辑操作技巧,本文主要介绍了微信小程序表单验证功能,需要的朋友可以参考下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/8089.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/8089.html
Wxml文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/8089.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < 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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/8089.html
1 2 3 4 | import wxValidate from 'utils/wxValidate' App({ wxValidate: (rules, messages) => new wxValidate(rules, messages) }) |
news.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/8089.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 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 () { } }) } |