| 前端开发常见插件 |
| 前端开发功能插件 |
| google前端开发插件 |
首先我们建立好一个目录结构
—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
接着就可以在自己的html里边引入你待会写脚本所依赖的js了
[quote]<script src=”bower_components/jquery/dist/jquery.min.js”></script>
<script src=”bower_components/jquery-validation/dist/jquery.validate.min.js”></script>[/quote]
项目所需要的依赖脚本和骨架html到此为止。
接下来可以动手写你自己的校验逻辑了。
所有文件的内容预览如下：
注册模块
注册html代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>注册页</title>
</head>
<body>
<form id=”regForm”>
<div>
<label>手机</label>
<input type=”text” name=”phone” id=”phone” />
<input type=”button” value=”获取验证码” id=”getCode” />
</div>
<div>
<label>手机验证码</label>
<input type=”text” name=”phoneCode” id=”phoneCode” />
</div>
<div>
<label>设置密码</label>
<input type=”password” name=”password” id=”password” />
</div>
<div>
<label>确认密码</label>
<input
type=”password”
name=”confirmPassword”
id=”confirmPassword”
/>
</div>
<div>
<label>验证码</label> <input type=”text” />
<!– 在下边code-img插入验证码图片 –>
<span id=”code-img”>后端生成的验证码图片</span>
</div>
<div>
<input type=”checkbox” checked />同意
<a href=”#” id=”userProtocol”>《用户注册协议》</a>
</div>
<div>已经注册？ <a href=”login.html”>马上登录</a></div>
<div><input type=”submit” value=”立即注册” /></div>
</form>
<script src=”bower_components/jquery/dist/jquery.min.js”></script>
<script src=”bower_components/jquery-validation/dist/jquery.validate.min.js”></script>
<script src=”js/register.js”></script>
</body>
</html>
注册校验register.js
javascript 代码
/**
* Created by Administrator on 2016/1/28.
* author wenyang
*/
$(function() {
var myValidate = (function($) {
function ValidFun(id) {
this.form = $(id)
}
ValidFun.prototype.init = function() {
return this.form.validate({
submitHandler: function() {
//如果验证成功，则提交ajax
$.ajax({
url: ‘index.php?act=index&op=reg’, //这里是提交到后台的一个路由地址，类似这样的是执行后台里控制器index下的reg方法来处理注册提交
type: ‘post’,
dataType: ‘json’,
data: {
phone: $(‘#phone’).val(),
phoneCode: $(‘#phoneCode’).val(),
password: $(‘#password’).val(),
code: $(‘#code’).val(),
},
success: function(data) {
//后台返回的json如{key:1,keyMain:’注册成功’}
if (data.key) {
//注册成功
//这里写注册成功后的代码逻辑
console.log(data)
alert(data.keyMain)
} else {
//注册失败 后台返回的json如{key:0, keyMain:’注册失败’}
//这里写注册失败后的代码逻辑
console.log(data)
alert(data.keyMain)
}
},
})
},
rules: {
//配置规则
phone: {
required: true,
vPhone: true,
remote: {
url: ‘index.php?act=index&op=verifyCode’, //验证码后台处理程序,异步验证手机号是否已经注册过了
type: ‘post’, //数据发送方式
dataType: ‘json’, //接受数据格式
data: {
//要提交到后台的数据 后台成功则返回字符串如”true”,失败则返回字符串如’false’
phone: function() {
return $(‘#phone’).val()
},
},
},
},
phoneCode: {
required: true,
},
password: {
required: true,
minlength: 6,
},
confirmPassword: {
required: true,
minlength: 6,
equalTo: ‘#password’,
},
code: {
required: true,
minlength: 4,
},
},
messages: {
//配置提示信息
phone: {
required: ‘请输入手机号’,
vPhone: ‘输入的手机格式不正确’,
remote: ‘手机号码已经注册过’,
},
phoneCode: {
required: ‘请输入手机验证码’,
},
password: {
required: ‘请输入密码’,
minlength: $.validator.format(‘密码不能小于{0}个字符’),
},
confirmPassword: {
required: ‘请输入确认密码’,
minlength: $.validator.format(
‘确认密码不能小于{0}个字符’,
),
equalTo: ‘两次输入密码不一致’,
},
code: {
required: ‘请输入图形验证码’,
minlength: $.validator.format(
‘图形验证码不能小于{0}个字符’,
),
},
},
errorPlacement: function(error, element) {
//改变错误提示的位置
error.appendTo(element.parent())
},
})
}
$.validator.addMethod(‘vPhone’, function(value, element, params) {
//添加一个手机验证方法
var patten = /^0?(13|14|15|18)[0-9]{9}$/
if (params && patten.test(value)) {
return true
} else {
return false
}
})
return {
init: function(id) {
var instance = new ValidFun(id)
return instance.init() //返回validator的实例
},
}
})($)
/*获取验证码的模块模式封装*/
var getCode = (function($) {
function Code(id, validatorInstance) {
this.elem = $(id)
this.validatorInstance = validatorInstance
}
Code.prototype.init = function() {
var $this = this.elem
var self = this
$this.on(‘click’, function() {
if (self.validatorInstance.element(‘input[name=phone]’)) {
//手机号验证通过了才可以发送验证码
$.ajax({
type: ‘POST’,
url: ‘index.php?act=index&op=ajaxSendMobileCode’,
data: {
phone: $(‘#phone’).val(),
},
dataType: ‘json’,
success: function(data) {
$this.prop(‘disabled’, true).addClass(‘disabled’)
if (data.key) {
//成功
self.addTipCountDown(120)
} else {
//失败
alert(data.keyMain)
$this
.prop(‘disabled’, false)
.removeClass(‘disabled’)
return false
}
},
})
}
})
}
Code.prototype.addTipCountDown = function(time) {
var self = this
var stop
var tipElement = $(
‘<span class=”phoneTip”>验证码已发送,<span style=”color:#fe6700;” class=”times”>’ +
time +
‘</span>秒后可重新获取</span>’,
)
this.elem.parent().append(tipElement)
stop = setInterval(function() {
time = time – 1
$(‘.times’).html(time)
if (time <= 0) {
clearInterval(stop)
self.elem.prop(‘disabled’, false).removeClass(‘disabled’)
tipElement.remove()
}
}, 1000)
}
return {
init: function(id, validatorInstance) {
var instance = new Code(id, validatorInstance)
instance.init()
},
}
})($)
var validatorInstance = myValidate.init(‘#regForm’) //初始化注册验证
getCode.init(‘#getCode’, validatorInstance) //初始化获取验证码
})
模拟后台处理逻辑的index.php（这里只是简单的模拟返回数据，好方便测试效验规则，这个文件就直接放在你的根目录login_register_model 下即可），目录结构变成
—login_register_model
—bower_components
—jquery
—jquery-validation
—login.html
—register.html
—js
—login.js
—register.js
—index.php
index.php
php 代码
到这里，注册的模块基本完成了。接下来是登录模块
登录模块
html 代码
登陆效验login.js
javascript 代码
此时模拟后台处理逻辑的index.php 添加入登陆处理逻辑
php 代码
至此，以完成了登陆跟注册了，以后碰到要写登陆注册再也不用重复造轮子了，基本大同小亦，写完这些你就可以安心交给后端了，至于那些后端逻辑是怎么处理的，就交给后端完成吧。
githubhttps://github.com/wenyang12/login_register_model
| notepad 前端开发插件 |
| vscode 前端开发插件 |
| 前端开发常用插件 |
前端开发者
评论前必须登录！
注册