微信小程序weui-form表单的使用

引入：

app.json: "useExtendedLib":{ "weui": true }

使用页面or组件xxx.json

"usingComponents": {"mp-form": "weui-miniprogram/form/form"}

wxml构建、

<view class="add-from" mut-bind:tap="empty"><mp-form id="addform" ref="addform" rules="{{dynamicRules}}" models="{{formData}}"><view class="uni-forms-item" required name="membersOf"><label for="membersOf">关系</label><input value="{{formData.membersOf}}" bindinput="handInputChange" type="text" id="membersOf" name="membersOf" placeholder="请输入关系" /></view><view class="uni-forms-item" required label="姓名" name="name"><label for="name">姓名</label><input value="{{formData.name}}" bindinput="handInputChange" type="nickname" id="name" name="name" placeholder="请输入关系人姓名" /></view><view class="uni-forms-item" required label="手机号码" name="phone"><label for="phone">手机号码</label><input value="{{formData.phone}}" bindinput="handInputChange" type="text" id="phone" name="phone" placeholder="请输入手机号码" /></view><view class="uni-forms-item" required label="身份证号码" name="cardId"><label for="cardId">身份证号码</label><input value="{{formData.cardId}}" bindinput="handInputChange" type="idcard" id="cardId" name="cardId" placeholder="请输入身份证号码"/></view></mp-form><button bindtap="submitForm" class="form-submit" type="primary">确定</button>
</view>

js 部分

import {getMembersOfFamily,addMembersOfFamily} from '../../../utils/api'
import {checkIDCard} from '../../../utils/util'
Page({/*** 页面的初始数据*/data: {formData: {cardId: '',membersOf:'',name:'',phone:''},dynamicRules: [{name: 'cardId',rules: [{required: true, errorMessage: '请输入身份证号码'}, {validator: (rule: AnyObject,value: string) => {if(checkIDCard(value)) {return rule.message}}, message: '身份证号码格式不正确'}]},{name: 'membersOf',rules: [{required: true, errorMessage: '请输入所属关系'}, {maxLength: 10}]},{name: 'name',rules: [{required: true, errorMessage: '请输入所属姓名'}, {maxLength: 20}]},{name: 'phone',rules: [{required: true, errorMessage: '请输入所属手机号'},{mobile: true, message: '电话格式不对'}]}]},// 简易双向数据绑定handInputChange (e:any) {this.setData({[`formData.${e.target.id}`]: e.detail.value})},submitForm () {this.selectComponent('#addform').validate((valid:Boolean, errors:any) => {if(valid) {// 验证通过returnaddMembersOfFamily({...this.data.formData}).then(res => {if((res as AnyObject).code === 200) {wx.showToast({title: '新增成功',icon: 'none'})this.getMembers()} else {wx.showToast({title: (res as AnyObject).msg,icon: 'none'})}})} else {const firstError = Object.keys(errors)if(firstError.length) {wx.showToast({title: errors[firstError[0]].message,icon: 'none'})}}})},onShow() {this.getMembers()}})

微信小程序weui-form表单的使用相关推荐

微信小程序表单提交php存储,微信小程序实现form表单本地储存数据
本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为 ...
微信小程序开发——form表单
WeChat小程序交流(QQ群:769977169) 效果图代码示例 1.xxx.wxml <form bindsubmit='submitClick' bindreset='resetCli ...
微信小程序中form 表单提交和取值实例详解
2019独角兽企业重金招聘Python工程师标准>>> 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="on ...
微信小程序提交form表单内容
wxml <form catchsubmit="confirmPublish"><view class="cu-form-group margin-to ...
微信小程序的动态表单，实现房屋租赁的多租客录入
0 前言本文将介绍如何使用微信小程序编写动态表单,最终实现房屋租赁系统中多租客录入的业务. 在阅读本文前,您需要对微信小程序的开发有一个初步的了解,以便更容易的学会开发动态表单. 作者主页:Desi ...
微信小程序开发之表单验证（WxValidate使用）
微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用 ...
微信小程序之获取表单数据
前言:微信小程序中很多地方运用到了表单,很多时候我们需要把表单中的内容提取出来返回给后台,这里我随便写了一点注意点: 1.所有的input textarea button全部包含在form表单元素 ...
微信小程序+SpringMVC图文表单提交（包括前后端代码）
文章目录前言一.基本功能说明二.小程序前端三.SpringMVC后端总结前言本项目使用微信小程序+SpringMVC搭建.这里展示的是其中表单提交的部分(图片和文字).本文包括前后端关键 ...
微信小程序之from表单提交数据到PHP后台
主要内容:实现微信小程序与PHP后台之间的数据传递本文通过from表单提交到后台存入数据库来展现需要注意的有: 勾选代码如下: demo1.wxml <!--pages/demo1/dem ...
小程序 | 微信小程序from报名表单提交至数据库（含js提交函数）
效果图 index.wxml <form bindsubmit="formSubmit" bindreset="formReset"><!-- ...

微信小程序weui-form表单的使用

微信小程序weui-form表单的使用相关推荐

最新文章

热门文章