致我最橙色的青春,把它留在心里的最底部。
div+css设计,bootstrap架构,960布局。
4页网站,分别为首页、学院简介、照片、联系方式等。
网站页面简洁大气,像不拘的自己,在包容了生活中的所有的欢笑与悲伤的点滴之后,终将汇聚成我心底最沉淀的橙色。
这是一个极富个人色彩的OK网站。
+2425691680
添加了表单注册页面,并进行验证,javascript代码如下,使用的是jQuery的validate验证插件
<script>
$(document).ready(function() {
$("#signupForm1").validate({
rules: {
nicheng: "required",
username: {
required: true,
minlength: 2
},
password1: {
required: true,
minlength: 5
},
confirm_password1: {
required: true,
minlength: 5,
equalTo: "#password1"
},
email1: {
required: true,
email: true
},
agree1: "required"
},
messages: {
nicheng: "请输入昵称",
username: {
required: "请输入用户名",
minlength: "用户名至少两位数"
},
password1: {
required: "请输入密码",
minlength: "密码至少5位数"
},
confirm_password1: {
required: "请输入密码",
minlength: "密码最少5位数",
equalTo: "请输入相同的密码"
},
email1: "请输入有效的电子邮箱",
agree1: "请勾选协议"
},
errorElement: "em",
errorPlacement: function(error, element) {
// Add the help-block
class to the error element
error.addClass("help-block");
// Add `has-feedback` class to the parent div.form-group
// in order to add icons to inputs
element.parents(".col-sm-5").addClass("has-feedback");
if (element.prop("type") === "checkbox") {
error.insertAfter(element.parent("label"));
} else {
error.insertAfter(element);
}
// Add the span element, if doesn‘t exists, and apply the icon classes to it.
if (!element.next("span")[0]) {
$("<span class=‘glyphicon glyphicon-remove form-control-feedback‘></span>").insertAfter(element);
}
},
success: function(label, element) {
// Add the span element, if doesn‘t exists, and apply the icon classes to it.
if (!$(element).next("span")[0]) {
$("<span class=‘glyphicon glyphicon-ok form-control-feedback‘></span>").insertAfter($(element));
}
},
highlight: function(element, errorClass, validClass) {
$(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
$(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
$(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
}
});
})
</script>
原文地址:http://blog.51cto.com/13919851/2158348