복붙노트

[SPRING] 부트 스트랩 유효성 검사에서 사용자 지정 유효성 검사를 만드는 방법

SPRING

부트 스트랩 유효성 검사에서 사용자 지정 유효성 검사를 만드는 방법

내 목표는이 필드가 다른 요소의 값에 종속적 인 특정 텍스트 필드의 유효성을 검사하는 것입니다.

예를 들어 내가 선택한 태그 및 입력 텍스트 태그,

선택 태그가 선택된 값을 가질 때 입력 텍스트가 필요합니다.

누군가가 도울 수 있기를 바랍니다.

해결법

  1. ==============================

    1.보세요

    보세요

    우리 프로젝트에서는 Bootstrap과 통합 된 Backbone validator를 사용하고 있습니다.

    통합 Backbone.validation 및 Bootstrap 샘플

    [jsfiddle.net/thedersen/c3kK2/][1]

    그것은 백본을 사용하는 경우입니다 :)

    bootstrapvalidator에는 검증을위한 콜백 메소드가있다.

    http://bootstrapvalidator.com/validators/callback/

    예 :

      <input type="text" class="form-control" name="captcha"
                data-bv-callback="true"
                data-bv-callback-message="Wrong answer"
                data-bv-callback-callback="checkCaptcha" />

    그리고 JS

    function checkCaptcha(value, validator) {
    // Determine the numbers which are generated in captchaOperation
    var items = $('#captchaOperation').html().split(' '),
        sum   = parseInt(items[0]) + parseInt(items[2]);
   return value == sum;
};

$(document).ready(function() {
    // Return a random number between min and max
    function randomNumber(min, max) {
       return Math.floor(Math.random() * (max - min + 1) + min);
    };

    // Generate a sum of two random numbers
    function generateCaptcha() {
        $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
    };

    generateCaptcha();

    $('#callbackForm').bootstrapValidator();
});

    이를 사용하여 임의의 유효성 검증을 구현할 수 있습니다.

    따라서 일부 전역 함수를 통해 유효성 검사를 구현할 수 있습니다.

    HTML 포함

      <input type="text" class="form-control" name="captcha"
                data-bv-callback="true"
                data-bv-callback-message="Wrong answer"
                data-bv-callback-callback="specialValidation" />

    JS

     function specialValidation(value, validator) {
    // Determine the numbers which are generated in captchaOperation
    var items = $('#otherField').txt();
    return value == sum;
};

    그리고 관련 요소를 올바르게 링크하려면 요소 속성으로 창의적이어야합니다.

  2. ==============================

    2.사용자 정의 유효성 검사에 콜백 사용 자바 스크립트 유효성 검사와 같은 콜백에 대한 유효성 검사를 사용할 수 있습니다. false 또는 true를 보내야합니다.

    사용자 정의 유효성 검사에 콜백 사용 자바 스크립트 유효성 검사와 같은 콜백에 대한 유효성 검사를 사용할 수 있습니다. false 또는 true를 보내야합니다.

    pwd:
{
    validators:
    {
        notEmpty:
        {
            message: 'The password is required and cannot be empty'
        },
        callback:
        {
            message: 'The password is not valid',
            callback: function(value, validator, $field)
            {
                if (value === '')
                {
                    return true;
                }
            }
        }
    }
}
  3. ==============================

    3.부트 스트랩 유효성 검사를 호출하기 전에 그렇게 할 수 있습니다. select가 값을 선택한 경우 입력 요소에 data-required 속성을 추가하고 그렇지 않으면 해당 속성을 추가하지 마십시오. 희망이 당신을 도울 것입니다.

    부트 스트랩 유효성 검사를 호출하기 전에 그렇게 할 수 있습니다. select가 값을 선택한 경우 입력 요소에 data-required 속성을 추가하고 그렇지 않으면 해당 속성을 추가하지 마십시오. 희망이 당신을 도울 것입니다.

  4. ==============================

    4.페이지의 중간에 부트 스트랩 유효성 검사를 사용하는 몇 가지 예가 있습니다.

    페이지의 중간에 부트 스트랩 유효성 검사를 사용하는 몇 가지 예가 있습니다.

    http://bootstrapvalidator.com/getting-started/#usage

  5. ==============================

    5.다음 코드를 사용하십시오. onchange jquery 함수가 이에 사용됩니다.

    다음 코드를 사용하십시오. onchange jquery 함수가 이에 사용됩니다.

    <html lang="en">
<head>
  <meta charset="utf-8">
  <title>change demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option selected="selected">Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>

<script>
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .change();
</script>

</body>
</html>

    6. from https://stackoverflow.com/questions/26880613/how-to-create-a-custom-validation-in-bootstrap-validation by cc-by-sa and MIT license

'SPRING' 카테고리의 다른 글

[SPRING] RestTemplate - 기본 타임 아웃 값  (0) 2019.05.22
[SPRING] 응용 프로그램 간 Spring Cloud Config Server 공유 등록 정보  (0) 2019.05.22
[SPRING] HttpComponentsMessageSender를 사용하여 기본 Auth가있는 WebServiceTemplate  (0) 2019.05.22
[SPRING] spring : escapeBody 결과 JSON이 잘못되었습니다.  (0) 2019.05.22
[SPRING] Spring 구성 클래스에서 생성자 삽입이 가능합니까?  (0) 2019.05.22
,

티스토리툴바