redux-form的学习笔记二--实现表单的同步验证
来源:互联网 发布:罗元裳是骗局吗 知乎 编辑:程序博客网 时间:2024/06/05 20:22
我的博客园地址:http://www.cnblogs.com/penghuwan/p/6538987.html
(注:这篇博客参考自redux-form的官方英文文档)左转http://redux-form.com/6.5.0/examples/syncValidation/
在这篇博客里,我将用redux-form实现一个同步验证的表单,它将满足以下条件:
1有三个输入框:用户名输入框(username),邮箱输入框(email)和年龄输入框(age)
2如果点击输入框获取焦点后未输入内容,则在输入框失去焦点后发出错误(error)提示:XXX不能为空,且此时不能提交成功
3如果在输入框中输入内容不合法,比如用户名过长(length>5)发出错误提示:不能大于五个字,且此时不能提交成功
4如果在输入框中输入内容合法但需警告,则提示警告(warn)内容,此时虽然发出警告但仍能提交成功(请区分和2和3中的区别)
5在尚未输入内容时(pristine=true)或在提交过程中(submitting=true),禁止使用提交按钮。在点击清空按钮时,调用reset()方法清空所有输入框中的内容
首先附上form.js的代码:(这份展示一共两份代码:index.js和form.js,index.js的内容请看上一篇博客)
import React from 'react'import { Field, reduxForm } from 'redux-form'const validate = values => { const errors = {} if (!values.username) { errors.username = '用户名不能为空' } else if (values.username.length > 5) { errors.username = '不能大于五个字' } if (!values.email) { errors.email = '邮箱不能为空' } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) { errors.email = 'Invalid email address' } if (!values.age) { errors.age = '年龄不能为空' } else if (isNaN(Number(values.age))) { errors.age = '年龄必须是一个数字' } else if (Number(values.age) < 18) { errors.age = '对不起,你未满18岁' } return errors}const warn = values => { const warnings = {} if (values.age < 19) { warnings.age = '你年龄还有点小哦!' } return warnings}const renderField = ({ input, label, type, meta: { touched, error, warning } }) => ( <div> <label>{label}</label> <div> <input {...input} placeholder={label} type={type}/> {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))} </div> </div>)const SyncValidationForm = (props) => { const { handleSubmit, pristine, reset, submitting } = props return ( <form onSubmit={handleSubmit}> <Field name="username" type="text" component={renderField} label="Username"/> <Field name="email" type="email" component={renderField} label="Email"/> <Field name="age" type="number" component={renderField} label="Age"/> <div> <button type="submit" disabled={submitting}>Submit</button> <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button> </div> </form> )}
export default reduxForm({ form: 'syncValidation', //你的redux-form的特殊标记,必填项 validate, // 上面定义的一个验证函数,使redux-form同步验证 warn // 上面定义的一个错误提示函数,使redux-form同步错误提示})(SyncValidationForm)//写入的redux-form组件
1什么是Field组件?
Field组件是redux-form组件库中的核心组件,它位于你的输入框(input)或输入框组件的外一层,将其包装起来从而使输入框能和redux的store直接连接起来。
它有两个最重要的属性:name属性和component属性,且这两个属性都是必填项
<Field name="username" type="text" component={renderField} label="Username"/>
在上面的Field中name和component是必填的,而type属性和label属性是选填的,但选填的属性(如type和label)可通过props属性传入它的component中,比如以上的renderField中
2Field组件的name属性和component属性
- name属性是Filed组件的名称,也即Field下输入框的名称,它将成为存储form表单数据的values对象中的属性名:比如
- redux-form的学习笔记二--实现表单的同步验证
- redux-form学习笔记
- Form表单的验证
- DW学习笔记:form表单的创建
- form表单验证的原理
- jQuery的form表单验证
- form表单常用的验证
- 简单的form表单验证
- Bootstrap学习总结笔记(24)-- 基于BootstrapValidator的Form表单验证
- 表单form的实现
- 利用Jquery实现一个典型的form表单前端验证
- html+js实现form表单多值的验证
- 基于annotation注解的Spring3 MVC Form Handling Example之二表单提交学习笔记
- Form对象,表单的笔记
- redux-form的selector函数
- javascript验证表单form的通用函数
- 关于Form表单的提交与验证???
- form表单中属性的有效性验证
- 20170327-20170331_c语言学习周总结
- 多功能按键设计,状态机思想,包含长按短按双击
- 【LightOJ 1141
- Java学习笔记(二)--各种运算符 键盘录入数据 各种语句
- [机房练习赛4.4]intkth 区间第k小及修改
- redux-form的学习笔记二--实现表单的同步验证
- JavaScript String.fromCharCode() 函数详解
- 异步线程之AsyncTask
- innodb存储引擎笔记(上)
- 前端构建工具gulpjs的使用介绍及技巧
- STL中的nth_element()方法的使用
- 蓝桥杯-算法提高-队列操作
- csu1798: 小Z的城市 线段树+ST表
- android之ListView重写item里面的事件