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


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 相关文章推荐
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
JS实现复制功能
Mar 01 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python实现用户登陆邮件通知的方法
2015/07/09 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python3.8中使用f-strings调试
2019/05/22 Python
详细分析Python垃圾回收机制
2020/07/01 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
商务邀请函范文
2014/01/14 职场文书
陈欧的广告词
2014/03/18 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
道歉的话语大全
2015/05/12 职场文书
社区服务活动感想
2015/08/11 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS