slickgrid驗證列與正則表達式

Question

有一個簡單的樣品與柱驗證：

function requiredFieldValidator(value) { 
     if (value == null || value == undefined || !value.length) { 
     return {valid: false, msg: "This is a required field"}; 
     } else { 
     return {valid: true, msg: null}; 
     } 
    } 

，並驗證它只是需要把這個選項欄：validator: requiredFieldValidator

但我怎麼可以使用，如果正則表達式功能我需要傳遞額外的參數 - 正則表達式字符串。

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找

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

這將您的驗證方法簽名更改爲類似：

function requiredFieldValidator(value, input) 

因此，您可以通過input.attr('validation-expression')或input.data...或其他任何方式獲得您想要輸入的任何屬性。

Answer 2

無論如何，在我看來，最好的方法就是編寫自己的編輯器，將其作爲另一個新的自定義編輯器添加到slick.editor.js中。這個文件也是爲此而設計的。我確實實施了正則表達式測試，效果很好。

這是我的新的編輯器，不僅工作正則表達式也爲各種條件類型，例如min:2的選擇將需要2的最小數目，而minLength:2將所需的輸入是一個字符串至少2個字符等...現在對於您真正需要的那個，那將在我的代碼定義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作爲一個對象，這給了我更多的靈活性，以添加我想要的任何選項，模式，味精，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à，作品像魅力！ 我幾乎不再使用editor:TextCellEditor，因爲我的新ConditionalCellEditor編輯器給了我更多的靈活性。希望它有幫助，讓我知道它是怎麼回事...

Answer 3

這是非常有益的。我爲每種可能的輸入類型創建不同的輸入類型 - 電子郵件，電話，郵編等等。 要使用JSON執行此操作，您必須修改slick.grid.js文件以評估條目以使其成爲對象調用。

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) 
    } 

}

讓你的JSON列有這樣的更新：

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

讓您選擇slick.editors.js是這樣的：

(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) 
}