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


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 相关文章推荐
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 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
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
台湾旅游网站:灿星旅游
2018/10/11 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
劳动之星获奖感言
2014/02/01 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
股份转让协议书
2014/04/12 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
民主评议党员工作总结
2014/10/20 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
开国大典观后感
2015/06/04 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
解析目标检测之IoU
2021/06/26 Python