收藏
回答

weui包装后的mp-form怎么提交不了呢?

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

回答关注问题邀请回答
收藏

3 个回答

  • Run
    Run
    2023-04-26

    楼主可以参考以下链接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: '校验通过'
    	                })
    	            }
    	        })
    


    具体还请参考文档和相关示例

    2023-04-26
    有用
    回复
  • Cjiang
    Cjiang
    2021-05-14

    你好,请自行参考文档

    https://developers.weixin.qq.com/miniprogram/dev/extended/weui/form.html

    2021-05-14
    有用
    回复 3
  • 2021-05-14

    又试了下 只要把mp-form改成form就正常了

    奇怪 mp-form为啥不行?

    看weui官方文档 form.wxml中就是用的mp-form啊 只是没有示例如何提交

    2021-05-14
    有用
    回复 1
    • rayliao
      rayliao
      2021-05-27
      但是改成form,但是排版样式又跟mp-form的不一样了,里面的input那些。
      2021-05-27
      回复
登录 后发表内容