微信小程序实战:表单与选择控件的结合
先上代码。
login.wxml
- <mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
- <view class="page-body">
- <mp-form id="form" rules="{{rules}}" models="{{formData}}">
- <mp-cells title="信息绑定" >
- <mp-cell prop="name" title="姓名" ext-class="cell" >
- <input bindinput="formInputChange" data-field="name" class="weui-input"/>
- </mp-cell>
- <mp-cell prop="phone" title="手机号" ext-class="cell" >
- <input bindinput="formInputChange" data-field="phone" class="weui-input"/>
- </mp-cell>
- <mp-cell prop="company" title="单位名称" ext-class="cell" >
- <picker bindchange="bindPickerChange1" value="{{company}}" range="{{companyArray}}" range-key="name">
- <view class="picker">
- {{formData['company'] ? companyArray[company].name : '请选择'}}
- <input hidden data-field="company" value="{{formData['company'] ? companyArray[company].name : '请选择'}}" class="weui-input"/>
- </view>
- </picker>
- </mp-cell>
- </mp-cells>
- </mp-form>
- <view class="weui-btn-area">
- <button class="weui-btn" type="primary" bindtap="submitForm">确定</button>
- </view>
- </view>
login.wxss
- .cell .weui-cell__hd{
- width:200rpx;
- }
login.js
- // pages/login/login.js
- const app = getApp()
- Page({
- /**
- * 页面的初始数据
- */
- data: {
- // 单位
- company:0,
- companyArray:[
- {
- id:0,
- name:'a'
- },
- {
- id:1,
- name: 'b'
- }
- ],
- rules: [{
- name: 'name',
- rules: { required: true, message: '姓名必填' },
- }, {
- name: 'phone',
- rules: [{ required: true, message: '手机号必填' }, { mobile: true, message: '手机号格式不对' }],
- }, {
- name: 'company',
- rules: { required: true, message: '单位名称必填' },
- }],
- formData:{}
- },
- formInputChange(e) {
- const { field } = e.currentTarget.dataset
- this.setData({
- [`formData.${field}`]: e.detail.value
- })
- },
- bindPickerChange1: function (e) {
- this.setData({
- company: e.detail.value,
- [`formData.company`]: e.detail.value
- })
- },
- submitForm() {
- // console.log(this.selectComponent('#form'))
- this.selectComponent('#form').validate((valid, errors) => {
- // console.log('valid', valid, errors)
- if (!valid) {
- const firstError = Object.keys(errors)
- if (firstError.length) {
- this.setData({
- error: errors[firstError[0]].message
- })
- }
- } else {
- // wx.showToast({
- // title: '校验通过'
- // })
- // console.log(this.data.formData)
- wx.showToast({
- title: '绑定成功'
- })
- try {
- // 同步接口立即写入
- wx.setStorageSync('user', JSON.stringify(this.data.formData))
- let token = wx.getStorageSync('user')
- // console.log(token)
- if (typeof app.globalData.haveToken === "boolean") {
- app.globalData.haveToken = true
- app.globalData.reloadFlag = true
- }
- // console.log(app.globalData.haveToken)
- wx.switchTab({
- url: '../index/index'
- })
- } catch (e) {
- console.log('写入value2发生错误')
- }
- }
- })
- }
- })
- {
- "component": true,
- "usingComponents": {
- "mp-toptips": "../../weui-miniprogram/toptips/toptips", // 悬浮提示
- "mp-cell": "../../weui-miniprogram/cell/cell", // 布局用的
- "mp-cells": "../../weui-miniprogram/cells/cells", // 布局用的,依赖 cell
- "mp-form": "../../weui-miniprogram/form/form" // 表单,表单验证需要
- }
- }
下面是细节分析。
- <mp-cell prop="company" title="单位名称" ext-class="cell" >
- <picker bindchange="bindPickerChange1" value="{{company}}" range="{{companyArray}}" range-key="name">
- <view class="picker">
- {{formData['company'] ? companyArray[company].name : '请选择'}}
- <input hidden data-field="company" value="{{formData['company'] ? companyArray[company].name : '请选择'}}" class="weui-input"/>
- </view>
- </picker>
- </mp-cell>
formData是存表单数据的,默认空对象。
一开始的时候肯定是没有值的,所以选之前都会提示 请选择。
只要选过了,就有值了,表单验证就能通过,否则不能通过。
隐藏的输入框是配合表单的,可能不需要。
- bindPickerChange1: function (e) {
- this.setData({
- company: e.detail.value,
- [`formData.company`]: e.detail.value
- })
- },
对应的change 方法。
set 了两个值,一个是显示用的,一个是表单用的。
- submitForm() {
- // console.log(this.selectComponent('#form'))
- this.selectComponent('#form').validate((valid, errors) => {
- // console.log('valid', valid, errors)
- if (!valid) {
- const firstError = Object.keys(errors)
- if (firstError.length) {
- this.setData({
- error: errors[firstError[0]].message
- })
- }
- } else {
- // wx.showToast({
- // title: '校验通过'
- // })
- // console.log(this.data.formData)
- wx.showToast({
- title: '绑定成功'
- })
- try {
- // 同步接口立即写入
- wx.setStorageSync('user', JSON.stringify(this.data.formData))
- let token = wx.getStorageSync('user')
- // console.log(token)
- if (typeof app.globalData.haveToken === "boolean") {
- app.globalData.haveToken = true
- app.globalData.reloadFlag = true
- }
- // console.log(app.globalData.haveToken)
- wx.switchTab({
- url: '../index/index'
- })
- } catch (e) {
- console.log('写入value2发生错误')
- }
- }
- })
- }
表单验证方法。
校验规则是 this.data.rules.
this.data.rules 会和 this.data.formData 进行比对,如果rule里面相应值 formData没有就会校验失败,这是最简单的非空校验。
更复杂的校验在rules[index].rules数组中可以加对象,里面的每一个对象都会去验证。
以上。
微信小程序实战:表单与选择控件的结合的更多相关文章
- 微信小程序-form表单-获取用户输入文本框的值
微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...
- 微信小程序_(表单组件)checkbox与label
微信小程序组件checkbox官方文档 传送门 微信小程序组件label官方文档 传送门 Learn 一.checkbox组件 二.label组件与checkbox组件共用 一.checkbox组件 ...
- 微信小程序之表单验证
表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...
- 微信小程序_(表单组件)button组件的使用
微信小程序表单组件button官方文档 传送门 Learn 一.button组件的使用 一.button组件的使用 size:按钮的大小[默认值default] type:按钮的样式类型[默认值def ...
- 微信小程序之表单提交
页面绑定很多事件! <view class="content"> <view class="user personal_func_list"& ...
- 微信小程序常用表单校验方法(手机号校验、身份证号(严格和非严格校验、验证码六位数字校验))
util.js function isPhone(value) { if (!/^1(3|4|5|7|8)\d{9}$/.test(value)) { return false } else { re ...
- 微信小程序实战篇:商品属性联动选择(案例)
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- < ...
- Web前端_微信小程序实战开发
微信小程序开发实战教程 一.微信小程序 它是一种混合开发的方式. 是安装在微信中的程序(一个程序最多2M空间). 1.1 注册 1 2 点击立即注册:进入下方页面 3 4 点击小程序进入表单填写页 ...
- 2017-01-11小程序form表单提交
小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...
随机推荐
- platform驱动架构初探
platform总线是Linux2.6引入的虚拟总线,这类总线没有对应的硬件结构.与之相反,USB总线和PCI总线在内核中是有对应的bus(USB-bus和PCI-bus)的.为了统一管理CPU这些既 ...
- Jmeter各种组件
断言 用于检查测试中得到的响应数据等是否符合预期,用以保证性能测试过程中的数据交互与预期一致 参数化关联 参数化:指对每次发起的请求,参数名称相同,参数值进行替换,如登录三次系统,每次用不同的用户名和 ...
- 升级OPENSSH踩过的坑
安装三个必要依赖包yum install gcc zlib-devel openssl-devel上传安装包,创建一个/tmp目录下,然后解压,将/etc/ssh/目录移动到本地解压安装包,进入安装目 ...
- ASP.NET WebAPI框架解析第二篇(HttpModule的创建和使用)
我们先看一下执行流程图 图中画红圈的部分便是HttpModule,在说创建HttpModule之前,先说一下HttpApplication对象,HttpApplication对象由Asp.net框架创 ...
- express 框架的使用方法
express 框架的使用方法: 第一步: 生成一个 (express)项目工程 命令提示框的指令是: express (文件名) express -e (文件名) 两段指令的 ...
- 警告Establishing SSL connection without server's identity verification is not recommended
[本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] SpringBo ...
- 位运算实现加减乘除四则运算(Java)
[本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 本文是继< ...
- 15.DRF-分页
Django rest framework(6)----分页 第一种分页 PageNumberPagination 基本使用 (1)urls.py urlpatterns = [ re_path('( ...
- MySql数据库GROUP BY使用过程中的那些坑
MySql数据库GROUP BY使用过程中的那些坑 GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组. 特别注意: group by 有一个原则,就是 select 后面的所有 ...
- 最短路之Floyd
#include<bits/stdc++.h>using namespace std;const int maxn = 300+10;int n,m,f[maxn][maxn],t; in ...