Chúng tôi biết rằng hiện tại không thể truy cập các kiểu xác thực và chú giải công cụ tùy chỉnh phía máy khách vì chúng không được tiếp xúc với các công nghệ hỗ trợ. Trong khi chúng tôi nghiên cứu giải pháp, chúng tôi khuyên bạn nên sử dụng tùy chọn phía máy chủ hoặc phương thức xác thực trình duyệt mặc định
Làm thế nào nó hoạt động
Đây là cách xác thực biểu mẫu hoạt động với Bootstrap
- Xác thực biểu mẫu HTML được áp dụng thông qua hai lớp giả của CSS,
:invalid
và:valid
. Nó áp dụng cho,
, and
Please enter a message in the textarea.
Check this checkbox
Example invalid feedback text
Toggle this radio
Or toggle this other radio
More example invalid feedback text
Example invalid select feedback
Example invalid form file feedback
Submit form
Nếu bố cục biểu mẫu của bạn cho phép, bạn có thể hoán đổi lớp
.{valid|invalid}-feedback
cho lớp
0 để hiển thị phản hồi xác thực trong chú giải công cụ được tạo kiểu. Đảm bảo có cha mẹ có$form-feedback-margin-top: $form-text-margin-top; $form-feedback-font-size: $form-text-font-size; $form-feedback-font-style: $form-text-font-style; $form-feedback-valid-color: $success; $form-feedback-invalid-color: $danger; $form-feedback-icon-valid-color: $form-feedback-valid-color; $form-feedback-icon-valid: url["data:image/svg+xml,"]; $form-feedback-icon-invalid-color: $form-feedback-invalid-color; $form-feedback-icon-invalid: url["data:image/svg+xml,"];
1 trên đó để định vị chú giải công cụ. Trong ví dụ bên dưới, các lớp cột của chúng tôi đã có tính năng này, nhưng dự án của bạn có thể yêu cầu thiết lập thay thế$form-feedback-margin-top: $form-text-margin-top; $form-feedback-font-size: $form-text-font-size; $form-feedback-font-style: $form-text-font-style; $form-feedback-valid-color: $success; $form-feedback-invalid-color: $danger; $form-feedback-icon-valid-color: $form-feedback-valid-color; $form-feedback-icon-valid: url["data:image/svg+xml,"]; $form-feedback-icon-invalid-color: $form-feedback-invalid-color; $form-feedback-icon-invalid: url["data:image/svg+xml,"];
@
Vui lòng chọn một tên người dùng duy nhất và hợp lệ
Vui lòng cung cấp một thành phố hợp lệ
Vui lòng chọn một trạng thái hợp lệ
Vui lòng cung cấp mã zip hợp lệ
First name
Looks good!
Last name
Looks good!
Username
@
Please choose a unique and valid username.
City
Please provide a valid city.
State
Please select a valid state.
Zip
Please provide a valid zip.
Submit form
ngổ ngáo
Biến
$form-feedback-margin-top: $form-text-margin-top; $form-feedback-font-size: $form-text-font-size; $form-feedback-font-style: $form-text-font-style; $form-feedback-valid-color: $success; $form-feedback-invalid-color: $danger; $form-feedback-icon-valid-color: $form-feedback-valid-color; $form-feedback-icon-valid: url["data:image/svg+xml,"]; $form-feedback-icon-invalid-color: $form-feedback-invalid-color; $form-feedback-icon-invalid: url["data:image/svg+xml,"];
hỗn hợp
Hai mixin được kết hợp với nhau, thông qua , để tạo các kiểu phản hồi xác thực biểu mẫu của chúng tôi
@mixin form-validation-state-selector[$state] { @if [$state == "valid" or $state == "invalid"] { .was-validated #{if[&, "&", ""]}:#{$state}, #{if[&, "&", ""]}.is-#{$state} { @content; } } @else { #{if[&, "&", ""]}.is-#{$state} { @content; } } } @mixin form-validation-state[ $state, $color, $icon, $tooltip-color: color-contrast[$color], $tooltip-bg-color: rgba[$color, $form-feedback-tooltip-opacity], $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba[$color, $input-btn-focus-color-opacity] ] { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; @include font-size[$form-feedback-font-size]; font-style: $form-feedback-font-style; color: $color; } .#{$state}-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; // Contain to parent when possible padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; margin-top: .1rem; @include font-size[$form-feedback-tooltip-font-size]; line-height: $form-feedback-tooltip-line-height; color: $tooltip-color; background-color: $tooltip-bg-color; @include border-radius[$form-feedback-tooltip-border-radius]; } @include form-validation-state-selector[$state] { ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } } .form-control { @include form-validation-state-selector[$state] { border-color: $color; @if $enable-validation-icons { padding-right: $input-height-inner; background-image: escape-svg[$icon]; background-repeat: no-repeat; background-position: right $input-height-inner-quarter center; background-size: $input-height-inner-half $input-height-inner-half; } &:focus { border-color: $color; box-shadow: $focus-box-shadow; } } } // stylelint-disable-next-line selector-no-qualifying-type textarea.form-control { @include form-validation-state-selector[$state] { @if $enable-validation-icons { padding-right: $input-height-inner; background-position: top $input-height-inner-quarter right $input-height-inner-quarter; } } } .form-select { @include form-validation-state-selector[$state] { border-color: $color; @if $enable-validation-icons { &:not[[multiple]]:not[[size]], &:not[[multiple]][size="1"] { padding-right: $form-select-feedback-icon-padding-end; background-image: escape-svg[$form-select-indicator], escape-svg[$icon]; background-position: $form-select-bg-position, $form-select-feedback-icon-position; background-size: $form-select-bg-size, $form-select-feedback-icon-size; } } &:focus { border-color: $color; box-shadow: $focus-box-shadow; } } } .form-check-input { @include form-validation-state-selector[$state] { border-color: $color; &:checked { background-color: $color; } &:focus { box-shadow: $focus-box-shadow; } ~ .form-check-label { color: $color; } } } .form-check-inline .form-check-input { ~ .#{$state}-feedback { margin-left: .5em; } } .input-group .form-control, .input-group .form-select { @include form-validation-state-selector[$state] { @if $state == "valid" { z-index: 1; } @else if $state == "invalid" { z-index: 2; } &:focus { z-index: 3; } } } }
Bản đồ
Đây là bản đồ Sass xác thực từ
2. Ghi đè hoặc mở rộng điều này để tạo các trạng thái khác hoặc bổ sung$form-feedback-margin-top: $form-text-margin-top; $form-feedback-font-size: $form-text-font-size; $form-feedback-font-style: $form-text-font-style; $form-feedback-valid-color: $success; $form-feedback-invalid-color: $danger; $form-feedback-icon-valid-color: $form-feedback-valid-color; $form-feedback-icon-valid: url["data:image/svg+xml,"]; $form-feedback-icon-invalid-color: $form-feedback-invalid-color; $form-feedback-icon-invalid: url["data:image/svg+xml,"];
$form-validation-states: [ "valid": [ "color": $form-feedback-valid-color, "icon": $form-feedback-icon-valid ], "invalid": [ "color": $form-feedback-invalid-color, "icon": $form-feedback-icon-invalid ] ];
Bản đồ của
3 có thể chứa ba tham số tùy chọn để ghi đè chú giải công cụ và kiểu tiêu điểm$form-feedback-margin-top: $form-text-margin-top; $form-feedback-font-size: $form-text-font-size; $form-feedback-font-style: $form-text-font-style; $form-feedback-valid-color: $success; $form-feedback-invalid-color: $danger; $form-feedback-icon-valid-color: $form-feedback-valid-color; $form-feedback-icon-valid: url["data:image/svg+xml,"]; $form-feedback-icon-invalid-color: $form-feedback-invalid-color; $form-feedback-icon-invalid: url["data:image/svg+xml,"];
Vòng
Được sử dụng để lặp lại hơn _______ 3 giá trị bản đồ để tạo các kiểu xác thực của chúng tôi. Mọi sửa đổi đối với bản đồ Sass ở trên sẽ được phản ánh trong CSS đã biên dịch của bạn thông qua vòng lặp này
@each $state, $data in $form-validation-states { @include form-validation-state[$state, $data...]; }
tùy chỉnh
Trạng thái xác thực có thể được tùy chỉnh thông qua Sass với bản đồ
3. Nằm trong tệp$form-feedback-margin-top: $form-text-margin-top; $form-feedback-font-size: $form-text-font-size; $form-feedback-font-style: $form-text-font-style; $form-feedback-valid-color: $success; $form-feedback-invalid-color: $danger; $form-feedback-icon-valid-color: $form-feedback-valid-color; $form-feedback-icon-valid: url["data:image/svg+xml,"]; $form-feedback-icon-invalid-color: $form-feedback-invalid-color; $form-feedback-icon-invalid: url["data:image/svg+xml,"];
2 của chúng tôi, bản đồ Sass này là cách chúng tôi tạo các trạng thái xác thực$form-feedback-margin-top: $form-text-margin-top; $form-feedback-font-size: $form-text-font-size; $form-feedback-font-style: $form-text-font-style; $form-feedback-valid-color: $success; $form-feedback-invalid-color: $danger; $form-feedback-icon-valid-color: $form-feedback-valid-color; $form-feedback-icon-valid: url["data:image/svg+xml,"]; $form-feedback-icon-invalid-color: $form-feedback-invalid-color; $form-feedback-icon-invalid: url["data:image/svg+xml,"];
7/$form-feedback-margin-top: $form-text-margin-top; $form-feedback-font-size: $form-text-font-size; $form-feedback-font-style: $form-text-font-style; $form-feedback-valid-color: $success; $form-feedback-invalid-color: $danger; $form-feedback-icon-valid-color: $form-feedback-valid-color; $form-feedback-icon-valid: url["data:image/svg+xml,"]; $form-feedback-icon-invalid-color: $form-feedback-invalid-color; $form-feedback-icon-invalid: url["data:image/svg+xml,"];
8 mặc định. Bao gồm là một bản đồ lồng nhau để tùy chỉnh màu sắc, biểu tượng, màu chú giải công cụ và bóng tiêu điểm của từng trạng thái. Mặc dù không có trạng thái nào khác được trình duyệt hỗ trợ, nhưng những trình duyệt sử dụng kiểu tùy chỉnh có thể dễ dàng thêm phản hồi biểu mẫu phức tạp hơn$form-feedback-margin-top: $form-text-margin-top; $form-feedback-font-size: $form-text-font-size; $form-feedback-font-style: $form-text-font-style; $form-feedback-valid-color: $success; $form-feedback-invalid-color: $danger; $form-feedback-icon-valid-color: $form-feedback-valid-color; $form-feedback-icon-valid: url["data:image/svg+xml,"]; $form-feedback-icon-invalid-color: $form-feedback-invalid-color; $form-feedback-icon-invalid: url["data:image/svg+xml,"];
Xin lưu ý rằng chúng tôi không khuyên bạn nên tùy chỉnh các giá trị
3 mà không sửa đổi hỗn hợp$form-feedback-margin-top: $form-text-margin-top; $form-feedback-font-size: $form-text-font-size; $form-feedback-font-style: $form-text-font-style; $form-feedback-valid-color: $success; $form-feedback-invalid-color: $danger; $form-feedback-icon-valid-color: $form-feedback-valid-color; $form-feedback-icon-valid: url["data:image/svg+xml,"]; $form-feedback-icon-invalid-color: $form-feedback-invalid-color; $form-feedback-icon-invalid: url["data:image/svg+xml,"];
0@mixin form-validation-state-selector[$state] { @if [$state == "valid" or $state == "invalid"] { .was-validated #{if[&, "&", ""]}:#{$state}, #{if[&, "&", ""]}.is-#{$state} { @content; } } @else { #{if[&, "&", ""]}.is-#{$state} { @content; } } } @mixin form-validation-state[ $state, $color, $icon, $tooltip-color: color-contrast[$color], $tooltip-bg-color: rgba[$color, $form-feedback-tooltip-opacity], $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba[$color, $input-btn-focus-color-opacity] ] { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; @include font-size[$form-feedback-font-size]; font-style: $form-feedback-font-style; color: $color; } .#{$state}-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; // Contain to parent when possible padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; margin-top: .1rem; @include font-size[$form-feedback-tooltip-font-size]; line-height: $form-feedback-tooltip-line-height; color: $tooltip-color; background-color: $tooltip-bg-color; @include border-radius[$form-feedback-tooltip-border-radius]; } @include form-validation-state-selector[$state] { ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } } .form-control { @include form-validation-state-selector[$state] { border-color: $color; @if $enable-validation-icons { padding-right: $input-height-inner; background-image: escape-svg[$icon]; background-repeat: no-repeat; background-position: right $input-height-inner-quarter center; background-size: $input-height-inner-half $input-height-inner-half; } &:focus { border-color: $color; box-shadow: $focus-box-shadow; } } } // stylelint-disable-next-line selector-no-qualifying-type textarea.form-control { @include form-validation-state-selector[$state] { @if $enable-validation-icons { padding-right: $input-height-inner; background-position: top $input-height-inner-quarter right $input-height-inner-quarter; } } } .form-select { @include form-validation-state-selector[$state] { border-color: $color; @if $enable-validation-icons { &:not[[multiple]]:not[[size]], &:not[[multiple]][size="1"] { padding-right: $form-select-feedback-icon-padding-end; background-image: escape-svg[$form-select-indicator], escape-svg[$icon]; background-position: $form-select-bg-position, $form-select-feedback-icon-position; background-size: $form-select-bg-size, $form-select-feedback-icon-size; } } &:focus { border-color: $color; box-shadow: $focus-box-shadow; } } } .form-check-input { @include form-validation-state-selector[$state] { border-color: $color; &:checked { background-color: $color; } &:focus { box-shadow: $focus-box-shadow; } ~ .form-check-label { color: $color; } } } .form-check-inline .form-check-input { ~ .#{$state}-feedback { margin-left: .5em; } } .input-group .form-control, .input-group .form-select { @include form-validation-state-selector[$state] { @if $state == "valid" { z-index: 1; } @else if $state == "invalid" { z-index: 2; } &:focus { z-index: 3; } } } }
Làm cách nào để xác thực kiểu nhập văn bản trong js?
Xác thực biểu mẫu HTML tự động .Làm cách nào để kiểm tra loại đầu vào trong JavaScript?
Toán tử typeof trong JavaScript cho phép bạn xác định loại giá trị hoặc loại giá trị mà một biến chứa. Chỉ có một toán hạng cho toán tử typeof [toán tử một ngôi], lấy một biến làm đầu vào. Nó xác định loại toán hạng và kết quả là một chuỗi được trả về.Làm cách nào để xác thực trường nhập HTML?
Tính năng xác thực HTML đơn giản nhất là thuộc tính bắt buộc . Để bắt buộc nhập dữ liệu, hãy thêm thuộc tính này vào phần tử. Khi thuộc tính này được đặt, phần tử khớp với. lớp giả giao diện người dùng bắt buộc và biểu mẫu sẽ không gửi, hiển thị thông báo lỗi khi gửi khi đầu vào trống.Làm cách nào để xác thực một giá trị trong JavaScript?
Xác thực số JavaScript .chức năng xác nhận [] {var num=tài liệu. hình thức của tôi. con số. giá trị;nếu [isNaN[num]]{tài liệu. getElementById["numloc"]. innerHTML="Chỉ nhập giá trị số";trả về sai;}khác{trả về đúng;