javascript - 具有用于创建用户和登录用户的验证的 Backbone.js 模型

Question

我有一个模型 User。该模型目前使用 Register View 来“注册”新用户。

用户:

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


}
});

现在我想处理登录 View 。我应该使用相同的模型吗？考虑到它验证与登录 View (电子邮件/密码)无关的方法。

是否有处理此问题的最佳做法或推荐方法？我使用 backbone 主要是为了代码分离——它不是一个全 ajax 应用程序，只有表单处理是 ajax，然后它会在成功时重定向到一个新页面。这是网站的流量。

对于如何处理验证和与这样的模型的各种交互，对于注册用户到登录用户，任何建议/建议都非常有用。

我正在考虑创建一个新模型 UserLogin - 但不确定这是否是最好的。

Answer 1

您不需要登录模型。让 View 验证表单并发出发布请求。