Maison > interface Web > js tutoriel > Comment installer yup dans React Native en JavaScript ?

Comment installer yup dans React Native en JavaScript ?

王林
Libérer: 2023-09-13 11:53:07
avant
747 Les gens l'ont consulté

Yup est un package NPM que nous pouvons installer dans des applications réactives natives. Il est utilisé pour valider les valeurs du formulaire stockées dans un seul objet. De plus, nous pouvons utiliser Yup pour ajouter différents types de validation à différents champs de formulaire.

Les utilisateurs peuvent exécuter la commande suivante dans le répertoire du projet pour installer Yup dans React Native.

1

npm i Yup

Copier après la connexion

Si vous utilisez Yarn, vous pouvez utiliser la commande suivante.

1

yarn i Yup

Copier après la connexion

Grammaire

Les utilisateurs peuvent suivre la syntaxe suivante pour utiliser Yup pour la validation de formulaire dans les applications natives de réaction.

1

2

3

4

const schema = Yup.object().shape({

   key1: Yup.string().required("Required"),

});

await schema.validate(values);

Copier après la connexion

Dans la syntaxe ci-dessus, nous avons créé le schéma en utilisant Yup et utilisé la méthode validate() pour valider les valeurs en fonction des règles définies dans le schéma. Ici, value est un objet contenant des paires nom de propriété de formulaire et valeur.

Étapes

  • Étape 1 - Tout d'abord, les développeurs doivent importer le contenu requis depuis Yup.

  • Étape 2 - Dans le composant App(), utilisez Yup pour créer un "userFormSchema" qui définit les règles pour les champs Student_id, age et Portfolio. Ici, student_id est une chaîne et un champ obligatoire, age est un entier positif et un champ obligatoire, et portfolio est l'URL du site Web.

  • Étape 3 - Maintenant, utilisez le hook « useState » pour définir le statut des informations sur l'étudiant et le message de vérification.

  • Étape 4 - Définissez la fonction handleChange() qui prend la clé et la valeur comme paramètres et met à jour la valeur dans l'objet d'état "initialValue".

    < /里>
  • Étape 5 - Ensuite, définissez la fonction validateValues(), qui utilise la méthode validate() en prenant userFormSchema comme référence et un objet StudentInfo comme paramètre.

  • Étape 6 - Définissez le message sur le statut « Message » en fonction de la validation de la valeur du formulaire.

Exemple 1

Dans l'exemple ci-dessous, nous avons créé un formulaire pour collecter des informations sur les étudiants. Nous avons ajouté trois champs de saisie pour obtenir l'URL du site Web Student_id, l'âge et le portfolio. De plus, nous avons créé un bouton de soumission.

Chaque fois que l'utilisateur clique sur le bouton de soumission, la fonction validateValues() est appelée, qui affiche le message de validation à l'écran.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

import React, { useState } from "react";

import * as Yup from "yup";

import { TouchableOpacity, View, TextInput, Text, Button } from "react-native";

const App = () => {

   // creating the user form schema using Yup to validate student_id, age, and portfolio

   const userFormSchema = Yup.object().shape({

   student_id: Yup.string().required("Required"),

   age: Yup.number().required("Required").positive().integer(),

   portfolio: Yup.string().url().nullable(),

   });

   const [studentInfo, setStudentInfo] = useState({

      student_id: "",

      age: 13,

      portfolio: "",

   });

   const [message, setMessage] = useState("");

 

   function handleChange(key, val) {

      setStudentInfo({ ...studentInfo, [key]: val });

   }

   // creating the handleFormSubmit function to handle the form submission

   async function validateValues() {

      try {

         await userFormSchema.validate(studentInfo);

         setMessage("Form is successfully submitted with no errors!");

      } catch (error) {

         console.log(error);

         setMessage("Form is not submitted due to errors!");

      }

   }

   return (

      // rendering the form

      <View style = {{ width: "70%" }}>

         {/* text inputs */}

         <TextInput

            placeholder = "student_id"

            value = {studentInfo.student_id}

            onChangeText = {(value) => handleChange("student_id", value)}

         />

         <TextInput

            placeholder = "age"

            value = {studentInfo.age}

            onChangeText = {(value) => handleChange("age", value)}

         />

 

         <TextInput

            placeholder = "portfolio"

            value = {studentInfo.portfolio}

            onChangeText = {(value) => handleChange("portfolio", value)}

         />

         {/* submit button */}

         <TouchableOpacity onPress = {validateValues}>

            <Text> Submit Form </Text>

         </TouchableOpacity>

         <Text> {message} </Text>

      </View>

   );

};

export default App;

Copier après la connexion

Sortie

如何在 JavaScript 中的 React Native 中安装 yup?

Exemple 2

