这个页面是使用了requireJs,页面是freemarker页面 ,CSS是bootstrap
<#-- 页头 -->
<#include "/commons/header.ftl">
<div class="container">
<div class="row-11" style="padding-top:35px;">
<#-- 登录推广图片 -->
<div class="col-md-7">
<div class="register-ad">
<img src="/assets/images/loginBtn/login-ad.png" width="90%" height="400px">
</div>
</div>
<#-- 登录框 -->
<div class="col-md-4 register-box">
<div class="form-group form-padding">
<div class="controls register-title-parent">
<ul class="nav nav-tabs">
<li role="presentation" class="e-register tab-li active"><a href="/register?way=email" id="e-register">邮箱注册</a></li>
<li role="presentation" class="m-register tab-li"><a href="/register?way=mobile" id="m-register">手机号注册</a></li>
<li role="presentation" class="e-register tab-li"><a href="/register?way=username" id="e-register">用户名注册</a></li>
</ul>
</div>
</div>
<form id="register-form" class="form-vertical register-form" method="post" action="/register" novalidate="novalidate" data-widget-cid="widget-6">
<div class="alert alert-danger" style="display:none;"></div>
<div class="form-group form-padding">
<div class="controls input-logo-parent">
<span class="input-logo">
<i class="glyphicon glyphicon-envelope"></i>
</span>
<input class="form-control register-input" id="register_username" type="text" name="username" value="${username!''}" placeholder="电子邮箱或用户名" data-display="电子邮箱或用户名" data-widget-cid="widget-7" data-explain="">
<div class="help-block" style="display:none;"></div>
</div>
</div>
<div class="form-group form-padding">
<div class="controls input-logo-parent">
<span class="input-logo">
<i class="glyphicon glyphicon-user"></i>
</span>
<input class="form-control register-input" id="register_nickname" type="text" name="nickname" value="${(nickname)!''}" placeholder="昵称" data-display="昵称" data-widget-cid="widget-7" data-explain="">
<div class="help-block" style="display:none;"></div>
</div>
</div>
<div class="form-group form-padding">
<div class="controls input-logo-parent">
<span class="input-logo">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input class="form-control register-input" id="register_password" type="password" name="password" placeholder="密码" data-display="密码" data-widget-cid="widget-8" data-explain="">
<div class="help-block" style="display:none;"></div>
</div>
</div>
<div class="form-group form-padding">
<div class="controls input-logo-parent">
<span class="input-logo">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input class="form-control register-input" id="register_confirmPassword" type="password" name="confirmPassword" placeholder="确认密码" data-display="密码" data-widget-cid="widget-8" data-explain="">
<div class="help-block" style="display:none;"></div>
</div>
</div>
<div class="form-group form-padding">
<div class="controls validata-img">
<div class="text-help-block">请输入下面的验证码! 看不清,<a class="change-img">换一张</a></div>
<input class="form-control register-validateCode" id="register_validate" type="text" name="validateCode" placeholder="验证码" data-display="验证码" data-widget-cid="widget-8" data-explain="">
<div class="validate-img-code"><img id="imgObj" src="/validate/code" height="40px"></div>
</div>
</div>
<div class="form-group form-padding clearfix">
<div class="controls">
<button type="submit" class="btn btn-info btn-large btn-block register-input"><span class="register-text">注册</span></button>
</div>
</div>
</form>
<#-- 注册入口 -->
<div class="form-group form-padding">
<div class="controls">
<p style="text-align:center;">已有账号?<a href="/login">马上登录</a></p>
</div>
</div>
<#-- 使用第三方账号登录 -->
<#include "/front/login/cooperationLoginPage.ftl">
</div>
</div>
</div>
</div>
<#-- 待加载的JS -->
<#assign mainJS="/assets/js/controller/front/register/register">
<#-- 页脚 -->
<#include "/commons/footer.ftl">
register.js(验证提交)
require.config({
"baseUrl" : "/assets/js",
paths : {
"jquery" : "libs/jquery/jquery-1.11.1.min",
"bootstrap" : "libs/bootstrap/3.3.0/js/bootstrap.min",
"ie10-viewport-hack" : "libs/hacks/ie10-viewport-bug-workaround",
"jquery.validate" : "libs/jquery-validation/jquery.validate.min"
},
shim : {
"bootstrap" : { "deps" : ["jquery"] },
"ie10-viewport-hack" : { "deps" : ["jquery"] }
}
});
require(["jquery", "bootstrap", "ie10-viewport-hack", "jquery.validate"], function($){
// DOM Ready
$(function(){
//验证码,换一张
$(".change-img").click(function(){
var src = $("#imgObj").attr("src");
var url = src + '?' + new Date().getTime();
$("#imgObj").attr("src",url);
});
//注册验证
jQuery.validator.setDefaults({
errorElement : 'p',
errorClass : 'help-block',
highlight : function(element) {
$(element).closest('.form-group').addClass('has-error');
},
success : function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},
errorPlacement : function(error, element) {
element.parent('div').append(error);
}
});
$(".register-form").validate({
rules : {
username : {
required : true,
maxlength : 30
},
nickname : {
required : true,
maxlength : 60
},
password : {
required : true,
minlength : 6,
maxlength : 20
},
confirmPassword : {
required : true,
equalTo: '#register_password'
},
validateCode :{
required : true,
}
},
messages : {
username : {
required : '请输入用户名',
maxlength : '用户名最大长度不能超过30个字符。'
},
nickname : {
required : '请输入昵称',
maxlength : '昵称最大长度不能超过60个字符。'
},
password : {
required : '请输入密码',
minlength : '密码长度不能小于6个字符。',
maxlength : '密码长度不能超过20个字符。'
},
confirmPassword : {
required : '请输入确认密码',
equalTo: '两次输入密码不一致'
},
validateCode :{
required : '请输入验证码'
}
},
//提交
submitHandler : function(form){
form.submit();
}
});
}); // DOM Ready
});
页脚:
<#-- 页脚 -->
<#--弹窗模板-->
<div id="modal" class="modal"><div></div></div>
<#-- 通过RequireJS加载JS代码 -->
<#if mainJS?has_content>
<script data-main="${mainJS}" src="/assets/js/require.js"></script>
<#else>
<script data-main="/assets/js/require-main" src="/assets/js/require.js"></script>
</#if>
</body>
</html>
页头:
<!DOCTYPE html>
<html>
<head>
<#-- 网校信息及相关配置 -->
<@schoolDirective schoolId="${schoolId!''}" />
<#if ! school?has_content>
<script>window.location.href="/school_not_found";</script>
</#if>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="${(schoolSettings.seoKeyword)!''}" />
<meta name="description" content="${(schoolSettings.seoDescription)!''}">
<meta name="author" content="保利威视 POLYV 易方">
<#-- 网校的图标 -->
<#if (school.icon)?has_content>
<link rel="icon" href="${(school.icon)!''}">
</#if>
<#-- 页面标题 -->
<title>${pageTitle!""} ${(schoolSettings.seoTitle)!""}</title>
<#-- 网校样式 -->
<link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<#if (schoolSettings.bootstrapTheme)?has_content>
<link href="/assets/bootstrap/themes/${(schoolSettings.bootstrapTheme)!'default'}/css/bootstrap.min.css" rel="stylesheet">
</#if>
<link href="/assets/css/school.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/assets/js/libs/html5shiv.min.js"></script>
<script src="/assets/js/libs/respond.min.js"></script>
<![endif]-->
</head>
<body class="${bodyClass!''}">
<#-- 顶部导航条 -->
<#include "/commons/header-navbar.ftl">
效果