微信小程序表单验证功能完整实例


Posted in Javascript onDecember 01, 2017

本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考,具体如下:

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 文件点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
易被忽视的js事件问题总结
May 14 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
Angular表单验证实例详解
Oct 20 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
Vue render深入开发讲解
Apr 13 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 #Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 #jQuery
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 #Javascript
vue组件发布到npm简单步骤
Nov 30 #Javascript
JS和JQuery实现雪花飘落效果
Nov 30 #jQuery
vue 添加vux的代码讲解
Nov 30 #Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 #Javascript
You might like
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
把input初始值不写value的具体实现方法
2013/07/04 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
微信小程序签到功能
2018/10/31 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
Python字符串切片操作知识详解
2016/03/28 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
如何用python写个模板引擎
2021/01/14 Python
全球度假村:Club Med
2017/11/27 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
办公室驾驶员岗位职责
2013/11/15 职场文书
机关门卫岗位职责
2013/12/30 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书