slickgrid validieren Spalte mit regex

Gibt es eine einfache Probe mit Spalte Validierung:

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

und zum überprüfen der Spalte es wird nur benötigt werden, um diese option: validator: requiredFieldValidator

Aber wie kann ich mit regex-Funktion, wenn ich mich übergeben müssen zusätzliche parameter - regex-string.

InformationsquelleAutor Iurii Dziuban | 2012-02-07

2

Standardmäßig, Sie können nicht übergeben, weitere Parameter in die validator Methode, jedoch können Sie ganz einfach Bearbeiten Sie die Quelle, um es zu ermöglichen.

in slick.editors.js suchen:
```
this.validate = function () {
  if (args.column.validator) {
    var validationResults = args.column.validator($input.val());
    if (!validationResults.valid) {
      return validationResults;
    }
  }

  return {
    valid: true,
    msg: null
  };
};
```
ändern: var validationResults = args.column.validator($input.val());

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

dies wird sich ändern Sie Ihre validator Signatur der Methode, um so etwas wie:
```
function requiredFieldValidator(value, input)
```
Mit, dass, können Sie alle Attribute, die Sie wollen, aus dem input mit input.attr('validation-expression') oder input.data... oder was auch immer.
- Natürlich könnte man die Bearbeiten, übergeben Sie alles was Sie wollen. Wie das hinzufügen einer Gültigkeitsprüfung-Einstellungen-Objekt args.Spalte und irgendwo vorbei, das in args.Spalte.Validators zweiten parameter statt $input.
- es nicht geschafft haben. Es gibt standard-Validatoren inslick.editors.js . Muss ich angeben, meinen eigenen ? und wie der code Aussehen wird, anstatt validator: requiredFieldValidator
- Standardmäßig slickGrid übergibt nur den Wert der Eingabe in eine benutzerdefinierte validator-Methode, so args.column.validator($input.val()); ist derzeit nur übergeben Sie den Wert in Ihrem requiredFieldValidator. Geben Sie den code würde immer noch so Aussehen, wie validator: requiredFieldValidator können, aber das wäre Referenz function requiredFieldValidator(value, input) Sie möchten die regex definiert als ein Attribut im input-ersten.
- und wie kann ich angeben regex - Attribut für die andere Spalte verschiedene regex-string ?
InformationsquelleAutor Mike Gwilt

Der beste Weg, dies zu nähern, in meinen Augen jedenfalls, ist der code Ihre eigenen editor, mit dem Sie ' ll fügen Sie in slick.editor.js als neue custom-editor. Diese Datei ist für das auch. Ich habe Umsetzung der regex testen und es funktioniert Super.

Hier ist meine neue editor ist nicht nur für Regex, sondern auch für verschiedene Konditionsarten, die für Beispiel eine Möglichkeit min:2 wäre erforderlich, eine minimale Anzahl von 2, während ein minLength:2 wäre erforderlich, die Eingabe zu einem String mit mindestens 2 chars, etc... Jetzt für die, die Sie wirklich suchen, das wäre in meinen code definition der pattern geben.
Also im Grunde, müssen Sie include this code innerhalb der 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();
},

Dann in meinem SlickGrid Spalte definition bin ich aufrufen, dass der neue editor, mit dem ich definiert und an einigen Optionen, die ich beschlossen, zu gehen in ein editorOptions als Objekt und das gibt mir mehr Flexibilität, wenn Sie fügen Sie alle Optionen, die ich will -, Muster -, msg -, minLength, etc... alles in einem. Mein Beispiel ist für eine E-Mail regex-Muster-Validierung.

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"} },
...];

- Und voilà, funktioniert wie ein Charme!!!
Ich bin kaum mit der editor:TextCellEditor mehr, da mein neues ConditionalCellEditor - editor gibt mir viel mehr Flexibilität. Hoffe es hilft und lassen Sie mich wissen, wie es geht...

hat das funktioniert? Weil ich meine, es wäre schön zu wissen, und haben ein +1 ...

InformationsquelleAutor ghiscoding

Damit verlängern Sie die Antwort von @mike-gwilt, können Sie die cellAttrs Spalte Optionen aus, um anzugeben (in der Spaltendefinition) die regulären Ausdrücke und die Nachricht zu berichten, wie diese:

... { id: "columnId", name: "columnName", validator: RegexValidator, cellAttrs: {"reg":"^\\d{1,2}$", "msg": "The value should be a number of two digits."} ...

Dann der generierte html-Code sieht wie folgt aus:

<div class="slick-cell l9 r9 active editable selected" reg="^\d{1,3}$" msg="The value should be a number of two digits."><input type="text" class="editor-text" value=""></div>

Schließlich, als Sie Zugriff auf das input-element innerhalb Ihrer Validierung Funktion, definieren es so:

 function RegexValidator(value, input) {
    var msg = input.parent().attr('msg');
    var reg = new RegExp(input.parent().attr('reg'));
    if (!reg.exec(value)) {
        return { valid: false, msg: msg};
    } else {
        return { valid: true, msg: null };
    }
 }

InformationsquelleAutor Darío León

Das war sehr hilfreich. Ich bin der Erstellung von verschiedenen input-Typen für jede Art von Einstieg möglich - E-Mail, Telefon, zip und so weiter.
Um dies zu tun mit JSON, müssen Sie ändern Sie Ihre slick.grid.js Datei bewerten Sie die Einträge, um Sie zu einem Objekt aufrufen.

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

}

Machen Sie Ihre JSON-Spalten haben das update:

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

Machen Sie slick.editors.js Aussehen:

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

InformationsquelleAutor Steve Fazekas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.