先上代码。
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发生错误') } } }) } })
picker 是小程序自带的组件,类似于select,选择控件。
mp-* 是WeUI 的组件,使用之前需要在json文件中引入。
login.json
{ "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数组中可以加对象,里面的每一个对象都会去验证。
以上。