前端工作总结261-表单验证重置

简介: 前端工作总结261-表单验证重置
/*3GY歌谣表单验证 通过继续前行*/
      this.$refs["form"].validate(valid => {
          if (valid) {
            setTimeout(() => {
              /*声明变量*/
              let method = postAction;
              /*声明url
              * position()
              * */
              /*url=/user*/
              let url = this.url.add;
              /*4 判断是否有id 确定新增还是编辑  根据表单数据是否有 id 属性,判断是新增还是编辑操作
                // 如果有id的话 就需要进行*/
              if (this.form.id) {
                method = putAction;
                /*编辑操作 /user*/
                url = path.join(this.url.edit, this.form.id);
              }
              /*如果没有请求地址 就做出判断*/
              if (!url) {
                this.$message.warning("请设定请求 url!");
                return;
              }
              /*5GY 通过这边取触发父亲级别的方法*/
              method(url, this.form).then(res => {
/*实现文字居中逻辑<div style=";"><p style="display:flex;font-weight: bold;text-align: center;*/
                this.$message.success({
                  dangerouslyUseHTMLString: true,
                  message:'<p>提交成功</p>'});
                /*this.$refs["form"].reset*/
                this.$refs["form"].resetFields()
                this.$emit("ok");
              });
            }, 400);
          }else {
            setTimeout(() => {
              this.$message("请您按照要求填写信息")
              this.$refs["form"].resetFields()
              return false;
            }, 400);

运行结果

表单重置需要在then后面重置

相关文章
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
前端开发
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
127 0
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
159 0
|
移动开发 前端开发 JavaScript
前端表单验证的完美攻略:HTML5属性与JavaScript方法的无缝对接,让你的Web应用数据输入既安全又优雅
【8月更文挑战第31天】本文介绍前端表单验证的重要性及其实现方法,利用HTML5的内置属性如`required`、`pattern`和`minlength`进行基本验证,并借助JavaScript处理复杂逻辑,如密码确认。通过示例代码详细展示了如何结合两者实现高效且友好的表单验证,同时使用CSS增强用户体验。此方法简化开发流程并提升验证效果。
462 0
|
前端开发 JavaScript
“构建高效的前端表单验证与增删改功能实现“
“构建高效的前端表单验证与增删改功能实现“
128 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置2
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置2
112 0
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-对话框关闭时候重置页面
前端学习笔记202305学习笔记第二十一天-vue3.0-对话框关闭时候重置页面
171 0
|
前端开发
前端项目实战叁拾陆-​react-admin+material ui-侧边栏样式设定重置
前端项目实战叁拾陆-​react-admin+material ui-侧边栏样式设定重置
217 0
|
前端开发
前端项目实战28-表单置空数据重置为null
前端项目实战28-表单置空数据重置为null
148 0
前端项目实战28-表单置空数据重置为null
|
前端开发 JavaScript
前端工作总结195-vue带参数跳转其他页面
前端工作总结195-vue带参数跳转其他页面
229 0
前端工作总结195-vue带参数跳转其他页面

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式