1. 使用Backbone實現前端hash路由

初步設想將注冊和登錄作為兩個不同的url實現，但登錄和注冊功能的差距只有form表單部分，用兩個url實現顯然開銷過大，所以最終方案為使用hash作為前端路由，根據url的hash值切換相應的表單顯示。

很多致力于SPA開發的前端框架都具備hash路由功能，考慮到嗨貓本身是一個類博客、偏重靜態展示的網站，所以最后選擇了輕量級的Backbone最為前端框架。

Backbone實現hash路由的代碼很簡單：

let $formBox = $('.box_form_container'),$navitems = $('.box_nav_item'),$nav_item_signup = $('.box_nav_item_signup'),$nav_item_login = $('.box_nav_item_login');let pwdRouter = Backbone.Router.extend({routes: {'login': 'login','signup': 'signup'},login: function() {$formBox.removeClass('box_form_container_signup').addClass('box_form_container_login');$navitems.removeClass('box_nav_item-current');$nav_item_login.addClass('box_nav_item-current');},signup: function() {$formBox.removeClass('box_form_container_login').addClass('box_form_container_signup');$navitems.removeClass('box_nav_item-current');$nav_item_signup.addClass('box_nav_item-current');}});let router = new pwdRouter();Backbone.history.start();

務必不要遺漏Backbone.history.start();,否則路由功能不會啟動。

隨后，將登錄和注冊的a標簽的href分別修改為#login和#signup便實現了簡單的hash路由。

2. 使用jquery-validation完善前端表單驗證

前端表單驗證是必不可少的一項功能，前端的js代碼驗證表單的完整性并攔截一部分非法的表單輸入，一定程度上減少服務端的壓力。

初步想自己造輪子，但考慮到開發周期和輪子的成熟性，最終選擇jquery-validation插件作為前端表單驗證工具。

jquery-validation插件和表單元素的name屬性綁定，以登錄表單為例，其dom結構如下：

根據input控件的name屬性，jquery-validation的驗證代碼如下：

// 登錄表單添加驗證規則$('.login_form').validate({rules: {signname: {required: true,signname: true},password: {required: true,norepeat: true},verifycode: {required: true}},errorPlacement: function(error, element) {let container = element.parent().find('.form_error');error.appendTo(container);container.show();},submitHandler: function(form) {var $form = $(form);let _action = $form.attr('action');$form.attr('action', '');$.ajax({type: 'post',url: _action,data: $form.serialize(),dataType: 'json'}).done(function(res) {console.log('done');if (res.code !== '100') {alert(res.msg);} else {alert('注冊成功');}}).fail(function(res) {console.log('fail');}).always(function() {$form.attr('action', _action);});}});

其中signname和norepeat是自定義的驗證規則,signname如下：

// 添加用戶名+郵箱的雙重驗證規則$.validator.addMethod('signname', function(value, element) {let reg_isemail = /[@]/,reg_email =/^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[/.][a-z]{2,3}([/.][a-z]{2})?$/i;return !reg_isemail.test(value) || (reg_isemail.test(value) &®_email.test(value));}, '請輸入正確的用戶名或郵箱');