微信小程序weUI ＜mp-form＞提交清空input框的值

最新推荐文章于 2025-03-12 16:46:12 发布

紫蓝清秋

最新推荐文章于 2025-03-12 16:46:12 发布

阅读量3.9k

点赞数

文章标签：微信小程序 javascript 小程序

本文链接：https://blog.youkuaiyun.com/sqitarn/article/details/121898787

版权

本文档描述了在使用微信小程序中的mp-form组件时遇到的问题，即在提交表单后无法清空input输入框的内容。作者通过尝试直接设置formData的值为空无效，最终找到了解决方案，即为每个input绑定model:value，并在提交后分别设置这些值为空，从而成功清空input。此外，代码中还展示了如何使用mp-toptips显示错误信息和mp-form的validate方法进行表单验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<mp-form id="form" class="cont_add_a1" rules="{{rules}}" models="{{formData}}">

当使用mp-form使用按钮提交，数据通过models绑定，点击提交的时候需要清空input框里的值，试过将formData的值置为空，没有效果

最后想到的办法是，将每个input使用model:value绑定数据，点击按钮之后通过将值设为空来清除input框中的内容

<mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
    <mp-form id="form"  class="cont_add_a1" rules="{{rules}}" models="{{formData}}">
        <mp-cells class="my-cells">
            <mp-cell prop="name"  class="a1_item" title="姓名" >
                <input bindinput="formInputChange" model:value="{{name}}" data-field="name" class="weui-input" placeholder="请输入姓名"/>
            </mp-cell>
            <mp-cell prop="phone" class="a1_item" title="手机号码" > 
                <input bindinput="formInputChange" model:value="{{phone}}" data-field="phone" class="weui-input" placeholder="请输入手机号码"/>
            </mp-cell>
        </mp-cells>

        <!--  -->
        <view slot="button">
            <button class="btn" style="margin: 88rpx auto;" bindtap="submitForm">提交</button>
        </view>
    </mp-form>

	 submitForm() {
        console.log(this.data.formData)
        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 {
                // 提交资料
                this.setData({
                    [`formData.phone`]: '',
                    name: '',
                    phone: ''
                })
				console.log('已清空')
            }
        })
        // this.selectComponent('#form').validateField('mobile', (valid, errors) => {
        //     console.log('valid', valid, errors)
        // })
    },