Backbone.js Modell mit Validierung zum Erstellen von Benutzer und Login-Benutzer

Question

Ich habe ein Modell User. Das Modell arbeitet derzeit mit einer Register Ansicht, um einen neuen Benutzer zu "registrieren".

Benutzer:

var User = Backbone.Model.extend({ 
    url: '/user', 
    defaults: { 
     first_name: '', 
     last_name: '', 
     email: '', 
     username: '', 
     password: '' 
    }, 
    parse: function(response){ 
     if(response.username) { 
      this.trigger('username_check',response.username); 
     } 
     if(response.email) { 
      this.trigger('email_check',response.email); 
     }  
    }, 
    validate: function(attrs) { 

     var email_filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
     var username_filter = /^([a-zA-Z0-9]){0,1}([a-zA-Z0-9])+$/; 

     errors = []; 

     if (attrs.first_name == '') 
      errors.push({name: 'first_name', error: 'Please enter your First Name'}); 

     if (attrs.last_name == '') 
      errors.push({name: 'last_name', error: 'Please enter your Last Name'}); 

     if (!email_filter.test(attrs.email)) 
      errors.push({name: 'email', error: 'Please enter a valid email address'}); 

     if (!username_filter.test(attrs.username)) 
      errors.push({name: 'username', error: 'Your username contains invalid characters. Usernames may only contain letters and numbers.'});   

     if (attrs.username == '') 
      errors.push({name: 'username', error: 'Please provide a valid username'}); 

     if (attrs.username.length > 12) 
      errors.push({name: 'username', error: 'Your username must be less than 12 characters'});  

     if (attrs.username.length < 4) 
      errors.push({name: 'username', error: 'Your username must be at least 4 characters'}); 

     if (attrs.password == '') 
      errors.push({name: 'password', error: 'Please provide a password.'});   

     if (attrs.password.length < 5) 
      errors.push({name: 'password', error: 'Your password must be at least 5 characters in length.'}); 

     if(errors.length > 0) 
      return errors; 
     } 
}); 

Ausblick:

var Register = Backbone.View.extend({ 

     initialize: function() { 

      this.user = new User; 
      this.first_name    = this.$('input[name="first_name"]'); 
      this.last_name    = this.$('input[name="last_name"]'); 
      this.email     = this.$('input[name="email"]'); 
      this.username    = this.$('input[name="username"]'); 
      this.password    = this.$('input[name="password"]'); 
      this.confirm_password  = this.$('input[name="confirm_password"]'); 
      this.redirect_url   = $(this.el).attr('data-redirect-url'); 

     }, 
     events: { 
      'submit form' : 'onSubmit', 
      'blur input[name="username"]' : 'checkUsernameExists', 
      'blur input[name="email"]' : 'checkEmailExists' 
     }, 
     checkUsernameExists: function(e) { 
      var self = this; 
      if(this.username.val().length > 3) { 
       this.user.fetch({data: {username : this.username.val(), check : 'true'}}); 
       this.user.on("username_check", function(status){ 
        if(status == 'unavailable') { 
         self.processErrors([{name: 'username', error: 'This username is already taken, please try another.'}]); 
        } else { 
         $('input[name="username"]').closest('.controls').find('div.control-error').empty(); 
        } 
       }) 
      } 
     }, 
     checkEmailExists: function(e) { 
      var self = this; 
      var email_filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
      if (email_filter.test(this.email.val())) { 
       this.user.fetch({data: {email : this.email.val(), check : 'true'}}); 
       this.user.on("email_check", function(status){ 
        if(status == 'unavailable') { 
         self.processErrors([{name: 'email', error: 'This email is already used. Please login to your account or use a different email.'}]); 
        } else { 
         $('input[name="email"]').closest('.controls').find('div.control-error').empty(); 
        } 
       }) 
      } 
     }, 
     onSubmit: function(e) { 

      var self = this; 
      e.preventDefault(); 

      var attrs = { 
       'first_name': this.first_name.val(), 
       'last_name': this.last_name.val(), 
       'email': this.email.val(), 
       'username': this.username.val(), 
       'password': this.password.val() 
      }; 

      $('div.control-error').html(''); 

      var user = this.user.set(attrs, { 
        error: function(model, response) { 
        self.processErrors(response); 
        } 
      }); 

      if(user) { 

       errors = []; 

       if (self.confirm_password.val() == '') 
        errors.push({name: 'confirm_password', error: 'Please confirm your password.'}); 

       else if (self.confirm_password.val() !== self.password.val()) 
         errors.push({name: 'confirm_password', error: 'Your passwords do not match. Please confirm your passwords.'}); 

       if(errors.length > 0) { 
        self.processErrors(errors); 
       } else { 

        user.save(this.attrs, { 
         success: function(model, response){ 
         window.location.href = self.redirect_url; 
        }}); 
       } 
      } 

     }, 
     processErrors: function(response) { 
      for (var key in response) { 
       if (response.hasOwnProperty(key)) { 
        field = response[key]; 
        $('input[name="'+field.name+'"]').closest('.controls').find('div.control-error').html(field.error); 
       } 
      } 


} 
}); 

Jetzt möchte ich die Login-Ansicht behandeln. Soll ich das gleiche Modell verwenden? Betrachten wir Validierungsmethoden, die für die Login-Ansicht irrelevant sind (Email/Pass).

Gibt es eine Best Practice oder einen empfohlenen Weg für den Umgang damit? Ich benutze Backbone hauptsächlich für die Code-Trennung - es ist keine komplette Ajax-App, nur die Form-Handhabung ist Ajax, dann wird bei Erfolg auf eine neue Seite umgeleitet. Das ist der Fluss der Website.

Alle Vorschläge/Empfehlungen wären großartig für die Handhabung der Validierung und verschiedene Interaktionen mit einem Modell wie diesem, um einen Benutzer für die Anmeldung eines Benutzers zu registrieren.

Ich denke über die Erstellung eines neuen Modells UserLogin - aber nicht sicher, ob das am besten wäre.

Answer 1

Sie benötigen kein Modell für die Anmeldung. Lassen Sie die Ansicht das Formular validieren und machen Sie einfach eine Postanfrage.