为了账号安全,请及时绑定邮箱和手机立即绑定

网页制作,动静态代写

标签:
JavaScript

致我最橙色的青春,把它留在心里的最底部。
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>

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消