清除from表单验证，from 表单验证

原创 已于 2022-03-18 10:49:30 修改 · 592 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2022-03-18 10:25:52 首次发布
这篇博客详细介绍了在Vue.js中如何进行表单验证和数据提交。通过`el-form`组件结合`model`和`rules`属性实现表单绑定，并使用`resetFields`方法清除表单数据。点击按钮触发`UpdateMall`方法，调用`validate`对表单进行校验，确保数据有效后再执行更新操作。

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

export function Clear(_this){
    if(_this.$refs["form"]!=undefined){
        _this.$refs["form"].resetFields()
     }
}

 验证表单 绑定formMall  

        <el-form :model="formMall"  :rules="rulesMall" ref="formMall">
          <el-form-item
            label="道具名称"
            :label-width="formLabelWidth"
            required
          >
          <el-input v-model="formMall.propName" autocomplete="off" clearable disabled></el-input>
          </el-form-item>
  </el-form>

 <el-button type="primary" @click="UpdateMall('formMall')">确 定</el-button>

UpdateMall(form) {
      this.$refs[form].validate((valid) => {
          if (valid) {
               //去执行的事件
          } else {

            return false;
          }
        });
 },

Ftally
关注
el-form 规则校验-清空规则校验
Aa12364567的博客
03-15 1002
el-form 规则校验-清空规则校验。
前端利器 · 一文读懂 Vue Element UI VeeValidate 全局 表单验证 封装 （详细教程）
Bnana博客
04-04 3243
前端利器 一文读懂 Vue Element UI VeeValidate 全局 表单验证 封装 （详细教程 Vue 表单验证 Vue Element UI 表单 验证 Veevalidate 表单验证 表单验证解析 全局 表单验证封装 Vue 表单清空 Veevaliate 表单清空 veevalidate 3.2.5 veevalidate 自定义表单验证 Element UI 和 VeeValidate 表单验证对比 veevalidate 常用表单验证规则 一篇读懂 veevalidate 使用方法
vue+elementUi——form表单校验提示清除(技能提升)
热门推荐
yehaocheng520的博客
08-10 1万+
今天在写后台管理系统时，用到了表单校验，为了能够校验必填项和类型等，需要用到表单中的 rule校验规则。最终效果如下： 由于在此页面上，禁用和删除两个功能基本类似，因此我是共用的一个弹窗展示。 所以导致，在禁用页面表单校验完成后，再进入删除页面时，在没有点击提交按钮时，就直接进行了表单校验，提示了校验报错信息。这样并不影响使用，但是页面美观度会差很多。 因此需要在进入此弹窗页面时，清除表单校验。 clearValidate的用法 我从网上找到的校验方法是：this.$refs[formName].cle
element-ui表单清除校验
最新发布
weixin_39419463的博客
05-14 581
使用clearValidate和resetfields这两个方法，选哪一个看场景。
Vue 清除Form表单校验信息 清除表单验证上次提示信息
weixin_49098968的博客
02-22 8098
在Vue项目中使用Form组件进行表单验证，再次打开该表单时，上次的验证提示信息依然存在。解决再次打开时无法清除提示信息/字段值的问题。
el-form表单如何清除校验提示语
qq_42453751的博客
08-25 6093
el-form表单如何清除校验提示语 实现的表单如下： 步骤1.当未选择持卡人时，点击确认按钮，提示校验规则 步骤2.当选择关闭表单的时候，不会提示 步骤3.再次点进表单的时候（此时持卡人栏没有任何数据），校验规则不出现 问题：再次点击表单进入时，出现了校验规则 解决办法： 重点代码 :model=“fingerFrom” <el-form ref="fingerFrom" :model="fingerFrom" label-width="120px" class="di
vue 中 清除form 校验状态
maxiaole_z的博客
03-20 970
清除校验状态+数据清除校验状态。
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
在Vue.js框架中结合Element UI库...通过以上方法，我们可以有效地管理Vue+ElementUI应用中的对话框关闭、表单验证和状态恢复，提供更好的用户体验。记住，保持应用状态的一致性和清晰性对于提高用户满意度至关重要。
layui清空,重置表单数据的实例
10-16
值得注意的是，layui的`form`模块提供了丰富的表单操作功能，包括表单验证、动态加载数据等。在处理表单数据时，可以结合layui的其他API，如`form.val()`获取表单数据，`form.on('submit(...)', callback)`监听表单...
Vue项目开发之表单验证&增删改功能
qq_63492318的博客
09-16 1148
表单验证功能、增删改功能实现...
Vue 篇 解决ELement UI 中表单验证(多层Object嵌套)
Alice_OS的博客
04-07 2095
项目场景： 提示：主要是在 Vue 框架中： 用 Element UI 提供的规则进行表单验证 问题描述 因为我 data 里面嵌套了多层 Object, 所以 Element UI 提供的表单验证没有实现 form: { courseName: '', brief: '', teacherDTO: { teacherName: '', teacherHeadPicUrl: '', position: '', description: ''
el-form 清除表单验证结果
Julia_0502的博客
04-19 1万+
el-form 清除表单验证结果 总是遇到的一个表单验证问题，怕下次忘了，在这里记录一下 问题 编辑页面时总是在刚进入页面显示触发表单验证结果，由于此时并未提交，影响用户体验感 效果图如下： 代码实现： <template> <el-form ref="dateForm" :`rules`="`rules`" :model="workorderDeta
vue form表单验证清除
Lyouths的移动笔记本
07-28 4116
vue from 表单验证清除
清除el-form表单验证
活宝小娜的博客
10-19 975
当创建表单触发表单验证时，关闭弹窗，再次触发创建表单会触发表单验证
移除表单项的校验结果的用法
weixin_61978391的博客
04-25 2105
el-form-item label="材料类型：" :prop="'RawList.' + index + '.MaterialType'" :rules="rules.MaterialType">问题：当等于钢板时，是必填的，有必填校验，这时候，把材料类型换成型钢，板厚是不必填的，板厚前面的红色*已经没有了，但是上一次的校验结果还是在下面显示着。需求：表单中有一块的数据是可以手动动态增加的，同时板厚的是否必填是和材料类型有关的，当材料类型等于钢板时，板厚是必填的，当等于型钢时，是非必填的。
vue3的form表单提交校验及清除校验
weixin_64840387的博客
03-07 1476
3.清除form表单校验，加？是因为前面的ref的值可能为undefined。2.提交的function加入带人ref对象，记得引入相关类型。
antd Form 手动清除校验信息
luweisixsix的博客
02-09 1万+
ant design form 表单 手动清除校验失败提示信息
iview From表单清除校验状态
heerey525
11-05 4731
<Form ref="addOrUpdateInfoRef" :model="addOrUpdateInfo" :label-width="110" :rules="ruleValidate"> <FormItem label="投放时间" class="ivu-form-item-required"> <FormItem label="" prop="putInTime"> <DatePicker :disabled="addOrUpdat
vue---rules表单校验规则取消
maidu_xbd的博客
03-09 5884
需求说明： 在系统中，添加数据和编辑数据一般共用一个对话框，但存在个别项是添加数据中存在而编辑数据中不存在的项，那么这种情况下如何进行校验呢，如果直接在rules里写上该项的校验，那么提交编辑时将会提示缺少该项参数。 解决方法： 以用户管理中添加用户/编辑用户为例，当添加用户时需要输入密码，而编辑时后台不返回密码项，因此不需要密码项，如下图： （1）为el-form加上【:ru...
vant4清除表单正则验证
07-12
要在 Vant 4 中清除表单的正则验证，你可以使用 `clearValidate` 方法。以下是一个示例代码： 首先，你需要引入 `Form` 和 `Field` 组件： ```vue <template> <van-form> <van-field v-model="value" :rules="rules" clearable label="输入框" placeholder="请输入内容" ></van-field> <van-button type="primary" @click="clearValidation">清除验证</van-button> </van-form> </template> <script> import { ref } from 'vue'; export default { setup() { const value = ref(''); const rules = [ { pattern: /^[a-zA-Z0-9_-]{4,16}$/, message: '用户名必须为4-16位字母、数字、下划线或减号', }, ]; const clearValidation = () => { value.value = ''; // 清除验证状态 form.clearValidate(); }; return { value, rules, clearValidation, }; }, }; </script> ``` 在上面的代码中，我们创建了一个简单的表单，其中包含一个输入框和一个清除验证的按钮。`rules` 定义了输入框的正则验证规则。当点击清除按钮时，我们先清空输入框的值，然后调用 `clearValidate` 方法来清除验证状态。 请注意，在示例代码中使用了 Vue 3 的 Composition API。如果你使用的是 Vue 2，请相应地修改代码。 希望以上信息能对你有所帮助！如果你有更多问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值