表单验证之 formik 简单用法

这里的 formik 版本为："formik": "^1.4.2"

API:jaredpalmer.com/formik/docs…

formik 是用来构建表单 Formik旨在轻松管理具备复杂验证的表单, Formik支持同步和异步表单级和字段级验证。

特性：

1. 获取处于或不处于窗体状态值
2. 验证表单和错误消息
3. 处理表单提交
4. 跟踪表单状态

formik 简单模式

<Formik
    initialValues={{ email: '', password: '' }}
    validate={values => {
        let errors = {};
        if (!values.email) {
            errors.email = 'Required';
        } else if (
            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
            errors.email = 'Invalid email address';
        }
        return errors;
    }}
    onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
        }, 400);
    }}
>
复制代码

简单模式须要的三个要素：

1. 待验证字段，规定formik对待验证字段的校验范围 initialValues 初始化值，在验证表单中待验证的字段。

2. 验证规则 validate 具体校验规则，好比这里校验email的规则,对于新增的字段须要添加该字段对应的校验内容。

3. 表单提交函数 onSubmit 函数为表单提交时触发的函数

表单中使用formik

如今咱们已经有了验证表单的三要素，那在表单中具体是如何使用的呢？

实际上是经过 formik 自带组件：

, , and 来和 react 上下文挂钩 formik

好比这样的使用：

<Form>
    <Field type="email" name="email" />
    <ErrorMessage name="email" component="div" />
    <Field type="password" name="password" />
    <ErrorMessage name="password" component="div" />
    <button type="submit" disabled={isSubmitting}>
        Submit
    </button>
</Form>
复制代码

而这里 为表单的主体， 为验证的具体字段， 为校验时具体的错误提示。

表单验证细节

验证方法触发的时机主要有两种：

1. 当待校验字段的值发生变化时触发校验方法 当值发生变化会调用这几个方法： handleChange 这个方法中能够作具体的逻辑处理
   setFieldValue setValues 这两个方法均可觉得字段设置值

2. 当待校验字段失去焦点时触发具体校验方法 当触发 blur 事件会调用的方法： handleBlur 表单字段失去焦点的时候触发函数的具体逻辑 setTouched setFieldTouched 移动端对应函数

提交时触发方法：handleSubmit submitForm 可强制调用的验证方法：validateForm validateField

{({ errors, touched, validateField, validateForm }) => (
 <Form>
     <button type="button" onClick={() => validateForm().then(() => console.log('blah')))}>
        Validate All
    </button>
    <button type="submit">Submit</button>
</Form>
)}
复制代码

校验字段初始化支持对象和数组

在 Formik 的 initialValues 支持对象

initialValues={{
  social: {
    facebook: '',
    twitter: '',
  },
}}
复制代码

在字段 Field 上使用：

支持数组：

initialValues={{
  friends: ['jared', 'ian'],
}}
复制代码

在字段 Field 上使用:

表单提交数据

formik表单提交时候会触发：handleSubmit(e)或submitForm 这两个方法。

表单提交的各个阶段：

预提交阶段： 在这个阶段，会初始化一个标识，该标识用来表示表单字段是否出现错误，校验出错将会把这个标识设置成false

isSubmitting 标识在预提交阶段设置成true，这也是初始化值。 好比下面的代码中能够应用这个值来作表单提交按钮是否可以点击的状态控制。

<button type="submit" disabled={isSubmitting}>
    Submit
</button>
复制代码

验证阶段： 在这个阶段，isValidating 仍然为 true，当表单数据提交到校验函数中时，会异步运行全部字段级验证，深度合并结果

1. 若是有错误：停止提交，isValidating 标识将设置成 false,设置 errors 并显示错误结果，同时设置 isSubmitting 为false，此时上面的代码能够看出表单提交的按钮被设置成不可提交状态。

2. 若是验证经过： isValidating 将设置成 false，表单将继续提交，接下来 onSubmit 和 handleSubmit 方法将会被调用。

withFormik

withFormik 采用高阶组件方式来处理表单验证：

withFormik({对象里面定义具体的验证})(Form)

const formikForm = {
  mapPropsToValues: () => ({ email: '', password: '' }),
  handleSubmit: (values, formikBag) => {
    const { props: { login } } = formikBag;
    login(values, formikBag);
  },
  validate: (values) => {
    const errors = {};

    if (!values.email) {
      errors.email = 'Required';
    } else if (!format.validateEmail(values.email)) {
      errors.email = 'Invalid email address';
    }
    if (!values.password) {
      errors.password = 'Required';
    } else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}$/i.test(values.password)) {
      errors.password = consts.lowSecurity;
    }

    return errors;
  },
  displayName: 'SigninForm',
};

