redux-form的学习笔记二--实现表单的同步验证
(注:这篇博客参考自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的学习笔记二--实现表单的同步验证的更多相关文章
- angular学习笔记(二十)-表单验证
本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...
- Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- 吴裕雄--天生自然HTML学习笔记:HTML 表单和输入
HTML 表单用于收集不同类型的用户输入. <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- knockoutJS学习笔记08:表单域绑定
前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=" ...
- HTML5学习笔记<五>: HTML表单和PHP环境搭建
HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明 <form> 表单 <input> 输入域 <textarea> 文本域 < ...
- PHP学习笔记 01 之表单传值
一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...
- Struts2学习(二)———— 表单参数自动封装和参数类型自动转换
前篇文章对struts2的一个入门,重点是对struts2的架构图有一个大概的了解即可,之后的几篇文章,就是细化struts2,将struts2中的各种功能进行梳理,其实学完之后,对struts2的使 ...
- Yii学习笔记之四(表单验证 api 翻译)
1.表单验证 对于用户输入的全部数据,你不能信任,必须加以验证. 全部框架如此.对于yii 能够使用函数 yii\base\Model::validate() 进行验证 他会返回boolean值的 ...
- HTML 学习笔记 JQuery(表单,表格 操作)
表单应用 一个表单有3个基本组成部分 (1)表单标签:包含处理表单数据所用的服务器端程序URL 以及数据提交到服务器的方法 (2)表单域:包含文本框 密码框 隐藏框 多行文本框 复选框 单选框 下拉选 ...
随机推荐
- 使用Eclipse开发及测试Spark的环境搭建及简单测试
一.下载专门开发的Scala的Eclipse 1.下载地址:http://scala-ide.org/download/sdk.html,或链接:http://pan.baidu.com/s/1hre ...
- mybatis判断集合为空或者元素个数为零
mybatis判断集合为空或者元素个数为零: <if test="mlhs != null and mlhs.size() != 0"> and t.mlh_name ...
- Spring的 classpath 通配符加载配置文件
http://www.cnblogs.com/taven/archive/2012/10/24/2737556.html classpath:app-Beans.xml 说明:无通配符,必须完全匹配 ...
- Express 3.0新手指南入门教程
在确认已经安装了node之后(下载), 在你的机器上创建一个目录,让我们来开始你的第一个应用程序吧 $ mkdir hello-world 在这个目录中你首先得定义一下你的应用程序“包”文件,它和其它 ...
- easyUI draggable组件使用
easyUI draggable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 微信小程序怎么做出前端table的效果
wxml代码: <view class="container"> <view class="table"> &l ...
- window下redis的安装
1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本2.根据PHP版本号,编译器版本号和CPU架构,选择php_redis-2.2.5-5.5-ts-vc11-x86.zip和ph ...
- 棒!使用.NET Core构建3D游戏引擎
原文地址:https://mellinoe.wordpress.com/2017/01/18/net-core-game-engine/ 作者:ERIC MELLINO 翻译:杨晓东(Savorboa ...
- IE6浏览器常见的bug及其修复方法
IE6不支持min-height,解决办法使用css hack: .target { min-height: 100px; height: auto !important; height: 100px ...
- WPF开发进阶 - Fody/PropertyChanged(一)
INotifyPropertyChanged 在WPF MVVM模式开发中,实现INotifyPropertyChanged的ViewModel是非常重要且常见的类: public class Mai ...
- angular学习笔记(二十)-表单验证