Progettazione software per la convalida del modulo lato client

Question

Progettazione software per la convalida del modulo lato client

#1 da (2 voti)
#2 da (0 voti)

1

Quindi sto usando il framework MEAN per costruire la mia app web. Come tutte le altre app richiede un login & registrazione.

Il mio approccio finora è stato:

Ogni funzione principale della mia app ha il proprio controller AngularJS
Ho un controller del filtro dati, che aiuta a filtrare i dati all'interno dell'app. Ma il mio controller di filtri NON si connette al server stesso. Ho creato un servizio AngularJS che gestisce tutte le azioni con il server.
E ho un "controller di accesso"

Il controller di accesso è responsabile poiché il nome suggerisce la gestione degli accessi.

La mia domanda:

La mia domanda è allora che sta eseguendo la convalida del modulo Client Side ( cioè controllando che i campi non siano vuoti, l'email sia del formato corretto ecc ) all'interno di un controller angularJS un buon approccio di progettazione?

Devo creare un servizio che gestisca tutte le convalide? Le funzioni di convalida dovrebbero essere private (cioè nei moduli javascript). Qual è il miglior approccio al design per questo?

Di seguito è riportato il mio codice del controller di accesso:

login.controller('login', function($scope){

$scope.checkValidEmail = function(){
   var elem = document.getElementById("email");
   var err = document.getElementById("emailErrorMessage");
   var emailLabel = document.getElementById("emailLabel");
   var success = document.getElementById("emailSuccessMessage");
   var email = $scope.userEmail.toLowerCase();

   var atpos = email.indexOf("@");
   var dotpos = email.lastIndexOf(".");

   if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {

       success.style.display = "none";
       err.style.display = "-webkit-inline-box";
       elem.style.borderColor = "#ef4d23";
       elem.style.backgroundImage = "url(./img/error_sign.png)";
       elem.style.backgroundRepeat = "no-repeat";
       elem.style.backgroundPosition = "325px";
       elem.style.backgroundSize = "16px 15px";
       emailLabel.style.display = "none";
       err.style.color = "#ef4d23";
       err.innerHTML = "Email address is incorrect!";
       $scope.valid = true;

       return false;
   } else {
       success.style.display = "-webkit-inline-box";
       success.style.color = "#27ae60";
       success.innerHTML = "Email looks great!";
       err.style.display = "none";
       elem.style.borderColor = "#27ae60";
       elem.style.backgroundImage = "url(./img/correct_sign.png)";
       elem.style.backgroundRepeat = "no-repeat";
       elem.style.backgroundPosition = "325px";
       elem.style.backgroundSize = "12px 16px";
       $scope.valid = false;
   }
  };
});

javascript angularjs

posta Lorenzo von Matterhorn 17.02.2016 - 09:37

fonte

2 risposte

0

Sono stupito del fatto che stai utilizzando la funzione controller per convalidare il modulo. Si sta utilizzando il framework MEAN, quindi è necessario utilizzare direttive integrate angolari per convalidare il modulo. È meglio, veloce e facile così.

Convalida del modulo angolare:

   <form name="myForm">
     <input type="text" name="name" ng-required="true" />                   
     <p class="help-block" ng-if="myForm.name.$dirty && myForm.name.$error.required">
        <i><b>Name</b></i> is required.
     </p>
    </form>

Come questo puoi fare per email, numero ecc. Per riferimento completo: fai clic qui

risposta data 19.02.2016 - 08:41

fonte

Leggi altre domande sui tag javascript angularjs

Come scrivo questo metodo per aderire al Principio di Responsabilità Singola? Servizio / applicazione basata su componenti in Java

score 2 · Accepted Answer

My question then is that is carrying out Client Side form validation (i.e checking the fields are not empty, the email is of correct format etc) within a angularJS controller a good design approach?

Non su se stesso (angular usa un controller specifico per farlo per te), ma il modo in cui lo stai usando è orribile:

var elem = document.getElementById("email");
...
success.style.display = "-webkit-inline-box";

AngularJS fornisce associazioni. Stai evitando completamente quelli e accedendo alla tua vista dal tuo Controller (male!) E modificando la vista dal tuo controller aggiungendo le regole CSS (anche peggio!).

Should I create a service that handles all the validation? Should the validation functions be private (i.e in javascript modules). Whats the best design approach for this?

Potresti farlo, certo, ma l'approccio migliore per farlo è usare Angular come dovrebbe essere usato. Dai un'occhiata alla guida per lo sviluppatore di moduli :

<input type="email" ng-model="user.email" name="uEmail" required="" />
<br />
<div ng-show="form.$submitted || form.uEmail.$touched">
  <!-- could aldo use ngClass to add a CSS class on error -->
  <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
  <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>

Mantieni la convalida sul lato View, proprio come dovrebbe essere, e associa i tuoi modelli ai controller in modo che siano molto più puliti.