Qu'est-ce qu'un composant de validation de données de réaction personnalisé dans js (explication détaillée)

Cet article vous présente une introduction à ce qu'est un composant de validation de données de réaction personnalisé. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Lorsque nous soumettons des formulaires frontaux, nous rencontrons souvent le problème de la vérification des données du formulaire. Si les données soumises par l'utilisateur sont illégales, telles qu'un format incorrect, un type non numérique, dépassant la longueur maximale, les champs obligatoires, les valeurs maximales et minimales, etc., nous devons fournir des informations rapides à l'endroit correspondant. Si l'utilisateur corrige les données, nous masquons également le message d'invite.

Il existe des plug-ins prêts à l'emploi qui vous permettent d'implémenter cette fonction de manière très pratique. Si vous utilisez le framework knockout, vous pouvez utiliser le plug-in Knockout-Validation. C'est très simple à utiliser, par exemple, j'ai ce morceau de code ci-dessous :

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

Pour plus de méthodes d'utilisation, vous pouvez consulter la documentation et des exemples sur github.

Cependant, si notre front-end utilise le framework React, comment pouvons-nous réaliser des fonctions similaires à knockout ci-dessus ? Nous pouvons envisager d'extraire cette fonction relativement indépendante et de l'écrire en tant que composant React. Regardez le code ci-dessous :

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

Les éléments de vérification pris en charge par ce composant sont :

• obligatoire : true | false Vérifiez s'il est est requis.

• numéro : true | false Vérifie si la valeur saisie est un nombre.

• Si le nombre est vrai, les valeurs maximales et minimales peuvent être vérifiées via max et min. La valeur des attributs max et min doit être un nombre valide.

• money : true | false Vérifie que la valeur saisie est dans un format monétaire valide. Le format monétaire doit être numérique, avec jusqu'à deux décimales autorisées.

Comment utiliser ?

On ajoute une référence au composant dans la méthode render() du composant parent :

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

On ajoute la variable price à l'state du composant parent , et liez l'événement onChange au contrôle input, de sorte que lorsque l'utilisateur modifie le contenu dans la zone de texte, la valeur du La variable price peut être mise à jour en temps réel. Transmettez-la dans le composant ValidationInputs. De cette manière, le composant ValidationInputs peut immédiatement vérifier les données entrantes selon les règles prédéfinies via sa propre méthode handleValidation(), et décider d'afficher ou non un message d'erreur.

Notez qu'ici nous définissons un attribut ref lors du référencement du composant ValidationInputs afin de faciliter l'obtention de ValidationInputs dans le composant parent. résultat de la validation du composant (succès ou échec). Nous pouvons utiliser la méthode suivante pour déterminer dans le composant parent (en supposant que le composant parent fait référence à plusieurs composants ValidationInputs et que chaque référence a un ensemble de valeurs ref différent) :

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

De cette façon, avant que le composant parent ne soumette les données, nous pouvons utiliser cette méthode pour déterminer si tous les éléments de données ont réussi la vérification. S'ils n'ont pas réussi la vérification, le formulaire ne sera pas soumis.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!