.valid-feedback 或 .invalid-feedback 类用来告诉用户缺少什么信息，或者在提交表单之前需要完成什么。

实例

使用 .was-validated 类显示表单在提交之前需要填写的内容：

<
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
"
>
验证成功！
div
>

<
div

class
=
"
invalid-feedback
"
>
请输入用户名！
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
"
>
验证成功！
div
>

<
div

class
=
"
invalid-feedback
"
>
请输入密码！
div
>

div
>

<
div

class
=
"
form-group form-check
"
>

<
label

class
=
"
form-check-label
"
>

<
input

class
=
"
form-check-input
"

type
=
"
checkbox
"

name
=
"
remember
"

required
>
同意协议
<
div

class
=
"
valid-feedback
"
>
验证成功！
div
>

<
div

class
=
"
invalid-feedback
"
>
同意协议才能提交。
div
>

label
>

div
>

<
button

type
=
"
submit
"

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

form
>

尝试一下 »

实例

使用 .needs-validation，它将在表单提交之后验证缺少的内容。这里需要添加一些 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
"
>
验证成功！
div
>

<
div

class
=
"
invalid-feedback
"
>
请输入用户名！
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
"
>
验证成功！
div
>

<
div

class
=
"
invalid-feedback
"
>
请输入密码！
div
>

div
>

<
div

class
=
"
form-group form-check
"
>

<
label

class
=
"
form-check-label
"
>

<
input

class
=
"
form-check-input
"

type
=
"
checkbox
"

name
=
"
remember
"

required
>
同意协议
<
div

class
=
"
valid-feedback
"
>
验证成功！
div
>

<
div

class
=
"
invalid-feedback
"
>
同意协议才能提交。
div
>

label
>

div
>

<
button

type
=
"
submit
"

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

form
>

<
script
>
// 如果验证不通过禁止提交表单 (function() { 'use strict'; window.addEventListener('load', function() { // 获取表单验证样式 var forms = document.getElementsByClassName('needs-validation'); // 循环并禁止提交 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
>

尝试一下 »

网站标题：创新互联Bootstrap5教程：Bootstrap5表单验证
转载来源：http://www.shufengxianlan.com/qtweb/news37/347937.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联