- 发布:2019-08-02 14:37
- 更新:2019-10-18 15:56
- 阅读:4267
uni-app form表单提交后,怎么清空表单数据??不通过按钮点击触发reset函数
2***@qq.com (作者)
<form @submit="formSubmit" @reset="formReset">
<view>
<view class="uni-title">姓名</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" name="nickname" placeholder="请填写您的昵称" />
</view>
</view>
</view>
<view>
<view class="uni-title">电话</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" name="phonr" placeholder="请填写您的电话" />
</view>
</view>
</view>
<view>
<view class="uni-title">标题</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" name="title" placeholder="请填写您的标题" />
</view>
</view>
</view>
<view>
<view class="uni-title">内容</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" name="content" placeholder="请填写您的内容" />
</view>
</view>
</view>
<view class="uni-btn-v uni-common-mt">
<button class="btn-submit" form-type="submit" type="primary">Submit</button>
</view>
</form>
formSubmit: function(res) {
console.log(res)
var _self = this;
var formdata = res.detail.value;
//定义表单规则
var rule = [{
name: "nickname",
checkType: "string",
checkRule: "1,3",
errorMsg: "姓名应为1-3个字符"
},
];
//进行表单检查
var formData = res.detail.value;
var checkRes = graceChecker.check(formData, rule);
if (checkRes) {
//进行表单检查 验证通过 进行网络判断
uni.getNetworkType({
success: function(res) {
let status = res.networkType;
if (status == "4g" || status == "wifi") {
uni.showToast({
title: status + '准备提交',
duration: 2000
});
_self.formReset()
} else {
uni.showToast({
title: status + '保存本地,稍等会提交',
duration: 2000
});
uni.setStorage({
key: 'formInfo',
data: formdata,
success: function(res) {
console.log(res);
}
});
}
}
});
} else {
uni.showToast({
title: graceChecker.error,
icon: "none"
});
}
},
formReset: function(e) {
console.log(e)
this.chosen = ''
}
成熟的稻穗 - csdds.cn
<view class="uni-padding-wrap uni-common-mt">
<form @submit="formSubmit" @reset="formReset">
<view class="uni-form-item uni-column">
<view class="title">switch</view>
<view>
<switch name="switch" />
</view>
</view>
<view class="uni-btn-v">
<button formType="submit" ref="testBtn">Submit</button>
</view>
</form>
</view>
formSubmit: function(e) {
console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
this.$refs.testBtn.$dispatch('Form', 'uni-form-reset', {
type: 'reset'
})
}
成熟的稻穗 - csdds.cn
<view class="uni-padding-wrap uni-common-mt">
<form @submit="formSubmit">
<view class="uni-form-item uni-column">
<view class="title">switch</view>
<input type="text">
<view>
<switch name="switch" />
</view>
</view>
<view class="uni-btn-v">
<button formType="submit" ref="testBtn">Submit</button>
</view>
</form>
</view>
formSubmit: function(e) {
console.log('form发生了submit事件,携带数据为:'+JSON.stringify(e.detail.value))
this.$refs.testBtn.$dispatch('Form', 'uni-form-reset', {
type: 'reset'
})
}
2***@qq.com (作者)
执行那个formreset方法 不触发呀
2019-08-02 14:48
成熟的稻穗
回复 2***@qq.com: 检查是不是this指向问题 你没贴代码。。没办法帮你分析
2019-08-02 14:57