Bootstrap 양식 유효성 검사 formValidation의 자세한 예

이 글에서는 양식 동적 유효성 검사 기능을 구현하기 위한 Bootstrap 양식 유효성 검사 formValidation을 주로 소개합니다. 필요한 친구는 Bootstrap 튜토리얼

동적 추가를 참조할 수 있습니다. 입력하고 동적으로 새로운 검증 방법을 추가하세요!

초기 상태:

"+" 클릭 후:

확인 후:

지식 포인트:

1 먼저 공식 웹사이트로 이동하여 다운로드하세요: formvalidation.io/

2. 파일을 가져올 때 주의사항에 대해서는 이미 원격검증 글에서 언급했으므로 따로 다루지 않겠습니다.

사용된 키워드 3개: addField, RemoveField, Different

4 공식 웹사이트의 예제 이름은 서로 다릅니다. 나는 여기서 조금 게으른 편이다. 그리고 프로젝트 ajax를 제출할 때 form을 이용하여 제출하는 것이 아니라, 자체적으로 json으로 제출하므로 x와 y의 이름이 동일합니다.

좋은 시작:

먼저 HTML에 addPos로 표시된 "+"가 있어야 하고 그 다음 "removPos로 표시된 "-"가 있어야 합니다.

<p id="posXY" class=" panel panel-default ">
<!-- 添加-->
                <p class="panel-heading" >设置车库xy坐标</p>
                <p class="addPos form-group">
                  <p class="col-lg-4 col-sm-4 col-xs-4" >
                    <input type="text" class="form-control text-left" name="garageNo" placeholder="停车库" style="min-width: 150px"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posX" placeholder="X"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posY" placeholder="Y"/>
                  </p>
                  <p class="col-lg-2 col-sm-2 col-xs-2" >
                    <button type="button" class="btn btn-default addButtonPos"><i class="glyphicon glyphicon-plus"></i></button>
                  </p>
                </p>
                <!-- 删除 -->
                <p class="removPos form-group hide" id="posTemplate">
                  <p class="col-lg-4 col-sm-4 col-xs-4" >
                    <input type="text" class="form-control text-left" name="garageNo" placeholder="停车库" style="min-width: 150px"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posX" placeholder="X"/>
                  </p>
                  <p class="col-lg-3 col-sm-3 col-xs-3" >
                    <input type="text" class="form-control" name="posY" placeholder="Y"/>
                  </p>
                  <p class="col-lg-2 col-sm-2 col-xs-2" >
                    <button type="button" class="btn btn-default removeButtonPos"><i class="glyphicon glyphicon-minus"></i></button>
                  </p>
                </p>
</p>

다음은 js입니다.

/**
   * pos添加
   * @param $that
   */
  function addButtonPosClick($that){
    var panelId = $that.parents(".topTemplate").attr("id");
    var $form=$('#'+panelId+"form")
//    defaultPanel(panelId)
    var bookIndex=typeObj[panelId]++;
    console.log(panelId,bookIndex)
    var $template = $('#'+panelId+' #posTemplate'),
      $clone =$template
        .clone()
        .removeClass('hide')
        .removeAttr('id')
        .attr('step',bookIndex)
        .insertBefore($template);
    // Update the name attributes
    $clone
      .find('[name="garageNo"]').attr({"step":bookIndex,"name":"garageNo"+bookIndex})
      .click(function(){
        clickBindGarageNo(panelId,bookIndex)
      }).end()
      .find('[name="posX"]').attr("step",bookIndex).end()
      .find('[name="posY"]').attr("step",bookIndex).end()
    // Add new fields
    // Note that we also pass the validator rules for new field as the third parameter
//    $('#defaultForm')
//    gFieldArr.push(panelId+'[' + bookIndex + '].garageNo')
    $form
      .formValidation('addField', "garageNo"+bookIndex, formObj.sameAs(false))
      .formValidation('addField', 'posX', myPosXY)
      .formValidation('addField', 'posY', myPosXY)
  }
 function myFormValidation($form){
//    var $form=$("#"+$panelId+"form")
    $form
        .formValidation({
          framework: 'bootstrap',
          locale: 'zh_CN',
          message: '值无效',
          icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
          },
          fields:
          {
            myimg:{
              validators: {
                notEmpty: {
                  message: '请选择一个文件上传'
                },
                file: {
                  extension: 'jpeg,jpg,png',
                  type: 'image/jpeg,image/png',
                  maxSize: 1*1024 * 1024,
                  message: '该文件必须为jpeg,jpg,png格式和必须不超过1MB的大小'
                }
              }
            }
          }
        })
        .on('click', '.addButtonPos', function() {
          addButtonPosClick($(this))
        })
        //Remove button click handler
        .on('click', '.removeButtonPos', function() {
          var $that   = $(this)
          var panelId = $that.parents(".topTemplate").attr("id");
//           defaultPanel(panelId)
          var $row = $(this).parents('.form-group'),
              index = $row.attr('step');
//          var myname='[' +index + ']'
          var bookIndex= typeObj[panelId]--;
//          $('#defaultForm')
          $form
                   .formValidation('removeField', $row.find('[name="garageNo'+bookIndex+'"]'))
                   .formValidation('removeField', $row.find('[name="posX"]'))
                   .formValidation('removeField', $row.find('[name="posY"]'))
          // Remove element containing the fields
          $row.remove();
        })

