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

2023-04-12 09:16:37 +08:00
 mascteen

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

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

1451 次点击
所在节点    程序员
3 条回复
sjhhjx0122
2023-04-12 09:59:22 +08:00
我们也不用框架或者组件库的验证,都是用 yup 或者 zod 做底层,封装一个表单验证库
mascteen
2023-04-12 15:28:19 +08:00
@sjhhjx0122 thumb up
estk
2023-04-12 18:24:41 +08:00
需要检验什么就叫 chatgpt 生成一段

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/931799

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX