微信小程序表单验证功能完整实例
2017-12-01 08:53
1221 查看
本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考,具体如下:
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 () { } }) }
WxValidate.js 文件点击此处本站下载。
希望本文所述对大家微信小程序开发有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JS实现的简单表单验证功能完整实例
- 微信小程序手机号码验证功能的实例代码
- 微信小程序多张图片和表单一起上传,验证表单及进度条的实现完整代码
- 微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图
- Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
- php封装的表单验证类完整实例
- 一个非常强大完整的web表单验证程序
- 微信小程序 input表单与redio及下拉列表的使用实例
- jQuery实现动态表单验证时文本框抖动效果完整实例
- 微信小程序 PHP后端form表单提交实例详解
- 微信小程序支付功能 php后台对接完整代码分享
- 微信小程序实现即时通信聊天功能的实例代码
- JS实现的通用表单验证插件完整实例
- 一个非常强大完整的web表单验证程序
- 微信小程序 表单验证
- 微信小程序中form 表单提交和取值实例详解
- [微信小程序]实现列表点赞并让当前节点的图片改变,值加1完整实例代码加GIF图
- [微信小程序]转发(分享)和打电话功能,完整代码附效果图
- 微信小程序 弹幕功能简单实例