L'exemple ci-dessous est une version avancée de l'exemple ci-dessus. Ici, nous avons trois champs de saisie contenant le nom d'utilisateur, l'e-mail et le mot de passe.

De plus, nous avons également créé un userFormSchema en utilisant Yup pour valider le formulaire. Ici, nous définissons les règles pour que le nom comporte au moins trois caractères et soit toujours obligatoire. L'e-mail doit suivre le format et est toujours requis, et le mot de passe doit comporter au moins six caractères.

De plus, nous avons fourni certains styles pour les champs de saisie et les messages d'erreur. Lorsque l'utilisateur clique sur le bouton Soumettre, il appelle la fonction handleFormSubmit(), qui obtient les résultats de validation en appelant la fonction validateValues(). Il affiche le message de sortie basé sur la validation du formulaire.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

import React, { useState } from "react";

import * as Yup from "yup";

import {

   StyleSheet,

   TouchableOpacity,

   View,

   TextInput,

   Text,

} from "react-native";

const App = () => {

   // creating the user form schema using Yup to validate name, email and password

   const userFormSchema = Yup.object().shape({

      name: Yup.string().min(3, "Too short").required("Required"),

      email: Yup.string().email("Invalid email").required("Required"),

      password: Yup.string().min(6, "Too short").required("Required"),

   });

   //  creating the styles for the elements

   const elementStyles = StyleSheet.create({

      container: {

         flex: 1,

         alignItems: "center",

         backgroundColor: "aqua",

         justifyContent: "center",

      },

      error: {

         marginBottom: 10,

         color: "red",

      },

      button: {

         backgroundColor: "#0084ff",

         width: "70%",

         borderRadius: 4,

         alignItems: "center",

         padding: 12,

      },

      input: {

         borderWidth: 2,

         padding: 15,

         marginBottom: 10,

         width: "70%",

         borderColor: "green",

         borderRadius: 4,

      },

      buttonText: {

         color: "#fff",

         fontSize: 16,

         fontWeight: "bold",

      },

   });

   // creating the state for the form

   const [initialValues, setInitialValues] = useState({

      name: "",

      email: "",

      password: "",

   });

   // creating the state for the errors

   const [errors, setErrors] = useState({});

   const [message, setMessage] = useState("");

   // creating the handleChange function to handle the change in the input fields

   function handleChange(key, val) {

      setInitialValues({ ...initialValues, [key]: val });

   }

   // creating the validateValues function to validate the form

   async function validateValues() {

      try {

         // validating the form using the userFormSchema

         await userFormSchema.validate(initialValues, { abortEarly: false });

         setErrors({});

      } catch (error) {

         //  if the form is invalid, then the errors are set to the state

         const newErrors = error.inner.reduce((acc, cur) => {

            acc[cur.path] = cur.message;

            return acc;

         }, {});

         setErrors(newErrors);

      }

   }

   // creating the handleFormSubmit function to handle the form submission

   function handleFormSubmit() {

      // validating the form values

      validateValues().then(() => {

         // set message based on the form is valid or invalid.

         if (Object.keys(errors).length === 0) {

         setMessage("Form is valid");

         } else {

            setMessage("Form is invalid");

         }

      });

   }

   return (

      // rendering the form

      <View style = {elementStyles.container}>

         {/* text inputs */}

         <TextInput

            style = {elementStyles.input}

            placeholder = "Name"

            value = {initialValues.name}

         onChangeText = {(value) => handleChange("name", value)}

         />

         {errors.name && <Text style = {elementStyles.error}> {errors.name} </Text>}

         <TextInput

            style = {elementStyles.input}

            placeholder = "Email"

            value = {initialValues.email}

            onChangeText = {(value) => handleChange("email", value)}

         />

         {errors.email && <Text style=  {elementStyles.error}> {errors.email} </Text>}

         <TextInput

            style = {elementStyles.input}

            placeholder = "Password"

            value = {initialValues.password}

            onChangeText = {(value) => handleChange("password", value)}

            secureTextEntry

         />

         {errors.password && (

            <Text style = {elementStyles.error}> {errors.password} </Text>

         )}

         {/* submit button */}

         <TouchableOpacity style = {elementStyles.button} onPress = {handleFormSubmit}>

            <Text style = {elementStyles.buttonText}> Submit Form </Text>

         </TouchableOpacity>

         <Text> {message} </Text>

      </View>

   );

};

export default App;

Copier après la connexion

Sortie

如何在 JavaScript 中的 React Native 中安装 yup?

Les utilisateurs ont appris à utiliser Yup et React-Native pour la validation des formulaires. Au lieu d'écrire du code de validation de formulaire personnalisé, les développeurs peuvent utiliser des bibliothèques comme Yup, ce qui rend le code plus lisible et plus simple.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal