几乎我们接触到的项目都会有登录和注册,而且逻辑也基本没变,就是样式展示不同而已,为了方便以后在做项目时,快速搭建起前端的登录和注册页,以及逻辑校验的编写 所以记录如下,方便今后引用。
首先我们建立好一个目录结构
- login_register_model
- login.html
- register.html
- js
- login.js
- register.js
以上结构我并没有创建样式目录,因为此模板我们不需要样式,因为每个项目的样式是不一样的,所以样式在此不做添加,这里只有骨架html和行为js
接着我们来安装依赖项
即待会用到的登录注册校验是依赖jquery.validation.js的,而这个jquery.validation.js又是依赖于jQuery的,所以我们先来安装这两个脚本到项目里
采用bower安装:(这里假设你已经安装了包bower管理了,不会的可以看它的官网)
$ bower install jquery-validation
以上这个安装会自动也把jquery安装进来,以及bower会去检测你安装的这个js是否有依赖项,刚好jquery.validation.js 是依赖jQuery的,所用这条命令也把jQuery也给你安装了
为什么要采用这个bower来安装你所需要的资源到你的项目里呢?
因为每次碰到我们要用到的什么插件,一条命令就能搞定,可以很方便的提高我们的开发效率,而不用去上网找你所需要的资源,而且你想安装什么版本都可以,还帮你把js之间的相互依赖项也给你安装好。
此时你的目录结构会多出一个文件夹及文件夹里边的两个依赖包jquery和jquery-validation,结构如下
- login_register_model
- bower_components
- jquery
- jquery-validation
- login.html
- register.html
- js
- login.js
- register.js
- bower_components
接着就可以在自己的html里边引入你待会写脚本所依赖的js了
项目所需要的依赖脚本和骨架html到此为止。
接下来可以动手写你自己的校验逻辑了。
所有文件的内容预览如下:
注册模块
注册html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
|
注册校验register.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
|
模拟后台处理逻辑的index.php(这里只是简单的模拟返回数据,好方便测试效验规则,这个文件就直接放在你的根目录login_register_model 下即可),目录结构变成
- login_register_model
- bower_components
- jquery
- jquery-validation
- login.html
- register.html
- js
- login.js
- register.js
- index.php
- bower_components
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
到这里,注册的模块基本完成了。接下来是登录模块
登录模块
html 代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
登陆效验login.js
javascript 代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
|
此时模拟后台处理逻辑的index.php 添加入登陆处理逻辑
php 代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
|
至此,以完成了登陆跟注册了,以后碰到要写登陆注册再也不用重复造轮子了,基本大同小亦,写完这些你就可以安心交给后端了,至于那些后端逻辑是怎么处理的,就交给后端完成吧。
以上所有代码我都放到我的github上了,欢迎大家下载https://github.com/wenyang12/login_register_model
也可以在下边打开预览效果:
登陆: http://3.wenphp.sinaapp.com/test/login_register_model/login.html
注册: http://3.wenphp.sinaapp.com/test/login_register_model/register.html