私はReactを初めて使用しましたが、Regexで検証するパスワードフィールドがあるサインアップページがあります。
検証にFormikとYupを使用していますが、「password」フィールドに入力すると、length関数が呼び出されているプロパティが未定義であるというエラーが発生しました。
Yupには「matches」と呼ばれる関数があり、正規表現のチェックに利用しようとしています。そのとき、このエラーが発生します。この検証を削除した後、パスワードフィールドに設定された他の検証は正常に機能しました。
以下は、SignUp.jsファイルのコードです。
import React from "react";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import "./SignUp.css";
import * as yup from "yup";
import { Formik } from "formik";
const schema = yup.object({
username: yup.string().required('Please Enter a username'),
email: yup
.string()
.email()
.required('Please Enter your Email'),
confirmEmail: yup
.string()
.email()
.required()
.oneOf([yup.ref("email"), null], "Emails must match"),
password: yup
.string()
.required('Please Enter your password')
.matches(
"^(?=.*[A-Za-z])(?=.*d)(?=.*[@$!%*#?&])[A-Za-zd@$!%*#?&]{8,}$",
"Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
),
confirmPassword: yup
.string()
.required()
.oneOf([yup.ref("password"), null], "Passwords must match")
});
const SignUp = props => {
return (
<Formik
validationSchema={schema}
onSubmit={console.log}
initialValues={{
username: "",
email : "",
confirmEmail : "",
password: "",
confirmPassword : ""
}}
>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors,
}) => (
<div className="SignUpForm">
<h1 className="SignInHeading">SIGN UP</h1>
<Form noValidate onSubmit={handleSubmit}>
<Form.Group controlId="formBasicUserName">
<Form.Control
size="lg"
className="SignUpFormControls"
type="text"
name="username"
value={values.username}
onChange={handleChange}
placeholder="Username"
isInvalid={!!errors.username}
/>
<Form.Control.Feedback className="FeedBack" type="invalid">
{errors.username}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Control
type="email"
placeholder="Email"
value={values.email}
onChange={handleChange}
name="email"
className="SignUpFormControls"
size="lg"
isInvalid={!!errors.email}
/>
<Form.Control.Feedback className="FeedBack" type="invalid">
{errors.email}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formBasicConfirmEmail">
<Form.Control
type="email"
className="SignUpFormControls"
size="lg"
name="confirmEmail"
value = {values.confirmEmail}
onChange={handleChange}
placeholder="Confirm Email"
isInvalid={!!errors.confirmEmail}
/>
<Form.Control.Feedback className="FeedBack" type="invalid">
{errors.confirmEmail}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control
className="SignUpFormControls"
size="lg"
type="password"
name="password"
value={values.password}
onChange={handleChange}
placeholder="Password"
isInvalid={!!errors.password}
/>
<Form.Control.Feedback className="FeedBack" type="invalid">
{errors.password}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="formBasicConfirmPassword">
<Form.Control
className="SignUpFormControls"
size="lg"
name="confirmPassword"
onChange={handleChange}
type="password"
value={values.confirmPassword}
placeholder="Confirm Password"
isInvalid={!!errors.confirmPassword}
/><Form.Control.Feedback className="FeedBack" type="invalid">
{errors.confirmPassword}
</Form.Control.Feedback>
</Form.Group>
<Button variant="primary" className="SignUpButton" type="submit">
Sign Up
</Button>
<Form.Text>
Already a User?{" "}
<a href="#signin" onClick={props.toggle}>
Sign In
</a>
</Form.Text>
</Form>
</div>)}
</Formik>
);
};
export default SignUp;
chrome consoleのエラー:
formik.esm.js:721 Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
at yupToFormErrors (formik.esm.js:721)
at formik.esm.js:276
上記のどれも私にとってはうまくいきません、私の解決策はここにあります
password: yup
.string()
.required("Şifreniz kayıt olmak için gereklidir.")
.matches(
/^.*(?=.{8,})((?=.*[!@#$%^&*()\-_=+{};:,<.>]){1})(?=.*\d)((?=.*[a-z]){1})((?=.*[A-Z]){1}).*$/,
"En Az 8 Karakter, Bir Büyük Harf, Bir Küçük Harf, Bir Rakam ve Bir Özel Karakter İçermelidir"
)