withFormik(formikForm)
复制代码

在这里的表单中，有两个字段须要进行验证：email 和password，因此咱们须要知道要将哪些字段交给formik进行验证管理： 在 mapPropsToValues 方法中须要注明待验证的字段，同时待验证字段初始化为空。

而 validate 方法是对待校验的字段进行具体的验证，在这个方法中会对待验证的字段提供具体的验证规则， 该函数返回一个错误Msg对象，Msg对象中存放的是对应验证字段的错误提示。

displayName: 'SigninForm':

给无状态函数组件提供一个合适的名称，这样在react devtools 能更容易找到。若是指定，则显示为formik(displayname)，若是没有则显示 formik(组件)，类组件不须要这个选项。总之这是一个标识性的做用。

mapPropsToValues： 有的话，那么formik会将结果转化为可更新的表单状态，并将这些值做为props 提供给新组件

ErrorMessage 组件

若是字段被访问时出现错误消息，错误消息是一个字符串

下面两个代码的效果是等同的：

<ErrorMessage name='email_code'>
    {msg => <p className={classNames(css.help, css['is-danger'])}>{msg}</p>}
</ErrorMessage>
复制代码

{errors.name && touched.name ? (
    <div>{errors.name}</div>
) : null}
复制代码

表单提交处理函数

handleSubmit: (values: Values, formikBag: FormikBag) => void values 表单中各个字段的值 formikbag 其中包含注入属性和方法的子集（全部名称以set或者resetForm开头的方法），以及传递给包装组件的如何属性

onSubmit={(verifyValues, formikBag) => (withdrawAction(verifyValues, {
    ...formikBag,
    setPreStatus: setStatus,
    resetPreForm: resetForm,
}))}
复制代码

这里的是指在提交的时候，将这些参数经过调用父类传递过来的方法，将值传递过去 最终在action里面对这些值进行处理

mapPropsToValues: ({ withdrawInfo }) => ({
    rid: '',
    amount: '',
    currency_type: 'coin',
    currency: withdrawInfo.get('currency'),
    receiveAmount: '0',
})
复制代码

表单验证初始化值，里面的值和input 输入框中的name或者value值对应。 可是这些初始化的值并不必定都是一一对应的，好比这里的currency_type: 'coin', 对应的组件中就没有这个input，那么就有多是接口须要值 这些初始值在之后对input中的值进行修改后会发生变化

实现输入6位验证码后，无需点击确认按钮，直接登陆

原代码实现： 1.代码逻辑：登陆框输入内容验证后，弹出验证码输入框，输入正确内容后，点击确认便可登陆成功

表单嵌套： 代码逻辑结构为双层表单，登陆框表单嵌套了验证码表单。

登陆表单使用的是 withFormik -- formikForm 的形式来进行验证

而验证码表单初始化的验证方式是 Formik。

而这里的需求是须要输入验证码后，达到验证条件后直接调用登陆函数来验证。

onSubmit={(emailValues, formikBag) => {
  login(emailValues, {
    ...formikBag,
    setStatus,
  });
}}
render={emailEle}
复制代码

因而这里的需求就须要对input输入框的事件 onChange 进行处理，代替原来的 prop.handleChange

为了保持原来验证表单中的验证的内容和具体输入的数据，使得原有的验证函数起效果，

因而验证函数中的内容变成了这样：

const {
  handleChange,
  submitForm,
} = props;

const emailCode = String(e.target.value).trim();
const code = format.digital('integer', 6)(emailCode);
e.target.value = code;

// 调用原来prop中的handleChange 函数
handleChange(e);
复制代码

如今到了这里，咱们的input输入框中的value就能够拿到输入的内容：

value={props.values.email_code}
复制代码

而且这些输入的内容能够经过原来的验证表单的验证函数继续验证，也就是说此时咱们只须要出发验证码表单的提交事件就能够将表单提交，可是这里就出现了一个大的问题：

尝试使用 Formik 中的 submitForm 方法发现不起效果

此时使用的是内层表单，也就是验证码表单的提交表单的方法，可是发现，这个函数并不没有发起请求，貌似没有调用。而若是换成外层的登陆表单要进行提交的话，发现能够发起请求，可是这个请求并无带上验证码表单的数据，因而这个方法无效。

因而在网上查找，发现 Formik 官方 github 中的一个 issue 提到了这个问题：

https://github.com/jaredpalmer/formik/issues/1218
复制代码

上面提到了一个解决方案 setTimeout：

setTimeout(submitForm, 0);
复制代码

使用 setTimeout 将表单提交函数包裹，这样验证表单的提交函数就能触发提交表单

这里将submitForm放入到下一个循环中去执行，这是由于当前的队列中submitForm函数没法执行？