先上代码。

login.wxml

  1. <mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
  2.  
  3. <view class="page-body">
  4. <mp-form id="form" rules="{{rules}}" models="{{formData}}">
  5. <mp-cells title="信息绑定" >
  6. <mp-cell prop="name" title="姓名" ext-class="cell" >
  7. <input bindinput="formInputChange" data-field="name" class="weui-input"/>
  8. </mp-cell>
  9. <mp-cell prop="phone" title="手机号" ext-class="cell" >
  10. <input bindinput="formInputChange" data-field="phone" class="weui-input"/>
  11. </mp-cell>
  12. <mp-cell prop="company" title="单位名称" ext-class="cell" >
  13. <picker bindchange="bindPickerChange1" value="{{company}}" range="{{companyArray}}" range-key="name">
  14. <view class="picker">
  15. {{formData['company'] ? companyArray[company].name : '请选择'}}
  16. <input hidden data-field="company" value="{{formData['company'] ? companyArray[company].name : '请选择'}}" class="weui-input"/>
  17. </view>
  18. </picker>
  19. </mp-cell>
  20.  
  21. </mp-cells>
  22. </mp-form>
  23.  
  24. <view class="weui-btn-area">
  25. <button class="weui-btn" type="primary" bindtap="submitForm">确定</button>
  26. </view>
  27. </view>

login.wxss

  1. .cell .weui-cell__hd{
  2. width:200rpx;
  3. }

login.js

  1. // pages/login/login.js
  2.  
  3. const app = getApp()
  4.  
  5. Page({
  6.  
  7. /**
  8. * 页面的初始数据
  9. */
  10. data: {
  11. // 单位
  12. company:0,
  13. companyArray:[
  14. {
  15. id:0,
  16. name:'a'
  17. },
  18. {
  19. id:1,
  20. name: 'b'
  21. }
  22. ],
  23. rules: [{
  24. name: 'name',
  25. rules: { required: true, message: '姓名必填' },
  26. }, {
  27. name: 'phone',
  28. rules: [{ required: true, message: '手机号必填' }, { mobile: true, message: '手机号格式不对' }],
  29. }, {
  30. name: 'company',
  31. rules: { required: true, message: '单位名称必填' },
  32. }],
  33. formData:{}
  34. },
  35. formInputChange(e) {
  36. const { field } = e.currentTarget.dataset
  37. this.setData({
  38. [`formData.${field}`]: e.detail.value
  39. })
  40. },
  41. bindPickerChange1: function (e) {
  42. this.setData({
  43. company: e.detail.value,
  44. [`formData.company`]: e.detail.value
  45. })
  46. },
  47.  
  48. submitForm() {
  49. // console.log(this.selectComponent('#form'))
  50. this.selectComponent('#form').validate((valid, errors) => {
  51. // console.log('valid', valid, errors)
  52. if (!valid) {
  53. const firstError = Object.keys(errors)
  54. if (firstError.length) {
  55. this.setData({
  56. error: errors[firstError[0]].message
  57. })
  58.  
  59. }
  60. } else {
  61. // wx.showToast({
  62. // title: '校验通过'
  63. // })
  64. // console.log(this.data.formData)
  65. wx.showToast({
  66. title: '绑定成功'
  67. })
  68. try {
  69. // 同步接口立即写入
  70. wx.setStorageSync('user', JSON.stringify(this.data.formData))
  71. let token = wx.getStorageSync('user')
  72. // console.log(token)
  73. if (typeof app.globalData.haveToken === "boolean") {
  74. app.globalData.haveToken = true
  75. app.globalData.reloadFlag = true
  76. }
  77. // console.log(app.globalData.haveToken)
  78. wx.switchTab({
  79. url: '../index/index'
  80. })
  81. } catch (e) {
  82. console.log('写入value2发生错误')
  83. }
  84. }
  85. })
  86. }
  87. })
picker 是小程序自带的组件,类似于select,选择控件。
mp-* 是WeUI 的组件,使用之前需要在json文件中引入。
login.json
  1. {
  2. "component": true,
  3. "usingComponents": {
  4. "mp-toptips": "../../weui-miniprogram/toptips/toptips", // 悬浮提示
  5. "mp-cell": "../../weui-miniprogram/cell/cell", // 布局用的
  6. "mp-cells": "../../weui-miniprogram/cells/cells", // 布局用的,依赖 cell
  7. "mp-form": "../../weui-miniprogram/form/form" // 表单,表单验证需要
  8. }
  9. }

下面是细节分析。

  1. <mp-cell prop="company" title="单位名称" ext-class="cell" >
  2. <picker bindchange="bindPickerChange1" value="{{company}}" range="{{companyArray}}" range-key="name">
  3. <view class="picker">
  4. {{formData['company'] ? companyArray[company].name : '请选择'}}
  5. <input hidden data-field="company" value="{{formData['company'] ? companyArray[company].name : '请选择'}}" class="weui-input"/>
  6. </view>
  7. </picker>
  8. </mp-cell>

formData是存表单数据的,默认空对象。

一开始的时候肯定是没有值的,所以选之前都会提示 请选择。

只要选过了,就有值了,表单验证就能通过,否则不能通过。

