Xác thực văn bản đầu vào trong JavaScript

Question

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

Nội dung chính Show

Làm thế nào nó hoạt động
ngổ ngáo
hỗn hợp
Bản đồ
tùy chỉnh
Làm cách nào để xác thực kiểu nhập văn bản trong js?
Làm cách nào để kiểm tra loại đầu vào trong JavaScript?
Làm cách nào để xác thực trường nhập HTML?
Làm cách nào để xác thực một giá trị trong JavaScript?

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 ,

, andPlease 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

$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 để 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ế

@

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ừ

$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. 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-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

$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,");

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

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 đồ

$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,");

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

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ị

$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,");

3 mà không sửa đổi hỗn hợp

@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;
      }
    }
  }
}

0

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;

programming javascript

Xác thực văn bản đầu vào trong JavaScript

Làm thế nào nó hoạt động

ngổ ngáo

Biến

hỗn hợp

Bản đồ

Vòng

tùy chỉnh

Làm cách nào để xác thực kiểu nhập văn bản trong js?

Làm cách nào để kiểm tra loại đầu vào trong JavaScript?

Làm cách nào để xác thực trường nhập HTML?

Làm cách nào để xác thực một giá trị trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội