Xác thực đầu vào độ dài tối thiểu và tối đa trong React – số loại đầu vào xác thực tối thiểu tối đa

Xác thực đầu vào độ dài tối thiểu và tối đa trong React, hiển thị lỗi xác thực biểu mẫu độ dài tối thiểu và tối đa trong phản ứng, độ dài văn bản nhập biểu mẫu trong React

Bạn đang xem: loại đầu vào số xác thực tối thiểu tối thiểu

Hôm nay, chúng tôi sẽ hướng dẫn bạn cách triển khai xác thực đầu vào độ dài tối thiểu và tối đa trong React. Trong bài viết trước, chúng tôi đã giải thích cho bạn cách tạo thành phần đầu vào chung và sử dụng lại nó cho xác thực trong React.

Ứng dụng Demo

Đầu ra - Xác thực đầu vào độ dài tối thiểu và tối đa trong React - Clue Mediator Đầu ra – Xác thực đầu vào độ dài tối thiểu và tối đa trong React – Trình giải quyết đầu mối

Xác thực đầu vào độ dài tối thiểu và tối đa trong React

1. Tạo thành phần Đầu vào chung

Trước khi bắt đầu ví dụ, tôi sẽ đề nghị bạn tham khảo bài viết trước để tạo thành phần Đầu vào chung.

Tham khảo: Xác thực đầu vào trong React

2. Thêm xác thực độ dài Tối thiểu và Tối đa trong thành phần Đầu vào

Hãy mở rộng chức năng cho min & amp; xác nhận tối đa trong thành phần Đầu vào. Ở đây, chúng tôi sẽ thay đổi một chút hàm validationHandler và thêm min & amp; xác thực tối đa cho trường đầu vào.

1 < / p>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18 < / p>

const

val idationHandler

=

(

< p class = "crayon-i"> e

,

đạo cụ

)

=

& gt;

{

if

(

!

đạo cụ

< p class = "crayon-sy">.

onValidateFunc

)

quay lại

;

< / p>

const

{

giá trị

,

tên

} < / p>

=

e

.

target

;

let

tin nhắn

=

null < / p>

;

nếu

(

!

giá trị

& amp; & amp; props.isReq) {

msg = ` Vui lòng nhập $ {props.title} .`;

}

else

nếu

(

value

& amp; & amp; props.reqType & amp; & amp;! getRegExp (props.reqType) .test (value)) {

msg = `Vui lòng nhập $ {props.title} hợp lệ .`;

}

else

if

(

đạo cụ

.

min

& amp; & amp; value.length & lt; props.min)

msg =` $ {props.title} phải dài ít nhất $ {props.min} ký tự.`;

else

nếu

(< / p>

đạo cụ

.

max

& amp; & amp; value.length & gt; props.max) {

msg = ` $ {props.title} dài hơn $ {props.max} ký tự.`;

}

đạo cụ

.

onValidateFunc

(

msg

,

tên

)

;

}

Thành phần đầy đủ của bạn sẽ trông như thế này.

Input.js

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 < / p>

29

30

31 < / p>

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48 < / p>

49

50

51 < / p>

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

nhập

Phản ứng

,

{

bản ghi nhớ

}

từ

‘react’

;

nhập

PropTypes

từ

‘prop-styles’

;

const

getRegExp

=

(

) < / p>

=

& gt;

{

let

regx

=

null

;

chuyển đổi

(

)

{

case

‘EMAIL’

:

r egx

=

/ ^

(

(

[

^

& lt;

& gt;

(

)

[

\

]

\

\

.

,

< p class = "crayon-sy">;

:

\

s

@

“] + (\. [^ & lt; & gt; () [\] \\.,;: \ [email được bảo vệ]

]

+

)

*

)

|

(

“. +”

)

)

@

(

(

[

[

0

9

]

{

1

,

3

}

\

.

[

0

9

]

{

1

,

3

}

\

.

[

0

9

]

{

1

,

3

}

\

. < / p>

[

0

9

< p class = "crayon-sy">]

{

1

,

3

}

\

]

)

|

(

(

[

a

zA

Z

\

0

9

]

+

\

.

)

+

[

a

zA

Z

]

{

2

,

}

)

)

$ < / p> /

;

/ ^

break

;

case

‘URL’

:

regx

Xem Thêm  HTML ngữ nghĩa: Nó là gì và nó cải thiện trang web của bạn như thế nào - html ngữ nghĩa là gì

=

/ ^

(

?

:

http

(

s

)

?

:

\

/

\

/

)

?

[

\

w < / p>

.

]

+

(

?

:

\

.

[

\

w

\

.

]

+

)

+

[

\

w

\

\

.

_

~

:

/

?

# [\ ] @! \ $ & amp; ‘

\

(

\ < / p>

)

\ * \ +,; =.] + $ /;

ngắt

;

default

:

ngắt

;

}

quay lại

regx

;

}

