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 – 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
=
(
gõ
) < / p>
=
& gt;
{
let
regx
=
null
;
chuyển đổi
(
gõ
)
{
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
=
/ ^
(
?
:
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 và 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 và 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
}
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
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
- 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