小程序taro 使用rc-field-form

原创已于 2023-06-14 00:36:52 修改 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#taro #javascript #开发语言

于 2023-06-05 09:26:54 首次发布

该文章介绍如何在小程序中利用rc-field-form库进行表单管理，包括设置初始值、定义验证规则，如validatePhone和validatePassword函数，以及处理表单提交成功和失败的情况。通过Field组件进行字段控制，并展示错误信息，提供了一种平滑的用户体验。

小程序表单使用rc-field-form,
进行错误处理，以及提交，非常丝滑

import Form, { Field, useForm } from "rc-field-form";

const Index = () => {
  const [form] = useForm();
  return (
    <Form
      form={form}
      component={false}
      initialValues={initialValues}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <View className={style.form_content}>
        <View className={style.phone}>
          <Field name="phone" rules={[{ validator: validatePhone }]}>
            {(control, meta) => (
              <>
                <Input {...control} placeholder="请输入学号" maxlength={30} />
                <View className={style.errmsg}>{meta.errors[0]}</View>
              </>
            )}
          </Field>
        </View>
        <View className={style.captcha}>
          <Field name="password" rules={[{ validator: validatePassword }]}>
            {(control, meta) => (
              <>
                <Input
                  {...control}
                  placeholder="请输入密码"
                  maxlength={30}
                  type={"password"}
                />
                <View className={style.errmsg}>{meta.errors[0]}</View>
              </>
            )}
          </Field>
        </View>
        <View
          className={style.submit}
          onClick={() => {
            form.submit();
          }}
        >
          <Button size="large" color="#844CC0">
            登录
          </Button>
        </View>
      </View>
    </Form>
  );
};