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