V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
mascteen
V2EX  ›  程序员

用最简单的方式实现前端校验,也许你并不需要任何框架

  •  
  •   mascteen ·
    janegwaww · 2023-04-12 09:16:37 +08:00 · 1461 次点击
    这是一个创建于 596 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端校验只是对用户的输入做一个简单的检测和提示,它并不是必须的选项。因为前端传入后端的数据一般都是不可靠的,它可以很容易的用一些手段跳过,这是由前端的特性造成的。但是做为一个负责任的工程师,前端传入给你的任何数据都必须经过检验。而前端做到的只是一些基本的校验,而真正的校验需要后端更严格的检测。但是为了用户体验,前端校验又是不得不做的一个基础功能,他针对用户输入的数据做一个提示与反馈,来告诉用户当前输入的数据是否有效。

    Table of Contents
    
    1. 什么是前端校验?
        1.1. 如何实现前端校验
    2. 一个简单的用做开始的范例
    3. 只用 HTML 和 CSS 实现前端校验
        3.1. 当我们使用 require 属性
        3.2. 用正则表过式规范输入
        3.3. 用 minlength 和 maxlength 规范字符串的长度
        3.4. 确定输入框的类型
        3.5. 总结下 HTML+CSS 的方法
    4. 用 JavaScript 实现前端校验
        4.1. 在 JavaScript 中调用 <input> 的 API
            4.1.1. 定制报错提示框中的内容
            4.1.2. 更多的校验定制
        4.2. 不使用 HTML 的 API ,只使用 JS
        4.3. 用函数式编程优化代码并扩展更多可能
        4.4. 用 reactJS 和 RamdaJS 实现前端校验
        4.5. 添加异步校验
    5. 总结
    6. 写在后面
    

    更多内容查看www.janegwaww.com

    sjhhjx0122
        1
    sjhhjx0122  
       2023-04-12 09:59:22 +08:00   ❤️ 1
    我们也不用框架或者组件库的验证,都是用 yup 或者 zod 做底层,封装一个表单验证库
    mascteen
        2
    mascteen  
    OP
       2023-04-12 15:28:19 +08:00
    @sjhhjx0122 thumb up
    estk
        3
    estk  
       2023-04-12 18:24:41 +08:00 via iPhone
    需要检验什么就叫 chatgpt 生成一段
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5552 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 08:51 · PVG 16:51 · LAX 00:51 · JFK 03:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.