怎么可以找到做公益的网站,网页制作视频怎么设置,企业网站带后台模板,wordpress生成静态教程前言今日早读文章由阿里布达投稿分享。布达#xff0c;Alibaba Fusion项目组的。花名潕量。主要专注在设计系统、组件、可视化搭建这个领域正文从这开始#xff5e;#xff5e;Fusion Next - Form 表单解决方案前端的Form 表单主要用于解决数据获取、数据校验、数据赋值 这三… 前言今日早读文章由阿里布达投稿分享。布达Alibaba Fusion项目组的。花名潕量。主要专注在设计系统、组件、可视化搭建这个领域正文从这开始Fusion Next - Form 表单解决方案前端的Form 表单主要用于解决数据获取、数据校验、数据赋值 这三大类问题。这篇文章里面的提供的解决方案能够比较完美的用在 React 框架上但是解决问题的思路相信应该是可以使用于任何框架语言。中后台的表单组件已经不仅仅有 input 和 select可能还扩展到 范围选择器、日期选择器 等这些组件往往为了实现更优雅的UI和更使用的交互会在原生的组件上面做多层封装而经过多层叠加后可能已经看不到原生表单元素的影子了。比如经过封装下面这段 DOM 结构经过样式修改也可能成为一个输入组件虽然完全看不到 input 的影子 contentEditable所以为了便于大家理解我这里从传统的原生 form 说起好让大家有一个递进的过程。引子原生 form 表单最初始的一份代码如下代码很简单看着也很舒服。 action/api/post methodpost username: nameusername / password: namepassword / typesubmitsubmit但是你开始做数据校验相关表单就立刻变得复杂多了。如下代码增多了一倍。function checkname(target) {const value target.value;if (value.length 10) { document.getElementById(username_msg).innerHTML 长度必须10} else { document.getElementById(username_msg).innerHTML }}function checkpassword(target) {const value target.value;if (!value.match(/^[\w]{6,16}$/)) { document.getElementById(password_msg).innerHTML 密码必须 6-16 位字母数字} else { document.getElementById(password_msg).innerHTML }}function getInitData() { ajax({ url:/api/data, success:function(data) { document.getElementById(username) data.username;});} getInitData(); action/api/post methodpost username: nameusername onchangecheckname(this)/ idusername_msg passowrd: namepassword onchangecheckpassword(this)/ idpassword_msg typesubmitsubmit如果把DOM的部分也用JS来实现基本可以做到只修改JS不需要再动DOM结构但是也让JS的复杂度增高不少。React 里面所有的DOM结构都是自己通过JS 生成的JSX也可以方便的实现DOM结构。但这里我拿原生表单举例只是想说用 React 写出来的原生表单并不比用原生 JS 的优雅多少React 中的原生 form 表单同样一段最简单的功能套在 react 框架下面是这个样子。class Demo extends React.Component { render() {return form action/api/post methodpost username: input nameusername / passowrd: input namepassword /button typesubmitsubmitbuttonform}}比如同样想要实现校验输入自动校验 和 赋值看下面一段代码想想就是一大堆事情要做。class Demo extends React.Component { state { username: , password: , usernameMsg: , passwordMsg: ,}; checkname e {// 获取数据const value e.target.value;// 受控模式赋值this.setState({ username: value,});// 校验数据if (value.length 10) {this.setState({ usernameMsg: 长度必须10,});} else {this.setState({ usernameMsg: ,});}}; checkpassword e {// 获取数据const value e.target.value;// 受控模式赋值this.setState({ password: value,});// 校验数据if (!value.match(/^[\w]{6,16}$/)) {this.setState({ passwordMsg: 密码必须 6-16 位字母数字,});} else {this.setState({ passwordMsg: ,});}}; handleSubmit () { ajax({ url: /api/post, data: { username: this.state.username, password: this.state.password,}, success: () { // success},});}; render() {// 获取数据和错误信息const { username, password, usernameMsg, passwordMsg } this.state;return (form action/api/post methodpost username: input value{username} onChange{this.checkname} /{usernameMsg}span passowrd: input value{password} onChange{this.checkpassword} /{passwordMsg}spanbutton typesubmit onClick{this.handleSubmit} submit buttonform);}}代码有点长大家大致看一眼干什么的就行从上面一系列代码中基本可以总结出一个现象要想实现表单数据获取、校验基本离不开 onChange 这个方法而且是有几个表单控件就要写几个 onChange 。(以上代码可直接运行可以在 https://codepen.io/frankqian/pen/XOROBw?editors0010 调试)其实这里和框架并没有什么关系因为不管用什么框架要想做到 赋值和校验 这两个功能基本一定要在 input 上面绑定 onChange。 所以如果有个通用的工具可以自动帮你把这些onChange的绑定都做了再把校验规则固定下是不是所有的表单问题都可以解决了呢是的通用表单解决方案就是按照这种思路设计出来的适用于所有 React 表单组件的解决方案所有的用 React 写成的组件都可以使用该方案。甚至 非 React 体系也可以使用改思路来解决问题。基于所有表单控件都需要绑定 onChange 做数据获取和校验的原则所以我设计了一个 Field 工具。这个工具原理很简单就是可以自动帮你绑定 value onChange 解决上面一长串代码的问题。const field new Field(this);field.init(username);field.init 会自动返回 value onChange 内容如下:{ value: , onChange: ƒ ()}下面这张图简单表面 Field 和 React 体系之间的关系。1. 使用 Field 获取数据import {Field} from alifd/next;class Demo extends React.Component { field new Field(this); handleSubmit () { console.log(this.field.getValues()); // 获取数据} render() {const {init} this.field;return username: input {...init(username)} / passowrd: input {...init(password)} /button onClick{this.handleSubmit} submitbuttonform}}这样一个表单的数据获取问题就解决了代码简洁了很多。 Demo 在这里 https://codepen.io/frankqian/pen/xMdoxZ?editors0010 可以自己调试2. 表单校验既然能够获取到数据了那边表单校验是顺手的事情因为校验只依赖数据。我们只需要对集中固定的交互性形式和校验规则做抽象就好了。交互形式上大概包含以下三类输入的时候实时校验一般 onChange 触发离开焦点的时候校验一般 onBlur 触发通过自定义的操作来触发校验自己调用 api 触发常见的校验规则抽象规则名称描述类型触发条件/数据类型required不能为空Booleanundefined/null/“”/[]pattern校验正则表达式正则minLength字符串最小长度 / 数组最小个数NumberString/Number/ArraymaxLength字符串最大长度 / 数组最大个数NumberString/Number/Arraylength字符串精确长度 / 数组精确个数NumberString/Number/Arraymin最小值NumberString/Numbermax最大值 / 数组精确个数NumberString/Numberformat对常用 pattern 的总结url/email/tel/numberStringvalidator自定义校验Function这里说明下表单是弱类型的数据。比如 input 框里面你希望用户输入的是整数返回的 value 类型可能有两种“123456”, String 类型的整数校验方式为 /\d/123456, Number 类型的整数校验方式为: typeof Value ‘number’这个时候要求用户一定要返回 Number 类型才能校验非常不友好所以在 Field 校验逻辑里面就把类型的问题处理掉了而不是交给用户去判断。上面是小插曲我们继续看如下 Field 表单的代码解决了数据获取、表单校验的所有功能。import { Field } from alifd/next;class Demo extends React.Component { field new Field(this); handleSubmit (e) { e.preventDefault();this.field.validate(); // 自定义校验 console.log(this.field.getValues()); // 获取数据} render() {const {init, getError} this.field;return username: input {...init(username, {rules: { required: true, minLength: 10}})} /span style{{color: red}}{getError(username)}/span {/**错误信息**/} passowrd: input {...init(password, {rules: { pattern: /^[\w]{6,16}$/, message: 密码必须 6-16 位字母数字}})} /span style{{color: red}}{getError(password)}/span {/**错误信息**/}button onClick{this.handleSubmit} validatebuttonform}}这样之前可能需要 70 行的代码 24 行就可以解决了可以让代码清晰不少。调试demo见 https://codepen.io/frankqian/pen/vbZmXE?editors00103. 写自定义的事件既然 init 会自动返回 onChange那么如果我希望自己在 onChange 里面加一些逻辑改怎么处理呢。如果直接写 onChange 会被 init 覆盖掉不管写前面还是后面总有一个onChange会被覆盖掉 onChange{(value) console.log(value)} {...init(username)}
/所以在 init 提供了 props 可以把组件原生的 props 透传进去Field内部会做好 hook 逻辑处理。 {...init(username, {props: {onChange:(value) console.log(value)}})} /大家用起来觉得很麻烦后面会再介绍如果在 Form 层面设计的更加趋向于原生方法的使用4. 自己写的表单组件怎么用现在很多React 组件是在原生组件之上又做了封装还有很多组件可能并没有包裹表单元素(比如 Fusion Select 里面并没有 select 元素下拉框是自己做的 )。但是只要你自己写的组件也遵循表单的规则就可以使用该方案。4.1 基本: value onChange 受控规则这个规则其实来自原生 html 的组件我们自己写的组件只要按照标准来都可以使用 Field。自己写的组件比起原生的表单组件会更加美观交互更友好。只要遵循规范都能在 field 里面使用详细demo 见 https://codepen.io/frankqian/pen/gqRWJx?editors0010这个规则其实来自原生 html 的组件我们自己写的组件只要按照标准来都可以使用 Field。4.2 高级功能满足更加人性化的需求还有一些其他更加细粒度的规则是为了让你的组件更加好的适配高级功能比如一键 reset 清空所有数据。因为每个组件的接收数据类型不一样所以统一为在 willReceiveProps 里面接收 valueundefinedcomponentWillReceiveProps(nextProps) {if (value in nextProps ) {this.setState({ value: nextProps.value undefined? []: nextProps.value // 设置组件的被清空后的数值})}}一次交互操作只抛一次 onChange比如 upload 上传如果一次上传触发上百次 onChange那么整个页面会跟着一起 Render 几百次非常影响性能Upload 上传完成才是用户想要的结果比如 Slider 在拖动的时候如果实时触发 onChange那么在拖动滑块的时候可能会非常卡顿。所以鼠标松开的那个瞬间触发才是比较合理的操作其他的拖拽事件可以交给 onProgressSlider 的拖动释放的那一刻可能才是用户想要的数据Fusion Next 的表单组件基本都已经是按照这套规范标准实现了详细可以查看这里的文档 https://fusion.design/component/field 拉到最下面Form 组件让体验持续升级上面知道了 Field 可以解决校验、获取、赋值等数据方面的问题但是并不能解决 UI 和 交互的问题在布局和错误展示的时候需要自己来控制。常用场景抽象让布局更轻松场景的布局有水平 inline 布局、垂直的分栏布局通过 FormItem 的 api 可以非常轻松的做到。垂直布局 labelUsername: namefirst placeholderfirst/ namesecond placeholdersecond/ labelPassword: required htmlTypepassword namepass placeholderPlease enter your password!/ label Submit垂直布局水平布局 inline...水平布局标签内置 labelAligininset...标签内嵌辅助错误展示出错的时候自动展示错误信息不需要自己 getError 判断。 每种状态怎么展现由各自的组件自己实现。减少和Form的耦合每个组件的加载中、成功、失败都由组件自己实现Form 只是在校验的时候传递 state 给各个组件这样不需要 Form 去关心每个组件应该展现为什么样 stateerror / // 错误状态 stateloading / // 加载中 statesuccess / // 成功 stateerror / // 错误状态进一步优化 Form 让使用更简单以上我们还是 Field Form 配合来使用的代码基本是这个样子。import { Form, Input, Field, Button } from alifd/next;const FormItem Form.Item;class Demo extends React.Component { field new Field(this); handleSubmit () {this.field.validate();} render() {const {init} this.field;return Form field{this.field}FormItem labelUsername:Input {...init(username, { rules: {required}})} /FormItemFormItem labelPassword:Input {...init(password, { rules: {pattern:/[\w]{6,16}/}})} htmlTypepassword /FormItemFormItem label Button onClick{this.handleSubmit} SubmitButtonFormItemForm}}可能写多了之后就会想每个组件都要使用 init 、都需要写 rules 规则而且在 jsx 中写一大串的 JSON 数据。是否有方法让数据获取和校验变得更简单让代码再进一步的简化呢进一步集成 Field 能力而弱化用法针对以上问题对 Form 进一步优化把 Field 的能力整合进了 Form而把 Field 的用法进一步弱化让大家不需要再关心 init/取数据 等问题。代码如下import { Form, Input, Button } from alifd/next;const FormItem Form.Item;class Demo extends React.Component { handleSubmit (values, errors) {if (errors) {// 校验出错 return;} console.log(values) // 获取数据} render() {return FormFormItem labelUsername: requiredInput nameusername /FormItemFormItem labelPassword: pattern{/[\w]{6,16}/}Input namepassword htmlTypepassword /FormItemFormItem label Form.Submit validate onClick{this.handleSubmit} SubmitForm.SubmitFormItemForm}}上面代码中可以看出几个优化点不需要关注 Field 用法改成 Form API 的方式。用法简单直接不少通过 name 来进行数据初始化也更加接近原生 form 的用法大家更容易理解。校验功能 API 化代码更加简洁可读性增强后记Form 的优化一定不会仅仅止于此因为在实际业务中会遇到更加复杂的功能。很多业务为了更加方便快捷会抽象常用的组件布局通过后端接口吐出JSON schema的方式直接在前端动态展示表单虽然比较业务化当时确实方便快捷能够极大的解决效率问题又或者把常用的表单类场景做成业务组件、模块模板在使用的时候直接下载使用。比如Fusion的表单类模块https://fusion.design/module?category表单方案很多总有适合自己的一套。相关链接field 组件 demo: https://fusion.design/component/fieldform 组件 demo: https://fusion.design/component/formFusion Next 组件仓库: https://github.com/alibaba-fusion/next关于本文作者布达原文https://www.yuque.com/docs/share/8238bd4e-cfb2-42de-afa7-bc2b2f2ab0dc最后为你推荐【第998期】JSON schema与表单验证【第937期】探索两种优雅的表单验证——策略设计模式和ES6的Proxy代理模式