< / p>

const

validationHandler

=

(

e < / p>

,

đạo cụ

)

=

& gt;

{

nếu

(

!

đạo cụ

.

onValidateFunc

)

return

;

const

{

value

,

tên

}

=

e

.

target

;

let

Thư

=

null

;

nếu

(

!

value

& amp; & amp; props.isReq) {

msg =` Vui lòng nhập $ {props.title} .`;

}

else

if

(

value

& amp; & amp; props.reqType & amp; & amp; ! getRegExp (props.reqType) .test (value)) {

msg = `Vui lòng nhập $ {props.title} .`;

}

else

if

< p class = "crayon-sy"> (

đạo cụ

.

min

& amp; & amp; value.length & lt; props.min)

msg = `$ {props.title} phải ở độ dài ít nhất $ {props.min} ký tự.`;

< / p>

else

nếu

(

đạo cụ

.

max

& amp; & amp; value.length & gt; props.max) {

msg = ` $ {props.title} dài hơn $ {props.max} ký tự.`;

}

đạo cụ

.

onValidateFunc

(

msg

,

tên

)

;

}

const

Đầu vào

=

đạo cụ

=

& gt;

{

const

< p class = "crayon-i"> inputProps

=

{

tên

:

đạo cụ

.

tên

,

< / p>

loại

:

đạo cụ

.

loại

,

trình giữ chỗ

:

< / p>

đạo cụ

.

trình giữ chỗ

|

|

`

Nhập < / p>

$

{

đạo cụ

.

title

}

`

,

className

:

đạo cụ

. < / p>

className

,

giá trị

:

đạo cụ

.

giá trị

< / p>

}

return

(

& lt;

div

className

= < p class = "crayon-sy"> {

đạo cụ

.

externalClassName

}

& gt;

& lt;

label

className

=

“form-label”

& gt;

{

đạo cụ

.

title

}

& lt ;

/

nhãn

& gt;

& lt;

input

{

.

.

.

inputProps

}

onChange

=

{

e

=

& gt;

đạo cụ

.

onChangeFunc

(

e

.

target

.

value

,

e

.

target

.

tên

,

e

)

}

onBlur

=

{< / p>

e

=

& gt;

< p class = "crayon-h">

validationHandler

(

e

,

đạo cụ

)

}

/

& gt;

{

đạo cụ

.

errorMsg

& amp; & amp; & lt; span className = “text-risk” & gt; {props.errorMsg === true? `Vui lòng nhập $ {props.title} .`: props.errorMsg} & lt; / span & gt;}

< p class = "crayon-sy"> & lt; / div & gt;

)

}

< / p>

Input.defaultProps = {

type: ‘text’,

name: ”,

title: ”,

placeholder: ”,

className: ‘form-control form-control-sm’,

externalClassName: ‘mb-2’,

giá trị: ”,

onChangeFunc: () = & gt; {},

isReq: null, < / p>

reqType: ”,

< p class = "crayon-line crayon-sọc-line" id = "crayon-62ce4d6a25b67640734412-72">

onValidateFunc: () = & gt; {}

}

Input.propTypes = {

Loại: PropTypes.string,

tên: PropTypes.string ,

title: PropTypes.string, < / p>

trình giữ chỗ: PropTypes.string,

className: PropTypes.string,

externalClassName: PropTypes.string,

value: PropTypes.any,

min: PropTypes.number,

max: PropTypes.number,

onChangeFunc: PropTypes .func,

isReq: PropTypes.bool ,

reqType: PropTypes.string,

errorMsg: PropTypes.any,

onValidateFunc: PropTypes.func

}

xuất bản ghi nhớ mặc định (Đầu vào);

3. Sử dụng thành phần Đầu vào để xác thực

Bây giờ, chúng ta sẽ sử dụng thành phần Đầu vào chung để xác thực. Chúng tôi sẽ lấy userId ticketNumber để thêm xác thực của min & amp; chiều dài tối đa.

< p class = "crayon-Smooth-wrap">

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

const

< / p>

[

form

,

setForm

]

=

useState

(

{

userId

:

,

ticketNumber

:

}

)

;

const

onInputValidate

=

(

value

,

tên

)

=

& gt;

{

setError

(

trước

=

& gt;

(

{

.

.

.

prev

,

[

tên

]

:

{

< p class = "crayon-h">

.

.

.

trước

[

name < / p>

]

,

errorMsg

:

giá trị

}

}

)

< p class = "crayon-sy">)

;

}

< p class = "crayon-line" id = "crayon-62ce4d6a25b6a753776266-13">

const

