bootstrapV4表单验证
Provide valuable, actionable feedback to your users with HTML5 form validation–. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
通过HTML5表单验证为⽤户提供有价值的、可操作的反馈信息-可在所有⽀持的浏览器中使⽤。可以选择从浏览器的默认验证反馈，或者使⽤我们内置类和starter javascript实现⾃定义消息。
How it works
⼯作原理
Here’s how form validation works with Bootstrap:
这是表单验证功能在bootstrap中的⼯作原理：
HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
在HTML中表单验证功能是通过CSS的两个伪类：:invalid和:valid来应⽤的，它可以应⽤于<input>、<select>和<textarea>元素。
Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>.
Bootstrap将:invalid和:valid伪类应⽤于⽗级元素，将.was-validated样式通常应⽤于<form>元素。
Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
另外，任何没有输⼊值的必填项显⽰为⽆效。这样以来，你就可以选择什么时候激活他们（通常在⽤户尝试表单的提交⾏为时）。
To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX),
重新渲染表单显⽰的步骤（例如，在使⽤AJAX动态提交过表单时）
remove the .was-validated class from the <form> again after submission.
再次提交表单后从<form>元素上删除.was-validated类
As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation.
如果⽤在服务器端，则需要使⽤.is-invalid和.is-valid类来代替两个伪类
They do not require a .was-validated parent class.
并且不需要在⽗级元素使⽤.was-validated类
Due to constraints in how CSS works,
由于CSS⼯作⽅式的限制
we cannot (at present) apply styles to a <label> that comes before a form control in the DOM without the help of custom JavaScript.
如果没有⾃定义Javascript的帮助，我们（⽬前）不能应⽤样式到表单控件前⾯的<label>。
All modern browsers support the constraint validation API, a series of JavaScript methods for validatin
g form controls.
所有现代浏览器都⽀持约束验证API，⼀系列⽤于表单控件的JavaScript⽅法
Feedback messages may utilize the browser defaults (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
反馈消息可以使⽤浏览器默认设置（不同浏览器的会有区别，且没法使⽤CSS来修饰）或者使⽤我们基于传统HTML和CSS⾃定义的反馈信息样式。
You may provide custom validity messages with setCustomValidity in JavaScript.
你可以在JavaScript中使⽤setCustomValidity提供⾃定义有效信息
With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.
考虑到这⼀点，请考虑以下关于：⾃定义表单验证样式、可选服务器端类和浏览器默认样式的演⽰。
Custom styles
⾃定义样式
For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>.
bootstrap 5
⽤于⾃定义bootstrap表单验证信息、你可能需要增加novalidate布尔属性到form标签中。
This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.
这将禁⽤浏览器默认反馈提⽰、但仍然提供通往javascript中的表单验证API的访问。
Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the :invalid and :valid styles applied to your form controls.
请尝试提交下⾯的表单；我们的javascript将截听提交按钮并且把反馈转达给你。当我们尝试提交时、你将看到:invalid和:valid样式被应⽤到你的表单控件上。
Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <select>s are only available with .custom-select, and not .form-control.
⾃定义反馈信息样式使⽤⾃定义颜⾊、边框、获取焦点时的样式和背景图标来更好的传达反馈信息。⽤于select控件的背景图标只适⽤
于.custom-select，不适⽤于.form-control。
Customizing
⾃定义
Validation states can be customized via Sass with the $form-validation-states map.
验证状态可以在Sass中使⽤$form-validation-states map来⾃⼰定义。
Located in our _variables.scss file, this Sass map is looped over to generate the default valid/invalid validation states. Included is a nested map for customizing each state’s color and icon.
在_variables.scss⽂件中，这个Sass map被循环应⽤来⽣成默认的“有效/⽆效”验证状态。包括⼀个嵌套的map来⾃定义每个状态的颜⾊和图标。
While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
虽然浏览器不⽀持其他状态，但使⽤⾃定义样式的浏览器可以轻松添加更复杂的表单反馈。
Please note that we do not recommend customizing these values without also modifying the form-validation-state mixin.
请注意，我们不建议在不修改form-validation-state mixin的情况下⾃定义这些值。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。