Was ist eine benutzerdefinierte Reaktionsdatenvalidierungskomponente in js (ausführliche Erklärung)?

Dieser Artikel bietet Ihnen eine Einführung in eine benutzerdefinierte Reaktionsdatenvalidierungskomponente. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Wenn wir Frontend-Formulare einreichen, stoßen wir oft auf das Problem, die Daten im Formular zu überprüfen. Wenn die vom Benutzer übermittelten Daten illegal sind, z. B. falsches Format, nicht numerischer Typ, Überschreitung der maximalen Länge, erforderliche Felder, maximale und minimale Werte usw., müssen wir an der entsprechenden Stelle umgehend Informationen bereitstellen. Wenn der Benutzer die Daten korrigiert, blenden wir auch die Eingabeaufforderung aus.

Es gibt einige vorgefertigte Plug-Ins, mit denen Sie diese Funktion sehr komfortabel implementieren können. Wenn Sie das Knockout-Framework verwenden, können Sie das Knockout-Validation-Plug-In verwenden. Es ist sehr einfach zu verwenden, wie zum Beispiel der folgende Code:

ko.validation.locale('zh-CN');
ko.validation.rules['money'] = {
    validator: function (val) {        
       if (val === '') return true;        return /^\d+(\.\d{1,2})?$/.test(val);
    },
    message: '输入的金额不正确'};
ko.validation.rules['moneyNoZero'] = {
    validator: function (val) {        
        if (val === '') return true;        return isNaN(val) || val != 0;
    },
    message: '输入的金额不能为0'};
ko.validation.registerExtenders();var model = {
    MSRP: ko.observable(0),
    price: ko.observable().extend({ required: true, number: true, min: 10000, money: true, moneyNoZero: true }),
    licence_service_fee: ko.observable().extend({ required: true, money: true }),
    purchase_tax: ko.observable().extend({ required: true, money: true }),
    vehicle_tax: ko.observable().extend({ required: true, money: true }),
    insurance: ko.observable().extend({ required: true, money: true }),
    commercial_insurance: ko.observable().extend({ required: true, money: true }),
    mortgage: ko.observable(''),
    interest_discount: ko.observable(''),
    allowance: ko.observable().extend({ money: true }),
    special_spec_fee_explain: ko.observable(''),
    has_extra_fee: ko.observable(false),
    is_new_energy: ko.observable(false)
};

model.extra_fee_explain = ko.observable().extend({
    required: {
        onlyIf: function () {            
           return model.has_extra_fee() === true;
        }
    }
});

model.extra_fee = ko.observable().extend({
    required: {
        onlyIf: function () {           
            return model.has_extra_fee() === true;
        }
    },
    money: {
        onlyIf: function () {            
            return model.has_extra_fee() === true;
        }
    }
});

model.new_energy_allowance_explain = ko.observable().extend({
    required: {
        onlyIf: function () {            
            return model.is_new_energy() === true;
        }
    }
});

model.total_price = ko.computed(function () {   
   var _total = Number(model.price()) + Number(model.licence_service_fee()) +Number(model.purchase_tax()) + Number(model.vehicle_tax()) +Number(model.insurance()) + Number(model.commercial_insurance());    
        if (model.has_extra_fee()) {
        _total += Number(model.extra_fee());
    }    
    if (model.is_new_energy()) {
        _total -= Number(model.new_energy_allowance());
    }    
    return isNaN(_total) ? '0' : _total.toFixed(2).replace(/(\.0*$)|(0*$)/, '');
});

model.errors = ko.validation.group(model);
ko.applyBindings(model);

Weitere Verwendungsmethoden finden Sie in der Dokumentation und den Beispielen auf Github.

Wenn unser Frontend jedoch das React-Framework verwendet, wie können wir dann ähnliche Funktionen wie Knockout oben erreichen? Wir können erwägen, diese relativ unabhängige Funktion zu extrahieren und als React-Komponente zu schreiben. Schauen Sie sich den folgenden Code an:

class ValidationInputs extends React.Component {
  constructor(props) {
    super(props);    this.state = {
      isValid: true,
      required: this.props.required,
      number: this.props.number,
      min: this.props.min,
      max: this.props.max,
      money: this.props.money,
      data: null,
      errors: ""
    }
  }

  componentWillReceiveProps(nextProps) {   
    var that = this;    
    if (this.state.data !== nextProps.data) {      
      return setStateQ({data: nextProps.data}, this).then(function () {        
           return that.handleValidation();
      });
    }
  }

