日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)Bootstrap5教程:Bootstrap5表單驗(yàn)證

Bootstrap5 表單驗(yàn)證

我們可以使用不同的驗(yàn)證類來(lái)設(shè)置表單的驗(yàn)證功能。

.was-validated 或 .needs-validation 添加到

元素中,input 輸入字段將具有綠色(有效)或紅色(無(wú)效)邊框效果,用于說(shuō)明表單是否需要輸入內(nèi)容。

.valid-feedback 或 .invalid-feedback 類用來(lái)告訴用戶缺少什么信息,或者在提交表單之前需要完成什么。

實(shí)例

使用 .was-validated 類顯示表單在提交之前需要填寫的內(nèi)容:

<
form

action
=
"
"

class
=
"
was-validated
"
>

<
div

class
=
"
form-group
"
>

<
label

for
=
"
uname
"
>
Username:
label
>

<
input

type
=
"
text
"

class
=
"
form-control
"

id
=
"
uname
"

placeholder
=
"
Enter username
"

name
=
"
uname
"

required
>

<
div

class
=
"
valid-feedback
"
>
驗(yàn)證成功!
div
>

<
div

class
=
"
invalid-feedback
"
>
請(qǐng)輸入用戶名!
div
>

div
>

<
div

class
=
"
form-group
"
>

<
label

for
=
"
pwd
"
>
Password:
label
>

<
input

type
=
"
password
"

class
=
"
form-control
"

id
=
"
pwd
"

placeholder
=
"
Enter password
"

name
=
"
pswd
"

required
>

<
div

class
=
"
valid-feedback
"
>
驗(yàn)證成功!
div
>

<
div

class
=
"
invalid-feedback
"
>
請(qǐng)輸入密碼!
div
>

div
>

<
div

class
=
"
form-group form-check
"
>

<
label

class
=
"
form-check-label
"
>

<
input

class
=
"
form-check-input
"

type
=
"
checkbox
"

name
=
"
remember
"

required
>
同意協(xié)議
<
div

class
=
"
valid-feedback
"
>
驗(yàn)證成功!
div
>

<
div

class
=
"
invalid-feedback
"
>
同意協(xié)議才能提交。
div
>

label
>

div
>

<
button

type
=
"
submit
"

class
=
"
btn btn-primary
"
>
提交
button
>

form
>

嘗試一下 ?

實(shí)例

使用 .needs-validation,它將在表單提交之后驗(yàn)證缺少的內(nèi)容。這里需要添加一些 JavaScript 代碼才能使代碼正常工作:

<
form

action
=
"
"

class
=
"
needs-validation
"

novalidate
>

<
div

class
=
"
form-group
"
>

<
label

for
=
"
uname
"
>
Username:
label
>

<
input

type
=
"
text
"

class
=
"
form-control
"

id
=
"
uname
"

placeholder
=
"
Enter username
"

name
=
"
uname
"

required
>

<
div

class
=
"
valid-feedback
"
>
驗(yàn)證成功!
div
>

<
div

class
=
"
invalid-feedback
"
>
請(qǐng)輸入用戶名!
div
>

div
>

<
div

class
=
"
form-group
"
>

<
label

for
=
"
pwd
"
>
Password:
label
>

<
input

type
=
"
password
"

class
=
"
form-control
"

id
=
"
pwd
"

placeholder
=
"
Enter password
"

name
=
"
pswd
"

required
>

<
div

class
=
"
valid-feedback
"
>
驗(yàn)證成功!
div
>

<
div

class
=
"
invalid-feedback
"
>
請(qǐng)輸入密碼!
div
>

div
>

<
div

class
=
"
form-group form-check
"
>

<
label

class
=
"
form-check-label
"
>

<
input

class
=
"
form-check-input
"

type
=
"
checkbox
"

name
=
"
remember
"

required
>
同意協(xié)議
<
div

class
=
"
valid-feedback
"
>
驗(yàn)證成功!
div
>

<
div

class
=
"
invalid-feedback
"
>
同意協(xié)議才能提交。
div
>

label
>

div
>

<
button

type
=
"
submit
"

class
=
"
btn btn-primary
"
>
提交
button
>

form
>

<
script
>
// 如果驗(yàn)證不通過(guò)禁止提交表單 (function() { 'use strict'; window.addEventListener('load', function() { // 獲取表單驗(yàn)證樣式 var forms = document.getElementsByClassName('needs-validation'); // 循環(huán)并禁止提交 var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })();
script
>

嘗試一下 ?


當(dāng)前文章:創(chuàng)新互聯(lián)Bootstrap5教程:Bootstrap5表單驗(yàn)證
文章URL:http://www.dlmjj.cn/article/cdphcic.html