网页制作,动静态代写
致我最橙色的青春,把它留在心里的最底部。
div+css设计,bootstrap架构,960布局。
4页网站,分别为首页、学院简介、照片、联系方式等。
网站页面简洁大气,像不拘的自己,在包容了生活中的所有的欢笑与悲伤的点滴之后,终将汇聚成我心底最沉淀的橙色。
这是一个极富个人色彩的OK网站。
添加了表单注册页面,并进行验证,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>
共同学习,写下你的评论
评论加载中...
作者其他优质文章