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

1. 引入：

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

使用页面or组件xxx.json

"usingComponents": {
     "mp-form": "weui-miniprogram/form/form"
  }
1
2
3

2. 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3. 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) {
                // 验证通过
                return
                addMembersOfFamily({
                    ...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()
    }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85