[

error

,

setError

]

=

useState

(

{

userId

:

{

isReq

:

< p class = "crayon-h">

true

,

errorMsg

:

,

onValidateFunc

:

onInputValidate

}

,

ticketNumber

:

{

isReq

:

true

,

errorMsg

:

,

onValidateFunc

:

onInputValidate

}

}

)

;

Hãy hiển thị mã HTML cho hai trường này, nơi chúng tôi sẽ đặt xác thực tối thiểu 6 chữ số và tối đa 8 chữ số cho Id người dùng Số vé tương ứng.

1

2

3

4

5

6

7

8

9

10

11

12

13

>

14

15

16

17

18

& lt;

Nhập

< p class = "crayon-i"> type

=

“number”

name

=

” userId “

title

=

” Id người dùng “

value

=

{

biểu mẫu

.

userId

Xem Thêm  PXtoEM.com Chuyển đổi PX sang EM được thực hiện đơn giản. - công cụ chuyển đổi pixel sang em

}

min

=

{

6

}

onChangeFunc

=

{

onInputChange

}

{

.

.

.

error

.

userId

}

/

& gt;

& lt;

Đầu vào

loại

=

” number “

name

=

“ticketNumber”

title

=

“Số vé”

value

=

{

form

.

ticketNumber

}

max

=

{

8

}

onChangeFunc

=

{

onInputChange

}

< p class = "crayon-line" id = "crayon-62ce4d6a25b6e812356678-17">

{

.

.

.

error

.

ticketNumber

}

/

& gt;

Hãy tập hợp tất cả mọi thứ lại với nhau và xem nó trông như thế nào.

App.js

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

nhập

Phản ứng

,

{

useState

,

useCallback

}

từ

‘react’

;

nhập

Đầu vào

từ

‘./ Đầu vào’

;

chức năng

Ứng dụng

(

)

{

const

< p class = "crayon-h">

[

form

,

setForm

]

=

useState

(

{

< p class = "crayon-h">

userId

:

,

ticketNumber

:

}

)

;

< / p>

const

onInputValidate

=

(

value

,

tên

)

=

& gt;

{

setError

(

trước

=

& gt;

(

{

.

.

.

< p class = "crayon-i"> trước

,

[

name

]

:

{

.

.

.

prev

[

tên

]

,

errorMsg

:

giá trị

}

}

)

)

;

}

const

[< / p>

error

,

setError

]

=

useState

(

{

userId

:

{

< / p>

isReq

:

true

,

errorMsg

:

,

onValidateFunc

:

onInputValidate

}

,

ticketNumber

:

{

isReq

:

true

,

errorMsg

:

,

onValidateFunc

:

onInputValidate

}

}

)

;

const

onInputChange

=

useCallback

(

(

value

,

tên

)

=

& gt;

{

setForm

(

trước

=

& gt;

(

{

< / p>

.

.

.

trước

,

[

tên

]

:

value

}

)

)

;

< p class = "crayon-sy">}

,

[

]

)

; < / p>

const

validateForm

=

(

)

=

& gt;

{

let

isInvalid

=

false

;

Đối tượng

.

phím

(

error

)

.

forEach

(

x

=

& gt;

{

const

errObj

=

error

[

x

]

;

nếu

(

errObj

.

errorMsg

)

{

isInvalid

=

true

;

} < / p>

else

nếu

(

errObj

.

isReq

& amp; & amp; ! form [x]) {

isInvalid = true;

onInputValidate

(

true

,

x

)

;

}

}

)

;

trở lại

!

isInvalid

;

}

const

handleSubmit

=

(

)

=

& gt;

{

< p class = "crayon-line" id = "crayon-62ce4d6a25b6f138258741-53">

const

isValid

=

validateForm

(

)

;

nếu

(

!

isValid

)

{

bảng điều khiển

.

error

(

‘Mẫu không hợp lệ!’

)

;

return

false

;

< p class = "crayon-line" id = "crayon-62ce4d6a25b6f138258741-57">

}

bảng điều khiển

.

log

(

‘Dữ liệu:’

,

< p class = "crayon-i"> form

)

;

}

quay lại

(

& lt;

div

className

=

” app “

& gt;

& lt;

div

className

=

‘mb-3’

& gt;

& lt;

strong

< p class = "crayon-h"> & gt;

Min

& amp; Xác thực đầu vào tối đa trong React – & lt; a href = “https://www.cluemediator.com” target = “_ blank” rel = “noreferrer noopener” & gt; Clue Mediator & lt; / a & gt; & lt; / strong & gt; & lt; / div & gt ;

& lt; div className = ‘form’ & gt;

& lt; Đầu vào

type = “number”

name =” userId “

title = “User Id”

value = {form.userId}

min = {6}

OnChangeFunc = {onInputChange}

{… lỗi. userId}

/ & gt;

& lt; Đầu vào

type =” number “

name =” ticketNumber “

title = “Số vé”

value = {form.ticketNumber}

max = {8}

onChangeFunc = {onInputChange}

{… error.ticketNumber}

/ & gt;

& lt; button

className = ‘btn btn-primary btn-sm mt-2’

onClick = {handleSubmit} & gt;

Gửi

& lt; / button & gt;

& lt; / div & gt;

& lt; / div & gt;

);

< p class = "crayon-line crayon-sọc-line" id = "crayon-62ce4d6a25b6f138258741-92">

}