  handleValidation() {    var fields = this.state.data;    // required validation
    if(this.state.required && isNilOrEmpty(fields)){      
        return setStateQ({errors: '必须填写', isValid: false}, this);

    }    
    // number validation
    if (this.state.number) {      
      if (isNaN(fields)) {        
         return setStateQ({errors: '请输入数字', isValid: false}, this);
      }      
      if (!isNilOrEmpty(this.state.min) && !isNaN(this.state.min) && Number(this.state.min) > Number(fields)) {       
        return setStateQ({errors: '输入值必须大于等于' + this.state.min, isValid: false}, this);
      }      
      if (!isNilOrEmpty(this.state.max) && !isNaN(this.state.max) && Number(this.state.max) < Number(fields)) {        
         return setStateQ({errors: &#39;输入值必须小于等于&#39; + this.state.max, isValid: false}, this);
      }
    }    // money validation
    if (this.state.money) {      
         if (fields.length > 0 && !/^\d+(\.\d{1,2})?$/.test(fields)) {        
             return setStateQ({errors: '输入的金额不正确', isValid: false}, this);
         }
    }   
     return setStateQ({errors: '', isValid: true}, this);
  }

  render() {    return <span className="text-danger">{this.state.errors}</span>  }
}

Die von dieser Komponente unterstützten Validierungselemente sind:

• erforderlich: true | erforderlich.

• Zahl: true |. Überprüft, ob der eingegebene Wert eine Zahl ist.

• Wenn die Zahl wahr ist, können die Maximal- und Minimalwerte durch Max und Min überprüft werden. Der Wert sowohl des Max- als auch des Min-Attributs muss eine gültige Zahl sein.

• money: true | false Überprüft, ob der eingegebene Wert in einem gültigen Währungsformat vorliegt. Das Währungsformat muss numerisch sein, wobei bis zu zwei Dezimalstellen zulässig sind.

Wie benutzt man?

Wir fügen einen Verweis auf die Komponente in der render()-Methode der übergeordneten Komponente hinzu:

<p className="item">
    <p className="col-xs-4">净车价：</p>
    <p className="col-xs-7">
        <input type="text" className="form-control" placeholder="0" value={this.state.price} onChange={this.changePrice.bind(this)}/>
        <ValidationInputs ref="validation1" data={this.state.price} required="true" number="true" min="10000" max="99999999" money="true"/>
    </p>
    <p className="col-xs-1 text-center">元</p>
    <p className="clear"></p></p>

Wir fügen die Variable price zum Status der übergeordneten Komponente hinzu und binden Sie das Ereignis onChange an das Steuerelement input, sodass der Wert des Preises angezeigt wird, wenn der Benutzer den Inhalt im Textfeld ändert Die Variable kann in Echtzeit an die Komponente ValidationInputs übergeben werden. Auf diese Weise kann die Komponente ValidationInputs die eingehenden Daten sofort anhand der voreingestellten Regeln über ihre eigene Methode handleValidation() überprüfen und entscheiden, ob eine Fehlermeldung angezeigt werden soll.

Beachten Sie, dass wir hier ein ref-Attribut festlegen, wenn wir auf die ValidationInputs-Komponente verweisen. Dies dient dazu, das Erhalten von ValidationInputs in der übergeordneten Komponente zu erleichtern Validierungsergebnis der Komponente (Erfolg oder Misserfolg). Wir können die folgende Methode verwenden, um in der übergeordneten Komponente zu bestimmen (vorausgesetzt, die übergeordnete Komponente verweist auf mehrere ValidationInputs-Komponenten und jede Referenz hat einen anderen ref-Wertsatz):

// 父组件调用该方法来判断所有的输入项是否合法
checkInputs() {    
    for (var r in this.refs) {        
         var _ref = this.refs[r];        
         if (_ref instanceof ValidationInputs) {            
              if (!_ref.state.isValid) return false;
        }
    }    
    return true;
}

Auf diese Weise können wir mit dieser Methode feststellen, ob alle Datenelemente die Überprüfung bestanden haben, bevor die übergeordnete Komponente Daten übermittelt. Wenn sie die Überprüfung nicht bestanden haben, wird das Formular nicht gesendet.

Das obige ist der detaillierte Inhalt vonWas ist eine benutzerdefinierte Reaktionsdatenvalidierungskomponente in js (ausführliche Erklärung)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!