首页 > 其他分享 >js 非常好用且优雅的步骤校验、提交校验、自定义校验写法

js 非常好用且优雅的步骤校验、提交校验、自定义校验写法

时间:2024-03-26 16:37:32浏览次数:24  
标签:01 name 自定义 age 校验 js 字段 form

很多form表单和其它场景,在提交前或进入下一步前需要校验逻辑,这里总结了一个通用方法:

 

      const form = {
        name: '',
        age: 20,
        time: ['2100-01-01', '2100-01-01']
      }

      const validForm = () => {
        // 校验状态总结
        let valid = {
          status: true,
          message: ''
        }
        // 解构、重命名等操作
        const {
          name,
          age,
          time: [timeStart, timeEnd]
        } = form
        // 校验逻辑集合。
        const validList = [
          ['name字段不能为空!', () => name],
          ['age字段值不能大于19!', () => age <= 19],
          ['name字段长度大于4时,age字段不能小于等于10!', () => name.length > 4 && age > 10],
          [
            'age字段为19时,time字段的开始时间必须小于于当前时间,结束时间必须大于当前时间',
            () => {
              if (age === 19) {
                return +new Date(timeStart) < +new Date() && +new Date(timeEnd) > +new Date()
              } else {
                return true
              }
            }
          ]
        ]
        // 按数组顺序往下校验,遇到一个不成功就退出
        for (const list of validList) {
          if (!list[1]()) {
            valid.status = false
            valid.message = list[0]
            break
          }
        }
        if (!valid.status) alert(valid.message)
        return valid.status
      }

      // 提交函数
      const submit = () => {
        if (!validForm()) return false
        alert('提交成功')
      }

      submit() // 提示:name字段不能为空

      form.name = 'william'
      submit() // 提示:age字段值不能大于19

      form.age = 8
      submit() // 提示:name字段长度大于4时,age字段不能小于10

      form.age = 19
      submit() // 提示:age字段为19时,time字段的开始时间必须小于于当前时间,结束时间必须大于当前时间

      form.time = ['2018-01-01', '2100-01-01']
      submit() // 提交成功

 

标签:01,name,自定义,age,校验,js,字段,form
From: https://www.cnblogs.com/wiliam/p/18096990

相关文章

  • 37.html+css+js网页设计实例/“音乐”酒吧主题介绍/web前端期末大作业/
    一、前言本实例以“音乐”酒吧为主题设计,响应式web,应用html+css+js,包括图片轮翻效果、视频、音频、留言板等,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我交......
  • js使用正则从字符串中取出img标签
    要使用正则表达式从字符串中提取<img>标签,您可以使用以下代码:conststr=`Sometext<imgsrc="image.jpg"alt="Image">andmoretext<imgsrc="another.png"alt="Another">`;constregex=/<img[^>]*>/g;constimgTags......
  • 【附源码】Node.js毕业设计个人健康信息记录移动应用app(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:随着科技的进步和互联网的普及,移动应用已经成为人们日常生活中不可或缺的一部分。在健康管理领域,个人健康信息记录移动应用APP的开发和应用也日益受到关注......
  • 【附源码】Node.js毕业设计个人健康管理小助手(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:随着社会节奏的加快和工作压力的增大,个人健康管理成为了人们日益关注的焦点。传统的健康管理方式往往需要用户手动记录健康数据,如饮食、运动、睡眠等,然后进......
  • 【附源码】Node.js毕业设计个人财务管理系统(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:在当今社会,随着经济的快速发展和人们生活水平的提高,个人财务管理已经成为了我们生活中不可或缺的一部分。无论是日常生活的消费记录、投资理财,还是购房、购......
  • 代码随想录算法训练营第二十七天|●39. 组合总和 ● 40.组合总和II ● 131.分割回文串
    39组合总和题目链接/文章讲解:https://programmercarl.com/0039.%E7%BB%84%E5%90%88%E6%80%BB%E5%92%8C.html视频讲解:https://www.bilibili.com/video/BV1KT4y1M7HJ一开始自己写的大概和答案差不多,但是弄不明白回溯要传递的参数,但是自己一开始想到了终止条件,如果>7了就......
  • ssm基于Vue.js的在线购物系统的设计与实现论文
    毕业设计(论文)在线购物系统学院专业班级学号用户姓名指导教师完成日期年月日摘要随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于在线购物系统当然也不能排除在外,随着网络技术的不断成熟,带动了在线购物系统,它彻......
  • 消失的留言(HTML中用JS实现)
    学习目标:提示:这里可以添加学习目标例如:一周掌握Java入门知识学习内容:掌握延时函数的使用掌握JavaScript控制css属性的方法学习:提示:这里可以添加计划学习的时间例如:框架+文字<!DOCTYPEhtml><htmllang="zH-Hans"><head><metacharset="UTF-8"><metaname=......
  • Android证书校验出现java.io.IOException: Invalid keystore format错误的解决方案
    使用下面命令keytool-list-v-keystore签名.keystore出现错误java.io.IOException:Invalidkeystoreformat一般出现这种错误的情况有2种可能1.密码错误2.JDK版本问题1.如果是JDK8生成的keystore,然后用JDK11(+)执行是没问题的,当前情况不需要解决,因为是成功......
  • 【御控】JavaScript JSON结构转换(1):对象To对象——键值互换
    文章目录一、JSON是什么?二、JSON结构转换是什么?三、核心构件之转换映射四、案例之《JSON对象ToJSON对象》五、代码实现六、在线转换工具七、技术资料一、JSON是什么?Json(JavaScriptObjectNotation)产生于20世纪90年代初,最初由道格拉斯·克罗克福特(DouglasCrockfo......