xuất

default

Ứng dụng

;

4. Đầu ra

Chạy ứng dụng và kiểm tra đầu ra trong trình duyệt.

Đó là nó cho ngày hôm nay.
Cảm ơn bạn đã đọc. Chúc bạn mã hóa vui vẻ .. !! 🙂

Bản trình diễn & amp; Mã nguồn

Kho lưu trữ GitHub Dự án StackBlitz

Xem Thêm  The PHP Framework For Web Artisans - cách xóa cache trình duyệt

Nếu bạn tìm thấy giá trị trong bài viết này,
bạn có thể ủng hộ chúng tôi bằng cách mua cho tôi một ly cà phê! ☕


Xem thêm những thông tin liên quan đến chủ đề số loại đầu vào xác thực tối thiểu tối đa

FEB 13, 2021 | Police Chief Candidate Forum

alt

  • Tác giả: City of San Jose, CA
  • Ngày đăng: 2021-02-13
  • Đánh giá: 4 ⭐ ( 9071 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Police Chief Candidate Forum:
    The City of San José is in the process of recruiting for a new Chief of Police following the retirement of Chief Eddie Garcia after 29 years of service to our community. During this session, the candidates will answer questions posed by San Joseans.

    Foro de Candidatos a Jefe de Policía:
    La Ciudad de San José está en proceso de reclutar un nuevo Jefe de Policía luego del retiro del Jefe Eddie García después de 29 años de servicio a nuestra comunidad. Durante el Foro, los candidatos responderán a las preguntas planteadas por San Joseanos.

    Buổi Hội Thảo cho Ứng Cử Viên Vị Trí Cảnh Sát Trưởng:
    Thành Phố San José đang trong quá trình kêu gọi và chọn lựa người Cảnh Sát Trưởng mới sau khi Cảnh Sát Trưởng Eddie Garcia đã về hưu sau 29 năm phục vụ cộng đồng. Trong Buổi Hội Thảo, các ứng cử viên sẽ trả lời các câu hỏi của người dân San Jose.

Cách Xác Định Mức Tồn Kho Tối Thiểu, Lượng Tồn Kho Tối Đa Trong Doanh Nghiệp

  • Tác giả: wingroupvn.com
  • Đánh giá: 4 ⭐ ( 7649 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phân tích và lấy ví dụ minh họa về sự lựa chọn đầu vào tối ưu để hoăc tối thiểu

  • Tác giả: text.123docz.net
  • Đánh giá: 3 ⭐ ( 3419 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: – Tại 123doc thư viện tài liệu trực tuyến Việt Nam

Hướng dẫn mới về mức lương tối thiểu với lao động đã qua đào tạo

  • Tác giả: luatvietnam.vn
  • Đánh giá: 3 ⭐ ( 7386 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn mới về mức lương tối thiểu với lao động đã qua đào tạo theo hướng dẫn tại Công văn 2086/BLĐTBXH-TLĐLĐVN ngày 17/6/2022.

Lệ phí thi môn tiếng Anh: 120.000 đ/môn; Lệ phí thi môn GMAT: 120.000 đồng. 4. Kinh phí đào tạo: Học phí dự kiến năm 2022 là 1.090.000 đ/tín chỉ 5. Đăng ký dự thi: Thí sinh căn cứ vào các điều kiện qu

  • Tác giả: sdhueh.blogspot.com
  • Đánh giá: 5 ⭐ ( 9078 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thông tư 64/2017/TT-BTNMT quy định xác định dòng chảy tối thiểu trên sông suối hạ lưu các hồ chứa

  • Tác giả: thuvienphapluat.vn
  • Đánh giá: 4 ⭐ ( 5080 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Một số vấn đề lý luận và thực tiễn cho khoá luận tốt nghiệp của mình

  • Tác giả: luanvan.co
  • Đánh giá: 5 ⭐ ( 7145 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tiền lương tối thiểu – Một số vấn đề lý luận và thực tiễn cho khoá luận tốt nghiệp của mình – Thế giới bước sang một thiên niên kỷ mới và đang dần đi …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình