- 引入:
app.json: "useExtendedLib":{ "weui": true }
文章来源:https://www.toymoban.com/news/detail-554726.html
使用页面or组件xxx.json文章来源地址https://www.toymoban.com/news/detail-554726.html
"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) {
// 验证通过
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()
}
})
到了这里,关于微信小程序weui-form表单的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!