내 프로젝트에 양식 제출이 여러 개 있지만 비즈니스가 유사하기 때문에 다음 기능을 사용합니다.

예: var form=(“#”+panelId+”form”) panelId를 사용하여 구별합니다. 여러 형태.

x와 y의 이름은 동일합니다. 하지만 주의하면 GarageNo의 이름이 다른 것을 알 수 있습니다. 🎜>왜? ​of GarageNo는 같은 형식일 수 없습니다. 예를 들어 귀하와 귀하의 동료는 모두 여성이거나 18세일 수 있습니다.

removeField 및 addField 키워드가 매우 잘 사용되었습니다. >
garageNo의 값은 동일할 수 없습니다. 아래를 참조하세요.

var differentValid= function(diffstr){
    var vv={
      validators: {
        different: {
          field: diffstr,
          message: '不能有相同的停车库'
        }
      }
    }
    return vv
  }

사용자가 GarageNo의 값을 입력한 후:

clickBindGarageNo(panelId,idx){
    $form.formValidation('addField', "garageNo"+idx, differentValid(diffArr.toString()))
      var fv =$form.data('formValidation');
      fv.validate();
}

이 diffArr.toString( )? 이것은 내가 통과한 GarageNo 이름의

문자열입니다. 예: 항목이 3개이고 idx=1이 1에 중점을 둡니다. 그런 다음 diffArr=["garageNo0","garageNo2",]

버그 참고: 너무 많은 입력을 사용하면 때때로 입력이 자동으로 확인되지 않는 경우가 있습니다. 예를 들어 날짜 플러그인을 사용할 때입니다. 날짜를 클릭하면 입력이 확인되지 않습니다. 이때 위 코드를 수동으로 확인해야 합니다. 그런 다음 전체 양식을 확인하려면

$form.formValidation('revalidateField', "field");

제출에 대한 세부 정보도 있습니다.

제출 버튼을 설정하지 않은 경우 이 플러그인은 자동으로 제출합니다. 제출 서비스가 실패하면 자동으로 새로 고쳐지고 페이지가 404 페이지 또는 기타 오류 페이지가 됩니다. 🎜>하지만 가끔 새로 고치기를 원하지 않는 경우가 있습니다.

에 대한 튜토리얼이 많이 있습니다. 제출 버튼을 새로 고치지 않는 것에 대해 인터넷에서 확인하세요.

rree

[관련 권장 사항]

1.

Javascript 무료 동영상 튜토리얼

2. >Nodejs에서 흔히 사용되는 미들웨어 body-parser 상세 설명

3.

JavaScript 양식 검증 구현 코드_javascript 기술

한줄 모바일 화폐 형식 검증 구현을 위한 JS

5. Vue v-model 양식 제어 바인딩 예제 튜토리얼

위 내용은 Bootstrap 양식 유효성 검사 formValidation의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!