隐藏的输入框是配合表单的,可能不需要。

  1. bindPickerChange1: function (e) {
  2. this.setData({
  3. company: e.detail.value,
  4. [`formData.company`]: e.detail.value
  5. })
  6. },

对应的change 方法。

set 了两个值,一个是显示用的,一个是表单用的。

  1. submitForm() {
  2. // console.log(this.selectComponent('#form'))
  3. this.selectComponent('#form').validate((valid, errors) => {
  4. // console.log('valid', valid, errors)
  5. if (!valid) {
  6. const firstError = Object.keys(errors)
  7. if (firstError.length) {
  8. this.setData({
  9. error: errors[firstError[0]].message
  10. })
  11.  
  12. }
  13. } else {
  14. // wx.showToast({
  15. // title: '校验通过'
  16. // })
  17. // console.log(this.data.formData)
  18. wx.showToast({
  19. title: '绑定成功'
  20. })
  21. try {
  22. // 同步接口立即写入
  23. wx.setStorageSync('user', JSON.stringify(this.data.formData))
  24. let token = wx.getStorageSync('user')
  25. // console.log(token)
  26. if (typeof app.globalData.haveToken === "boolean") {
  27. app.globalData.haveToken = true
  28. app.globalData.reloadFlag = true
  29. }
  30. // console.log(app.globalData.haveToken)
  31. wx.switchTab({
  32. url: '../index/index'
  33. })
  34. } catch (e) {
  35. console.log('写入value2发生错误')
  36. }
  37. }
  38. })
  39. }

表单验证方法。

校验规则是 this.data.rules.

this.data.rules 会和 this.data.formData 进行比对,如果rule里面相应值 formData没有就会校验失败,这是最简单的非空校验。

更复杂的校验在rules[index].rules数组中可以加对象,里面的每一个对象都会去验证。

以上。

微信小程序实战:表单与选择控件的结合的更多相关文章

  1. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  2. 微信小程序_(表单组件)checkbox与label

    微信小程序组件checkbox官方文档 传送门 微信小程序组件label官方文档 传送门 Learn 一.checkbox组件 二.label组件与checkbox组件共用 一.checkbox组件 ...

  3. 微信小程序之表单验证

    表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...

  4. 微信小程序_(表单组件)button组件的使用

    微信小程序表单组件button官方文档 传送门 Learn 一.button组件的使用 一.button组件的使用 size:按钮的大小[默认值default] type:按钮的样式类型[默认值def ...

  5. 微信小程序之表单提交

    页面绑定很多事件! <view class="content"> <view class="user personal_func_list"& ...

  6. 微信小程序常用表单校验方法(手机号校验、身份证号(严格和非严格校验、验证码六位数字校验))

    util.js function isPhone(value) { if (!/^1(3|4|5|7|8)\d{9}$/.test(value)) { return false } else { re ...

  7. 微信小程序实战篇:商品属性联动选择(案例)

    本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示:   商品属性联动.gif 代码示例 1.commodity.xml <!-- < ...

  8. Web前端_微信小程序实战开发

    微信小程序开发实战教程 一.微信小程序 它是一种混合开发的方式. 是安装在微信中的程序(一个程序最多2M空间). 1.1 注册 1  2 点击立即注册:进入下方页面 3  4 点击小程序进入表单填写页 ...

  9. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

随机推荐

  1. platform驱动架构初探

    platform总线是Linux2.6引入的虚拟总线,这类总线没有对应的硬件结构.与之相反,USB总线和PCI总线在内核中是有对应的bus(USB-bus和PCI-bus)的.为了统一管理CPU这些既 ...

  2. Jmeter各种组件

    断言 用于检查测试中得到的响应数据等是否符合预期,用以保证性能测试过程中的数据交互与预期一致 参数化关联 参数化:指对每次发起的请求,参数名称相同,参数值进行替换,如登录三次系统,每次用不同的用户名和 ...

  3. 升级OPENSSH踩过的坑

    安装三个必要依赖包yum install gcc zlib-devel openssl-devel上传安装包,创建一个/tmp目录下,然后解压,将/etc/ssh/目录移动到本地解压安装包,进入安装目 ...

  4. ASP.NET WebAPI框架解析第二篇(HttpModule的创建和使用)

    我们先看一下执行流程图 图中画红圈的部分便是HttpModule,在说创建HttpModule之前,先说一下HttpApplication对象,HttpApplication对象由Asp.net框架创 ...

  5. express 框架的使用方法

    express  框架的使用方法: 第一步: 生成一个 (express)项目工程 命令提示框的指令是: express    (文件名) express    -e      (文件名) 两段指令的 ...

  6. 警告Establishing SSL connection without server's identity verification is not recommended

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] SpringBo ...

  7. 位运算实现加减乘除四则运算(Java)

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 本文是继< ...

  8. 15.DRF-分页

    Django rest framework(6)----分页 第一种分页 PageNumberPagination 基本使用 (1)urls.py urlpatterns = [ re_path('( ...

  9. MySql数据库GROUP BY使用过程中的那些坑

    MySql数据库GROUP BY使用过程中的那些坑 GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组. 特别注意: group by 有一个原则,就是 select 后面的所有 ...

  10. 最短路之Floyd

    #include<bits/stdc++.h>using namespace std;const int maxn = 300+10;int n,m,f[maxn][maxn],t; in ...