bootstrapV4表单验证

Posted 2022-01-19 前端码牛

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 <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 validating 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.
考虑到这一点，请考虑以下关于：自定义表单验证样式、可选服务器端类和浏览器默认样式的演示。