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


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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
详解JS预解析原理
Jun 16 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查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python实现自动登录后台管理系统
2018/10/18 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python for循环remove同一个list过程解析
2019/08/14 Python
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
咖啡蛋糕店创业计划书
2014/01/28 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
故意杀人案辩护词
2015/05/21 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书