vue.js合作做网站么,湖南网站优化服务,软件开发工具属于哪种类型的软件,西安网站建设比较好的公司Formik是一个专为React构建的开源表单库。它提供了一个易于使用的API来处理表单状态管理#xff0c;表单验证以及表单提交。Formik支持React中的所有表单元素和事件#xff0c;可以很好地与React生态系统中的其他库集成。同时#xff0c;Formik还提供了一些高级功能#xf…Formik是一个专为React构建的开源表单库。它提供了一个易于使用的API来处理表单状态管理表单验证以及表单提交。Formik支持React中的所有表单元素和事件可以很好地与React生态系统中的其他库集成。同时Formik还提供了一些高级功能如支持异步验证、字段级别的验证、根据表单状态变化自动计算属性等。
Formik 基础
Formik的优势相较于传统的表单处理方法Formik具有以下优势
状态管理: Formik自动地处理表单状态管理无需手动编写大量的状态管理逻辑。表单验证: Formik提供了易于使用的表单验证工具可以快速实现表单验证逻辑。表单提交: Formik可以方便地处理表单提交包括异步表单提交和重试机制。支持复杂表单: Formik支持处理包括多级嵌套、动态表单、数组表单等多种复杂表单。
Formik 安装和简单使用
1、Formik安装使用npm或yarn安装Formik。在终端中切换项目目录并运行此命令 npm install formik 或 yarn add formik。
2、表单数据绑定以及提交处理
useFormik HOOK 参数说明
initialValues传递定义的输入HTML元素的name属性相匹配的初始值onSubmit提交程序已经默认阻止了默认行为
onSubmit 属性定义了一个回调函数在表单提交时被调用。在回调函数中可以访问表单中所有输入框的值并执行提交操作通过 setSubmitting 函数可以设置表单的提交状态。在表单的渲染函数中通过 handleSubmit 属性来处理表单的提交使用 isSubmitting默认false 属性来禁用提交按钮直到表单提交完成。 const formik useFormik({initialValues: {username: ,password: },onSubmit: (values, {setSubmitting}) {// formik 已经默认帮我们阻止了默认执行console.log(values: , values);setSubmitting(true)}})……form onSubmit{formik.handleSubmit}divlabel htmlForusername用户名/labelinput idusername typetext nameusername value{formik.values.username} onChange{formik.handleChange}/input/divdivlabel htmlForpassword密码/labelinput idpassword typepassword namepassword value{formik.values.password} onChange{formik.handleChange}/input/divbutton typesubmit disabled{formik.isSubmitting}提交/button/formuseFormik 返回对象属性解释
handleSubmit提交处理程序handleChange传递给每个input、select、 或textarea的更改处理程序values表单的当前值使用 name 访问对应的值handleChange每个 HTML 输入重用相同的更改处理函数setValues和setFieldValuesetValues设置formik的values属性值setFieldValue设置values的某一个属性值二者写法不同但是目的一样改变values的值。
如果没有 formik那么就得一个个写change事件。
3、表单校验
Formik 不仅跟踪表单values还跟踪其验证和错误消息。要使用 JS 添加验证需指定一个自定义验证函数并将其传递给钩子 useFormik() 的参数 validate。如果存在错误这个自定义验证函数应该生成一个匹配的error对象。 validate: values {const errors {}if (!values.username) {errors.username 请输入用户名} else if (values.username.length 6 || values.username.length 16) {errors.username 请输入6~16位的用户名} else if (!/^\w{6,16}$/.test(values.username)) {errors.username 请输入由字母、数字、下划线组成的用户名}if (!values.password) {errors.password 请输入密码} else if (values.password.length 6 || values.password.length 16) {errors.password 请输入6~16位的密码} else if (!/^\w{6,16}$/.test(values.password)) {errors.password 请输入由字母、数字、下划线组成的密码}console.log(errors: , errors);return errors}默认情况下Formik 将在每次击键onChange事件以及提交之前进行验证。传递 formik.handleBlur 给输入元素的 onBlur 属性那么会在输入元素的失焦onBlur事件中进行验证 input idusername typetext nameusername value{formik.values.username} onChange{formik.handleChange} onBlur{formik.handleBlur}/input校验确实实现了但是如果希望在提交表单的时候再显示错误需要怎么做呢 Formik 会跟踪哪些字段已被访问过。它将这些信息存储在一个名为 touched 的对象中这些值为boolean值。 p{formik.touched.username formik.errors.username ? formik.errors.username : }/pFormik 结合 Yup 进行表单验证
Yup是一个构建对象模式的JavaScript模式验证器用于验证和解析数据。它提供了一种声明式方法来创建校验模式。
由于 Formik 作者/用户非常喜欢Yup因此 Formik 有一个名为 Yup 的特殊配置道具validationSchema它会自动将 Yup 的验证错误消息转换为一对象。
1、Yup 安装 npm install yup 或 yarn add yup
2、使用 Yup 校验表单
Formik 结合 Yup 可以轻松实现表单验证 validationSchema{Yup.object({...})}使用 validationSchema 和 Yup 搭配之后就不需要再使用validate配置了。Yup 允许创建复杂的校验逻辑如必填项、字符长度、正则表达式等。 validationSchema: Yup.object({username: Yup.string().required(请输入用户名).min(6, 请输入6~16位的用户名).max(16, 请输入6~16位的用户名).matches(/^\w{6,16}$/, 请输入由字母、数字、下划线组成的用户名), password: Yup.string().required(请输入密码).min(6, 请输入6~16位的密码).max(16, 请输入6~16位的密码).matches(/^\w{6,16}$/, 请输入由字母、数字、下划线组成的密码)})Formik 组件
以上都是通过 useFormik 拿到控制formik表单的内容但是这样不容易形成封装也就是说无法进行实例传值。而Formik由于配备了React Context因此Formik本身就可以管理所包裹的JSX。
formik完全遵守React的组件化原则可以和其他库或自定义逻辑无缝集成
formik支持构建和复用表单组件通过Formik /组件和Context API实现跨组件通信。可以创建包装Field /、ErrorMessage等的自定义组件提高代码复用性和可维护性。 Formik initialValues{{username: , password: }} // 设置初始化值onSubmit{(values, {setSubmitting}) { // 提交表单执行的函数setTimeout(() {console.log(values: , values); setSubmitting(true)}, 2000);}}validationSchema{Yup.object({ // 设置表单校验的模式username: Yup.string().required(请输入用户名).min(6, 请输入6~16位的用户名).max(16, 请输入6~16位的用户名).matches(/^\w{6,16}$/, 请输入由字母、数字、下划线组成的用户名), password: Yup.string().required(请输入密码).min(6, 请输入6~16位的密码).max(16, 请输入6~16位的密码).matches(/^\w{6,16}$/, 请输入由字母、数字、下划线组成的密码)})}{({handleSubmit, values, touched, handleChange, handleBlur, errors, isSubmitting}) {return form onSubmit{handleSubmit}divlabel htmlForusername1用户名/label{/* input idusername1 typetext nameusername value{values.username} onChange{handleChange} onBlur{handleBlur}/input */}Field idusername1 nameusername typetext/Field{/* p{touched.username errors.username ? errors.username : }/p */}ErrorMessage nameusername/ErrorMessage/divdivlabel htmlForpassword1密码/labelinput idpassword1 typepassword namepassword value{values.password} onChange{handleChange}/inputp{touched.password errors.password ? errors.password : }/p/divbutton typesubmit disabled{isSubmitting}提交/button/form}}/Formik常用组件
1、ErrorMessage 捕捉错误的容器必传一个name属性。 ErrorMessage nameusername/ErrorMessage2、Field 将自动将输入连接到 Formik默认渲染是input输入框有以下几种方法渲染 function MyField({field, form}) {console.log(field: , field);console.log(form: , form);return input {...field}/input}……Formik initialValues{{email: , project: 2, phone: , address: 1}} // 设置初始化值onSubmit{(values) { console.log(values: , values); }} // 提交表单执行的函数validationSchema{Yup.object({ // 设置表单校验的模式phone: Yup.string().required(请输入电话号码).matches(/^1[0-9]{10}/, 请输入有效的电话号码)})}{({handleSubmit}) {return form onSubmit{handleSubmit}{/* 1、直接渲染 */}Field typeemail nameemail placeholder请输入电子邮箱/Field br/{/* 2、as 转化成其他节点 */}Field asselect nameprojectoption value{1}数学及应用数学/optionoption value{2}软件工程/optionoption value{3}国际贸易/option/Field br/{/* 3、渲染 jsx */}Field namephone{({field, form, meta}) {console.log(field: , field);console.log(form: , form);console.log(meta: , meta);return divlabel htmlForphone电话号码/labelinput idphone typetext placeholder请输入电话号码 value{field.value.phone} {...field}/inputp{ meta.touched meta.error ? meta.error : }/p/div}}/Field{/* 4、以 component 组件形式渲染 */}Field nameaddress component{MyField}/Field br /button typesubmit提交/button/form}}/Formik数组和对象校验
Formik 支持嵌套对象和数组
yup 对象校验使用 Yup.object({})yup 数组校验使用 Yup.array().of() FormikinitialValues{{social: {wechat: , qq: }, frends: [, ]}}onSubmit{(values, {setSubmitting}) {console.log(values: , values)setSubmitting(true)}} validationSchema{Yup.object({social: Yup.object({wechat: Yup.string().required(请输入微信), qq: Yup.string().required(请输入QQ).matches(/^[\w]$/, 请输入有效的QQ)}),frends: Yup.array().of(Yup.string().required(请输入你的朋友))})}{({values, handleChange, handleBlur, touched, errors, isSubmitting, setValues, setFieldValue}) {console.log(object array values: , values);console.log(object array handleChange: , handleChange);console.log(object array handleBlur: , handleBlur);console.log(object array touched: , touched);console.log(object array errors: , errors);console.log(object array setValues: , setValues);console.log(object array setFieldValue: , setFieldValue);return formh4社交账号/h4label微信/labelinput namesocial.wechat value{values.social.wechat} onChange{handleChange} onBlur{handleBlur}/inputp{ touched.social errors.social touched.social.wechat errors.social.wechat ? errors.social.wechat : }/pbr /labelQQ/labelinput namesocial.qq value{values.social.qq} onChange{handleChange} onBlur{handleBlur}/inputh4朋友/h4{values.frends.map((v, i) {return (div key{i}input name{friends[${i}]} onChange{handleChange} onBlur{handleBlur}/input{i values.frends.length br /}/div)})}button typesubmit disabled{isSubmitting}提交/button/form}}/Formik
