wxml页面如下
<!--pages/init/init.wxml-->
<view class="page">
<mp-form-page>
<mp-form id="form" bindsubmit="submitForm">
<mp-cells title="登录">
<mp-cell prop="mobile" title="手机号" ext-class="">
<input name="mobile" class="weui-input"
placeholder="" />
</mp-cell>
<mp-cell prop="password" title="密码" ext-class="">
<input name="password" class="weui-input"
placeholder="" />
</mp-cell>
</mp-cells>
<view slot="button">
<button class="weui-btn" form-type="submit" type="primary">确定</button>
</view>
</mp-form>
</mp-form-page>
</view>
js如下
// pages/init/init.js
import CustomPage from '../../base/CustomPage'
CustomPage({
data: {
},
submitForm: function(e){
console.log(e)
wx.request({
url: 'https://xxx',
data:{},
success(rsp){
console.log(rsp)
},
complete(d){
console.log(d)
}
})
console.info("form.submited")
}
})
是在开发工具中测的 调试基础库是 2.16.1
楼主可以参考以下链接https://github.com/wechat-miniprogram/weui-miniprogram/tree/master/src/example/form,这里是一个mp-form的示例,看起来并不能像fom一样通过bindsubmit触发事件后提交表单,应该需要和formpage一起使用,提交则是需要自己定义提交的按钮使用bindtap检测事件,在检测到事件后的方法也是通过获得#form组件来获得其中的数据的,示例中具体代码如下:
WXML:
<button class="weui-btn" type="primary" bindtap="submitForm">确定</button>
JS:
submitForm() { 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: '校验通过' }) } })
具体还请参考文档和相关示例
你好,请自行参考文档
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/form.html
https://github.com/wechat-miniprogram/weui-miniprogram/blob/master/docs/form.md
又试了下 只要把mp-form改成form就正常了
奇怪 mp-form为啥不行?
看weui官方文档 form.wxml中就是用的mp-form啊 只是没有示例如何提交