清空表单的几种方式

如果一开始表单是空的,可以使用reset重置;

如果一开始是有默认内容存在,则只能循环对每个输入项做清空处理。

jQuery版本:jQuery("#submitForm").get(0).reset()

普通版本:document.getElementById('submitForm').reset()

//submitForm 是表单form的id

    function submit(callback){
        document.getElementById("myform").submit()

        callback()

    }

    function reset(){

        $('#myform').reset()

    }

    function tijiao(){

        submit(reset)

    }

    <form id="myform" action="">

    <input type="text" name=""/>

    <input type="button" value="提交" onclick="tijiao()"/>

    </form>

如果直接用js提交后直接重置,有时候会报错,因为正在往后台传值的过程中,你就清空,会获取不到这个值。这就需要js的回调机制,上面已经写了回调函数。这样就可以保证将表单完全提交后才清空input.

asp表单提交的有两种情况。

1、如果是form表单上action直接提交到其他页面处理完了在跳回原来的页面的话,表单的文本框都会清空的。

a.asp

<form action="b.asp" method="post">

......

</form>

2、如果action是跳转到当前页面处理,并使用js脚本返回前一页【history.go(-1)】,才会出现数据没有清空现象。

针对这种情况,你直接使用location.href="a.asp"就会自动清空所有的数据,因为location.href就是重定向刷新当前页面,数据什么的都会被清空的。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是使用Element UI清空表的方法: 1. 在Vue组件中引入Element UI库和表验证插件: ```javascript import { Message } from 'element-ui' import { mapActions } from 'vuex' import { validate } from '@/utils/validate' ``` 2. 在data中定义表数据和表验证规则: ```javascript data() { return { formData: { name: '', age: '', email: '' }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值' } ], email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ] } } }, ``` 3. 在表中使用Element UI的el-form和el-form-item组件,并绑定表数据和验证规则: ```html <el-form :model="formData" :rules="rules" ref="form" label-width="80px"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="formData.age"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="formData.email"></el-input> </el-form-item> </el-form> ``` 4. 在表中添加清空按钮,并绑定清空表的方法: ```html <el-button type="primary" @click="submitForm('form')">提交</el-button> <el-button @click="resetForm('form')">重置</el-button> ``` 5. 在Vue组件中定义清空表的方法: ```javascript methods: { ...mapActions(['addUser']), submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { this.addUser(this.formData) this.resetForm(formName) Message.success('添加成功') } else { Message.error('表验证失败') return false } }) }, resetForm(formName) { this.$refs[formName].resetFields() } } ``` 以上就是使用Element UI清空表的方法。在表中添加一个重置按钮,并绑定清空表的方法即可实现清空表的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值