React Native - React Hook 表单验证

Question

我正在 the documentation 之后使用 react-hook-form 构建一个简单的注册表单，我不太确定如何使用 yup 和验证

首先，我用一些规则定义了对象，但是当我添加 Controller 组件时，我有一个名为 rules 的道具。控制器错误有效，但来自 yup 模式的错误无效。

有必要吗？有人可以向我解释一下正确的使用方法吗？另外，我不太确定如何在 Controller 组件

定义规则

import React, { useEffect } from "react";
import {
  View,
  TextInput,
  TouchableOpacity,
  Text,
  StyleSheet,
} from "react-native";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object({
  email: yup.string().email().required("E-mail não informado"),
  senha: yup
    .string()
    //.required("Senha não informada")
    .min(8, "Senha muito pequena - deve ter no mínimo 8 caracteres"),
});

const AcessoFormulario = ({ tipoUsuario }) => {
  const {
    control,
    register,
    setValue,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      email: "",
      senha: "",
      confirmacaoSenha: "",
    },
  });

  useEffect(() => {
    register("email");
    register("senha");
    register("confirmacaoSenha");
  }, [register]);

  const enviar = (dados) => {
    console.log(data);
    //TODO firebase auth
  };

  return (
    <View style={styles.container}>
      <View style={styles.subContainer}>
        <Text style={styles.label}>E-mail:</Text>
        <Controller
          control={control}
          rules={{
            required: true,
          }}
          render={({ field: { onChange, onBlur, value } }) => (
            <TextInput
              style={styles.input}
              onBlur={onBlur}
              onChangeText={onChange}
              value={value}
            />
          )}
          name="Email"
        />
        {errors.email && <Text>Obrigatório....</Text>}
      </View>
      <View style={styles.subContainer}>
        <Text style={styles.label}>Senha:</Text>
        <Controller
          control={control}
          rules={{
            maxLength: 100,
          }}
          render={({ field: { onChange, onBlur, value } }) => (
            <TextInput
              style={styles.input}
              onChangeText={(text) => setValue("senha", text)}
            />
          )}
          name="senha"
        />
        {errors.senha && <Text>Obrigatório....</Text>}
      </View>
      <View style={styles.subContainer}>
        <Text style={styles.label}>Confirmação de senha:</Text>
        <Controller
          control={control}
          rules={{
            maxLength: 100,
          }}
          render={({ field: { onChange, onBlur, value } }) => (
            <TextInput
              style={styles.input}
              onChangeText={(text) => setValue("confirmacaoSenha", text)}
            />
          )}
          name="confirmacaoSenha"
        />
        {errors.confirmacaoSenha && <Text>Obrigatório....</Text>}
      </View>

      <TouchableOpacity style={styles.btnEnviar} onPress={handleSubmit(enviar)}>
        <Text style={styles.btnTexto}>Registrar-se</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    marginTop: 40,
    margin: 10,
    padding: 10,
    backgroundColor: "#77d477",
    borderRadius: 20,
  },
  input: {
    borderWidth: 2,
    borderColor: "#ffffff",
    borderRadius: 6,
    margin: 2,
  },
  label: {
    color: "#ffffff",
    fontWeight: "bold",
    fontSize: 15,
  },
  subContainer: {
    margin: 15,
    //padding: 10
  },
  btnEnviar: {
    backgroundColor: "#ffffff",
    margin: 15,
    padding: 10,
  },
  btnTexto: {
    color: "#77d477",
    textAlign: "center",
    fontWeight: "bold",
    fontSize: 20,
  },
});

export default AcessoFormulario;

Answer 1

对于 errors 内的每个属性，您可以使用 message 访问它。例如：

{errors.senha && <Text>{errors.senha.message}</Text>}

React Native - React Hook 表单验证

React Native - React Hook Forms Validation

react-native

react-hook-form