bootstrapV4表单验证

Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers. 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 , elements.<br>在HTML中表单验证功能是通过CSS的两个伪类：:invalid和:valid来应用的，它可以应用于<input>、<select>和<textarea>元素。</li> </ul> <ul> <li>Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>.<br>Bootstrap将:invalid和:valid伪类应用于父级元素，将.was-validated样式通常应用于<form>元素。</li> </ul> <ul> <li>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).<br>另外，任何没有输入值的必填项显示为无效。这样以来，你就可以选择什么时候激活他们（通常在用户尝试表单的提交行为时）。</li> <li>To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX),<br>重新渲染表单显示的步骤（例如，在使用AJAX动态提交过表单时）</li> <li>remove the .was-validated class from the <form> again after submission.<br>再次提交表单后从<form>元素上删除.was-validated类</li> <li>As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation.<br>如果用在服务器端，则需要使用.is-invalid和.is-valid类来代替两个伪类</li> <li>They do not require a .was-validated parent class.<br>并且不需要在父级元素使用.was-validated类</li> <li>Due to constraints in how CSS works,<br>由于CSS工作方式的限制</li> <li>we cannot (at present) apply styles to a <label> that comes before a form control in the DOM without the help of custom JavaScript.<br>如果没有自定义Javascript的帮助，我们（目前）不能应用样式到表单控件前面的<label>。</li> <li>All modern browsers support the constraint validation API, a series of JavaScript methods for validating form controls.<br>所有现代浏览器都支持约束验证API，一系列用于表单控件的JavaScript方法</li> <li>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.<br>反馈消息可以使用浏览器默认设置（不同浏览器的会有区别，且没法使用CSS来修饰）或者使用我们基于传统HTML和CSS自定义的反馈信息样式。</li> <li>You may provide custom validity messages with setCustomValidity in JavaScript.<br>你可以在JavaScript中使用setCustomValidity提供自定义有效信息</li> </ul> <p><br>With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.<br>考虑到这一点，请考虑以下关于：自定义表单验证样式、可选服务器端类和浏览器默认样式的演示。</p> <p>Custom styles<br>自定义样式</p> <p>For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>. <br>用于自定义bootstrap表单验证信息、你可能需要增加novalidate布尔属性到form标签中。</p> <p>This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.<br>这将禁用浏览器默认反馈提示、但仍然提供通往javascript中的表单验证API的访问。<br>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.<br>请尝试提交下面的表单；我们的javascript将截听提交按钮并且把反馈转达给你。当我们尝试提交时、你将看到:invalid和:valid样式被应用到你的表单控件上。</p> <p>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.<br>自定义反馈信息样式使用自定义颜色、边框、获取焦点时的样式和背景图标来更好的传达反馈信息。用于select控件的背景图标只适用于.custom-select，不适用于.form-control。</p> <p>Customizing<br>自定义</p> <p>Validation states can be customized via Sass with the $form-validation-states map.<br>验证状态可以在Sass中使用$form-validation-states map来自己定义。<br>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. <br>在_variables.scss文件中，这个Sass map被循环应用来生成默认的“有效/无效”验证状态。包括一个嵌套的map来自定义每个状态的颜色和图标。<br>While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.<br>虽然浏览器不支持其他状态，但使用自定义样式的浏览器可以轻松添加更复杂的表单反馈。</p> <p>Please note that we do not recommend customizing these values without also modifying the form-validation-state mixin.<br>请注意，我们不建议在不修改form-validation-state mixin的情况下自定义这些值。</p> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid55438-0.html' class='tagbtn' target='_blank'>bootstrapV4汉化</a><a href='/t/etagid2745-0.html' class='tagbtn' target='_blank'>bootstrap</a><a href='/t/etagid25372-0.html' class='tagbtn' target='_blank'>bootstrap4</a><a href='/t/etagid55439-0.html' class='tagbtn' target='_blank'>bootstrap表单验证</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564189.html">修复 layer插件在 bootstrap 4.x 下按钮颜色问题</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-552574.html">使用Bootstraptable(echarts) toolbox鼠标移动上去中文注释乱码问题</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-491085.html">使用bootstrap-table时导出excel开头的0被自动省略</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-469454.html">【BootStrap】有序/无序列表代码和表单</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-453592.html">bootstrap table 前端分页(client)和服务端分页(server)的配置项差别</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-438160.html">bootstrap table表格按钮</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-436906.html">bootstrap.css 进度条没有动画效果</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-434370.html">python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-425246.html">第二百四十一节，Bootstrap进度条媒体对象和 Well 组件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-425540.html">第二百三十六节，Bootstrap辅组类和响应式工具</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-425256.html">第二百四十七节，Bootstrap按钮和折叠插件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-425311.html">第二百四十八节，Bootstrap轮播插件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>