열 유효성 검사와 간단한 예제가있다 정규식

Question

에 열을 확인 slickgrid 추가 매개 변수 - 정규식 문자열을 전달해야합니다.

Answer 1

기본적으로 validator 방법에 더 많은 매개 변수를 전달할 수는 없지만 소스를 쉽게 편집하여 허용 할 수 있습니다.

this.validate = function() { 
    if (args.column.validator) { 
    var validationResults = args.column.validator($input.val()); 
    if (!validationResults.valid) { 
     return validationResults; 
    } 
    } 

    return { 
    valid: true, 
    msg: null 
    }; 
}; 

변화 :var validationResults = args.column.validator($input.val());

에 : 대한 slick.editors.js 모습에

function requiredFieldValidator(value, input) 

0 : var validationResults = args.column.validator($input.val(), $input);

이 같은으로 검증 방법의 서명을 변경합니다

그걸로 input.attr('validation-expression') 또는 input.data... 또는 무엇이든간에 입력하려는 속성을 가져올 수 있습니다.

Answer 2

어쨌든이 방법에 접근하는 가장 좋은 방법은 다른 사용자 정의 편집기로 slick.editor.js에 추가 할 편집기를 코딩하는 것입니다. 이 파일도 그렇게 만들어졌습니다. 정규 표현식 테스트를 구현했고 훌륭하게 작동합니다.

여기 Regex뿐만 아니라 다양한 조건 유형에 대한 새로운 편집기가 있습니다. 예를 들어 min:2 옵션은 최소 숫자 2가 필요하고 minLength:2은 입력이 적어도 String 2 chars, etc ... 지금 당신이 찾고있는 코드는 내 코드 정의 pattern 유형입니다. 그러니까 기본적으로, 당신은 slick.editor.js 내부에이 코드를 포함해야합니다 : 다음

ConditionalCellEditor : function(args) {    
    var $input; 
       var defaultValue; 
       var scope = this; 
    var condObj = null; 

       this.init = function() { 
         $input = $("<INPUT type='text' class='editor-text' />") 
           .appendTo(args.container) 
           .bind("keydown.nav", function(e) { 
             if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) { 
               e.stopImmediatePropagation(); 
             } 
           }) 
           .focus() 
           .select(); 
       }; 

       this.destroy = function() { 
         $input.remove(); 
       }; 

       this.focus = function() { 
         $input.focus(); 
       }; 

       this.getValue = function() { 
         return $input.val(); 
       }; 

       this.setValue = function(val) { 
         $input.val(val); 
       }; 

       this.loadValue = function(item) { 
         defaultValue = item[args.column.field] || ""; 
         $input.val(defaultValue); 
         $input[0].defaultValue = defaultValue; 
         $input.select(); 
       }; 

       this.serializeValue = function() { 
         return $input.val(); 
       }; 

       this.applyValue = function(item,state) { 
         item[args.column.field] = state; 
       }; 

       this.isValueChanged = function() { 
         return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue); 
       }; 

       this.validate = function() { 
     var condObj = args.column.editorOptions; 
     var returnMsg = null; 
     var returnValid = true; 

     if(typeof condObj.min != 'undefined') { 

      if(parseFloat($input.val()) < parseFloat(condObj.min)) { 
       returnMsg = "Value should not be less then "+condObj.min; 
       returnValid = false; 
      } 
     } 
     if(typeof condObj.max != 'undefined') { 
      if(parseFloat($input.val()) > parseFloat(condObj.max)) { 
       returnMsg = "Value should not be over "+condObj.max; 
       returnValid = false; 
      } 
     } 
     if(typeof condObj.minLength != 'undefined') { 

      if($input.val().length < condObj.minLength) { 
       returnMsg = "Value length should not be less then "+condObj.minLength; 
       returnValid = false; 
      } 
     } 
     if(typeof condObj.maxLength != 'undefined') { 
      if($input.val().length > condObj.maxLength) { 
       returnMsg = "Value length should not be over "+condObj.maxLength; 
       returnValid = false; 
      } 
     } 
     if(typeof condObj.pattern != 'undefined') { 
      if(condObj.pattern.test($input.val()) != true) { 
       returnMsg = (condObj.msg) ? condObj.msg : "Value is invalid following a regular expression pattern"; 
       returnValid = false; 
      } 
     }    
     if(typeof condObj.required != 'undefined') { 
      if($input.val().length == "" && condObj.required) { 
       returnMsg = "Required field, please provide a value"; 
       returnValid = false; 
      } 
     } 

     // Now let's return our boolean results and message if invalid 
     return { 
      valid: returnValid, 
      msg: returnMsg 
     } 
       }; 

       this.init(); 
}, 

내 SlickGrid 열 정의 내 내가 전화 한을 그 나는 정의와 새로운 편집기 내가로 통과하기로 결정 몇 가지 옵션을 전달 editorOptions을 Object로 사용하면 원하는 옵션, 패턴, msg, minLength 등을 추가 할 수있는 유연성이 향상되었습니다. 내 예제는 이메일 정규식 검증을위한 것이다.

columns1 = [ 
... 
{id:"email", field:"email", name:"Em@il", width:145, editor:ConditionalCellEditor, editorOptions:{pattern:/^([0-9a-zA-Z]+([_.-]?[0-9a-zA-Z]+)*@[0-9a-zA-Z]+[0-9,a-z,A-Z,.,-]*(.){1}[a-zA-Z]{2,4})+$/, msg:"Must be a valid email"} }, 
...]; 

그리고 보일 (voilà)은 매력처럼 작동합니다. 내 새 ConditionalCellEditor 편집기가 나에게 훨씬 더 많은 유연성을 제공하기 때문에 간신히 editor:TextCellEditor을 사용하고 있습니다. 도움이 되었기를 바랍니다.

Answer 3

이것은 매우 도움이되었습니다. 이메일, 전화, 우편 번호 등 가능한 모든 항목 유형에 대해 서로 다른 입력 유형을 만듭니다. JSON에서이 작업을 수행하려면 slick.grid.js 파일을 수정하여 항목을 평가하여 개체 호출을해야합니다.

\"editor\": \"Slick.Editors.Conditional\", 
\"editorOptions\": 
    {\"pattern\":\"email\", \"msg\":\"Must be a valid email\", \"required\":\"1\"} 

개봉은 다음과 같이 slick.editors.js 확인 : 당신의 JSON 열이 업데이트가 있는지 확인

if (d) { 
    if(m.formatter){ 
    m.formatter=eval(m.formatter) 
    } // make it an object call instead of string 

if(m.editor) { 
    m.editor=eval(m.editor) 
    } 

if(m.editorOptions) { 
    m.editorOptions=eval(m.editorOptions) 
    } 

}

물론

(function ($) { 
$.extend(true, window, { 
    "Slick": { 
    "Editors": { 
    "Conditional": Conditional, 

inside -> function Conditional(args){ 

if(typeof condObj.pattern != 'undefined') { 
    if(condObj.pattern=='email'){ 
     pattern=/^([0-9a-zA-Z]+([_.-]?[0-9a-zA-Z]+)*@[0-9a-zA-Z]+[0-9,a-z,A-Z,.,-]*(.){1}[a-zA-Z]{2,4})+$/; 
     val=$input.val(); 
     if(pattern.test(val) != true && val!='') { 
      returnMsg = (condObj.msg) ? condObj.msg : "Value is invalid"; 
      returnValid = false; 
     } 
} 
} 
if(!returnValid){ 
    alert(returnMsg) 
}