哪种表单类型可以重置表单
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了哪种表单类型可以重置表单相关的知识,希望对你有一定的参考价值。
参考技术A 无论遇到哪种表单类型都可以用以下几种方法一:
我们可以通过就是实现
id:
代码如下:
document.getElementById("form1").reset();
name:
代码如下:
document.formName.reset();
方法二:
逐一清空:
代码如下:
$("#inp").val("1");
但是表单太多的话,这也是不实际的,有100个,1000个,总不能写100,个1000个吧。
也许你会说,写成这样:
复制代码 代码如下:
$("input").val("");
那表单的默认值呢?表单还有其他类型,都写一遍?
加type为reset的input
代码如下:
<form id="form1" action="" method="post" runat="server">
<input name="inp" id="inp" value="1" />
<input id="res" name="res" type="reset" style="display:none;" />
</form>
代码如下:
$("input[name='res']").click();
所有表单清空
ok
veevalidate 重置表单打字稿不会重置表单
【中文标题】veevalidate 重置表单打字稿不会重置表单【英文标题】:veevalidate reset form typescript does not reset the form 【发布时间】:2020-11-22 15:02:43 【问题描述】:我有一个带有 veevalidate 的表单。在表单提交时,数据被发送到父级,然后我需要重置表单。按照 veevalidate 说明,应该可以通过 $refs
重置表单。
我的应用使用 TypeScript,按照指南,我的组件如下所示:
<template>
<div>
<ValidationObserver v-slot=" handleSubmit " ref="form">
<form :model="form" @submit.prevent="handleSubmit(onSubmit)" novalidate>
<a-input-with-validation
:placeholder="placeholder"
:label="placeholder"
auto-complete="off"
name="comment"
type="text"
v-model="form.comment"
rules="required"
/>
<a-button-submit :translation-key="$t('dict.save')"/>
</form>
</ValidationObserver>
</div>
</template>
<script lang="ts">
import Component, Prop, Vue from 'vue-property-decorator'
import ValidationObserver, ValidationProvider from 'vee-validate'
import OItemCommentFormChildOutput from '@/components/organisms/forms/OItemCommentFormInterfaces'
import AInputWithValidation from '@/components/atoms/inputs/AInputWithValidation.vue'
import AButtonSubmit from '@/components/atoms/buttons/AButtonSubmit.vue'
@Component(
components:
AButtonSubmit,
AInputWithValidation,
ValidationObserver,
ValidationProvider
)
export default class OItemCommentForm extends Vue
@Prop()
comment?: string
@Prop( default: true )
add!: boolean
$refs!:
form: InstanceType<typeof ValidationObserver>;
placeholder!: string
form: OItemCommentFormChildOutput =
comment: ''
mounted ()
this.$refs.form;
created ()
this.placeholder = String(this.add ? this.$t('dict.addComment') : this.$t('dict.editComment'))
this.form.comment = this.comment || ''
onSubmit ()
this.$emit('child-output', this.form as OItemCommentFormChildOutput)
// this.form.comment = ''
this.$refs.form.reset()
</script>
a-input-with-validation
组件代码(来自 veevalidate):
<template>
<ValidationProvider
:vid="vid"
:name="nameAlt || name"
:rules="rules"
v-slot=" errors, valid "
>
<b-field
:label="label"
:prop="name"
v-bind="$attrs"
:auto-complete="autoComplete"
:type=" 'is-danger': errors[0], 'is-success': valid "
:message="errors"
>
<b-input
:name="name"
:type="type"
v-bind="$attrs"
:placeholder="placeholder"
v-model="innerValue"
:password-reveal="type === 'password'"
novalidate
/>
</b-field>
</ValidationProvider>
</template>
<style scoped>
.AInputWithValidation
</style>
<script lang="ts">
import Component, Prop, Vue, Watch from 'vue-property-decorator'
import ValidationObserver, ValidationProvider from 'vee-validate'
@Component(
components:
ValidationObserver,
ValidationProvider
)
export default class AInputWithValidation extends Vue
@Prop( required: true )
value!: any
@Prop( required: true )
label!: string
@Prop( required: true )
name!: string
@Prop( default: 'off' )
autoComplete!: string
@Prop( default: 'text' )
type!: string
@Prop()
nameAlt?: string
@Prop()
placeholder?: string
@Prop()
vid?: string
@Prop()
rules?: string
innerValue = ''
created ()
if (this.value)
this.innerValue = this.value
@Watch('innerValue')
innerValueHandle (newVal)
this.$emit('child-output', newVal)
this.$emit('input', newVal)
@Watch('value')
valueValueHandle (newVal)
this.innerValue = newVal
</script>
应用程序编译得很好,所以似乎没有 TS 错误。提交时,数据会正确发出。但是当我尝试调用reset
方法时,什么也没有发生。表单未重置,输入值保持不变。如果我还将表单中的注释强制为空字符串,则会触发验证器显示错误。
如何在表单提交后重置表单并清除表单内容而不触发验证错误?
(将ref="form"
移动到表单标签上也不会做任何事情:/)
【问题讨论】:
【参考方案1】:ValidationObserver
的reset()
只会重置验证状态,不会重置表单字段。虽然文档包含 form-reset demo that manually clears the fields,但您也可以在 <form>
元素上调用 HTMLFormElement.reset()
以将字段重置为其初始值。可以从SubmitEvent
的target 访问<form>
元素:
export default class OItemCommentForm extends Vue
async onSubmit(e)
// Wait microtick for models to update before resetting validation state
await this.$nextTick()
this.$refs.form.reset()
// Reset form in next macrotick
setTimeout(() => e.target.reset())
关键是在下一个macrotick 中重置表单(通过setTimeout
,超时为零)。
【讨论】:
这对 veevalidate 不起作用,因为事件没有传递给提交处理程序:/ValidationObserver.handleSubmit
只是在validate()
失败时提前返回。否则,它将调用给定的回调。您自己的 submit
-handler 可以使用 this.$refs.form.validate()
自己完成此操作,这就是我在链接演示中展示的内容。
如果您更喜欢使用handleSubmit
,看起来您必须自己清除表单字段(按照 VeeValidate 文档的规定)。我不确定是否有其他解决方法。以上是关于哪种表单类型可以重置表单的主要内容,如果未能解决你的问题,请参考以下文章