feat: change validation to yup

thay đổi validation từ rules UseFormGetValues thành yup

package.json

@@ -16,10 +16,12 @@
     "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,css,scss}\""
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
-    "react-router-dom": "^6.26.2"
+    "react-router-dom": "^6.26.2",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/pages/Login/Login.tsx

@@ -1,26 +1,23 @@
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 import Input from 'src/components/input'
-import { getRules } from 'src/utils/rules'
-interface FormData {
-  email: string
-  password: string
-}
+import { getRules, LoginSchema, loginSchema } from 'src/utils/rules'
+import { yupResolver } from '@hookform/resolvers/yup'
+type FormData = LoginSchema
 export default function Login() {
   const {
     register,
     getValues,
     handleSubmit,
     formState: { errors }
-  } = useForm<FormData>()
+  } = useForm<FormData>({ resolver: yupResolver(loginSchema) })
   const onSubmit = handleSubmit(
     () => {},
     () => {
       const password = getValues('password')
       console.log(password)
     }
   )
-  const rules = getRules(getValues)
   return (
     <div className='bg-orange'>
       <div className='container'>
@@ -35,7 +32,6 @@ export default function Login() {
                 className='mt-8'
                 errorMessage={errors.email?.message}
                 placeholder='Email'
-                rules={rules.email}
               />
               <Input
                 name='password'
@@ -44,7 +40,6 @@ export default function Login() {
                 className='mt-2'
                 errorMessage={errors.password?.message}
                 placeholder='Mật khẩu'
-                rules={rules.password}
                 autoComplete='on'
               />
               <div className='mt-2'>

src/pages/Register/Register.tsx

@@ -1,20 +1,19 @@
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 import Input from 'src/components/input'
-import { getRules } from 'src/utils/rules'
-interface FormData {
-  email: string
-  password: string
-  confirmPassword: string
-}
+import { getRules, schema, Schema } from 'src/utils/rules'
+import { yupResolver } from '@hookform/resolvers/yup'
+type FormData = Schema
 export default function Register() {
   const {
     getValues,
     register,
     handleSubmit,
     formState: { errors }
-  } = useForm<FormData>()
-  const rules = getRules(getValues)
+  } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  })
+  //const rules = getRules(getValues)
   const onSubmit = handleSubmit((data) => {
     console.log(data)
   })
@@ -33,7 +32,6 @@ export default function Register() {
                 className='mt-8'
                 errorMessage={errors.email?.message}
                 placeholder='Email'
-                rules={rules.email}
               />
               <Input
                 name='password'
@@ -42,7 +40,6 @@ export default function Register() {
                 className='mt-2'
                 errorMessage={errors.password?.message}
                 placeholder='Mật khẩu'
-                rules={rules.password}
                 autoComplete='on'
               />
               <Input
@@ -52,7 +49,6 @@ export default function Register() {
                 className='mt-2'
                 errorMessage={errors.confirmPassword?.message}
                 placeholder='Mật khẩu'
-                rules={rules.confirmPassword}
                 autoComplete='on'
               />
               <div className='mt-6'>

src/utils/rules.ts

@@ -1,4 +1,5 @@
 import { UseFormGetValues } from 'react-hook-form'
+import * as yup from 'yup'
 export const getRules = (getValues?: UseFormGetValues<any>) => ({
   email: {
     required: {
@@ -58,3 +59,34 @@ export const getRules = (getValues?: UseFormGetValues<any>) => ({
     }
   }
 })
+
+export const schema = yup.object({
+  email: yup
+    .string()
+    .required('Vui lòng nhập email')
+    .email('Email không đúng định dạng')
+    .min(5, 'Email tối thiểu 5 ký tự')
+    .max(160, 'Email tối đa 160 ký tự'),
+  password: yup
+    .string()
+    .required('Vui lòng nhập mật khẩu')
+    .min(8, 'Mật khẩu bắt buộc có độ dài lớn hơn 7 ký tự')
+    .max(160, 'Mật khẩu tối đa 160 ký tự')
+    .matches(/[A-Z]/, 'Mật khẩu phải có ít nhất một ký tự viết hoa')
+    .matches(/[a-z]/, 'Mật khẩu phải có ít nhất một ký tự viết thường')
+    .matches(/[0-9]/, 'Mật khẩu phải có ít nhất một chữ số')
+    .matches(/[#?!@$%^&*-]/, 'Mật khẩu phải có ít nhất một ký tự đặc biệt'),
+  confirmPassword: yup
+    .string()
+    .required('Vui lòng nhập lại mật khẩu')
+    .min(8, 'Nhập lại mật khẩu bắt buộc có độ dài lớn hơn 7 ký tự')
+    .max(160, 'Nhập lại mật khẩu tối đa 160 ký tự')
+    .matches(/[A-Z]/, 'Nhập lại mật khẩu phải có ít nhất một ký tự viết hoa')
+    .matches(/[a-z]/, 'Nhập lại mật khẩu phải có ít nhất một ký tự viết thường')
+    .matches(/[0-9]/, 'Nhập lại mật khẩu phải có ít nhất một chữ số')
+    .matches(/[#?!@$%^&*-]/, 'Nhập lại mật khẩu phải có ít nhất một ký tự đặc biệt')
+    .oneOf([yup.ref('passwrod')], 'Nhập lại mật khẩu không khớp')
+})
+export const loginSchema = schema.omit(['confirmPassword'])
+export type LoginSchema = yup.InferType<typeof loginSchema>
+export type Schema = yup.InferType<typeof schema>

yarn.lock

@@ -354,6 +354,11 @@
   dependencies:
     levn "^0.4.1"
 
+"@hookform/resolvers@^3.9.0":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.9.0.tgz#cf540ac21c6c0cd24a40cf53d8e6d64391fb753d"
+  integrity sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==
+
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
@@ -2526,6 +2531,11 @@ prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-expr@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.6.tgz#f77bc00d5928a6c748414ad12882e83f24aec1e8"
+  integrity sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
@@ -2982,6 +2992,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+tiny-case@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03"
+  integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -2994,6 +3009,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
+
 ts-api-utils@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
@@ -3026,6 +3046,11 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
+type-fest@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
+  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
+
 typed-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
@@ -3224,3 +3249,13 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yup@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-1.4.0.tgz#898dcd660f9fb97c41f181839d3d65c3ee15a43e"
+  integrity sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==
+  dependencies:
+    property-expr "^2.0.5"
+    tiny-case "^1.0.3"
+    toposort "^2.0.2"
+    type-fest "^2.19.0"