2012-04-06 11 views
2

私はモデルUserを持っています。このモデルは現在、Registerビューで動作し、新しいユーザーを登録します。ユーザーを作成してログインするための検証を含むBackbone.jsモデル

ユーザー:

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

ビュー:

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


} 
}); 

は、今私はログインビューを処理したいです。私は同じモデルを使うべきですか?ログインビュー(電子メール/パス)とは関係のないメソッドを検証することを検討してください。

これを処理するためのベストプラクティスまたは推奨された方法がありますか?私は主にコード分離のためにバックボーンを使用しています。これはすべてのajaxアプリケーションではなく、フォーム処理だけがajaxであり、成功すると新しいページにリダイレクトされます。それはサイトの流れです。

ユーザーのログインにユーザーを登録するための、このようなモデルとの検証やさまざまな対話を処理する方法には、どのような提案や推奨事項が役に立ちます。

私は新しいモデルUserLoginを作成しようと考えていますが、それが最善であるかどうかはわかりません。

+0

あなたは正しい考えを持っていたと思います。 CRUD用のモデルとログイン用のモデル。 –

答えて

5

ログイン用のモデルは必要ありません。ビューでフォームを検証し、投稿要求を作成します。

+0

ビュー内でjQuery $ .ajaxを使用しますか? – dzm

+0

確かに、どうしてですか?バックボーンは絶対的なものではない – tkone

+0

十分に公正な - ありがとう! – dzm

関連する問題