我对React还是很陌生,我有一个注册页面,其中有一个要使用正则表达式验证的密码字段。
我正在使用Formik和Yup进行验证,但是遇到错误,当我在“密码”字段中键入内容时,长度函数被调用的属性未定义。
在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控制台中的错误:-
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
答案 0 :(得分:9)
这就是我终于要工作的。
password: Yup.string()
.required('Please Enter your password')
.matches(
/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
"Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and One Special Case Character"
),
我从本文中提取了此正则表达式字符串:https://www.thepolyglotdeveloper.com/2015/05/use-regex-to-test-password-strength-in-javascript/
答案 1 :(得分:2)
您需要将实际的RegExp对象传递给matches
,而不是字符串。只需在密码架构中用正斜杠替换双引号即可:
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"
),
答案 2 :(得分:2)
以上都不适合我,我的解决方案在下面
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"
)
答案 3 :(得分:2)
昨晚在尝试解决类似的 React+Formik+Yup 密码验证问题时遇到了这个问题。总的来说,这里的解决方案很好。我只评论提供一个稍微不同的正则表达式:
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/
这在第四次前瞻中有所不同。在这个版本中,它寻找任何不是字母或数字的东西。以前的 RE 都将“特殊字符”的定义限制在 8 个左右的特定字符。这将匹配更广泛的范围。
我最初使用 (?=.*[^\w])
,它否定“单词”类 (\w
),但该类包含下划线。因此,这样做不会将下划线视为特殊字符。
答案 4 :(得分:0)
好吧,经过几个小时的修改后,我决定改做自己的自定义验证。
这就是我所做的:-
password: yup
.string()
.required("Please Enter your password")
.test(
"regex",
"Password must be min 8 characters, and have 1 Special Character, 1 Uppercase, 1 Number and 1 Lowercase",
val => {
let regExp = new RegExp(
"^(?=.*\\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$"
);
console.log(regExp.test(val), regExp, val);
return regExp.test(val);
}
)
目前,这很好。但是我真的很想知道为什么会弹出错误。如果您能够找到解决方案,请将其作为答案发布,如果对我有用,我会将其标记为正确的答案。谢谢。
答案 5 :(得分:0)
当我搜索这个答案时,我在网上找到的大多数答案(甚至在这个线程中标记为正确答案的答案)都是这样的,它不检查大写字符:
password: yup
.string()
.required('Please Enter your password')
.matches(
/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
"Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
),
但对我来说,这实际上并没有检查是否同时存在大写和小写字符。不过这确实对我有用(检查特殊字符、大写字符、小写字符和数字):
password: yup
.string()
.required('Please Enter your password')
.matches(
/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/,
"Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
),
答案 6 :(得分:0)
考虑到上述所有答案并经过一些研究,综合方法可以是检查密码的强度:
password: Yup
.string()
.required('Required')
.matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
"Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
)
但是,这种方法不适用于所有特殊字符。如果您想包括所有可能的特殊字符,如 here 所列。此解决方案可以修改为:
password: Yup
.string()
.required('Required')
.matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])[A-Za-z\d!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]{8,}$/,
"Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
)
这是我在应用程序中使用的解决方案。但这完全是您的选择,您希望在密码强度检查中包含/排除哪些特殊字符。
答案 7 :(得分:-2)
这对我有用:
password: yup
.string()
.required('Password is required')
.matches(regExp)
.min(6, 'Your password must be longer than 6 characters.')