专业网站设计立找亿企邦,一个后台管理多个网站,可以自己做漫画的网站,标准网站优势本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法。有一定的参考价值#xff0c;有需要的朋友可以参考一下#xff0c;希望对大家有所帮助。用bootstrap做登入注册页面#xff0c;使用validate做表单验证技术#xff1a;bootstrap#xff0c;f…本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法。有一定的参考价值有需要的朋友可以参考一下希望对大家有所帮助。用bootstrap做登入注册页面使用validate做表单验证技术bootstrapfont-awesomejquery-validate特点响应式布局表单验证(用户两次密码是否相同必填信息是否填写)背景图片自适应屏幕大小宗旨从实战中学知识。个人主页http://www.itit123.cn/ 更多干货等你来拿 (微信小程序入门教程入门教程系列 提供免费的api接口无需考虑服务端代码问题)。验证码实现功能 ITDragon博客效果图html代码第三方资源的导入是用cdn引入当然也可以自己去下载在本地导入。bootstrap案例body{background: url(img/4.jpg) no-repeat;background-size:cover;font-size: 16px;}.form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}#login_form{display: block;}#register_form{display: none;}.fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}input[typetext],input[typepassword]{padding-left:26px;}.checkbox{padding-left:21px;}Login to your account Remember meCreate an accountLogin to your accountjs代码可能有不合理的方法毕竟笔者能力有限如有更好的方法可以留言我会及时修改。$().ready(function() {$(#login_form).validate({rules: {username: required,password: {required: true,minlength: 5},},messages: {username: 请输入姓名,password: {required: 请输入密码,minlength: jQuery.format(密码不能小于{0}个字 符)},}});$(#register_form).validate({rules: {username: required,password: {required: true,minlength: 5},rpassword: {equalTo: #register_password},email: {required: true,email: true}},messages: {username: 请输入姓名,password: {required: 请输入密码,minlength: jQuery.format(密码不能小于{0}个字 符)},rpassword: {equalTo: 两次密码不一样},email: {required: 请输入邮箱,email: 请输入有效邮箱}}});});$(function() {$(#register_btn).click(function() {$(#register_form).css(display, block);$(#login_form).css(display, none);});$(#back_btn).click(function() {$(#register_form).css(display, none);$(#login_form).css(display, block);});});资源下载地址http://download.csdn.net/detail/qq_19558705/9358603现在我们开始谈谈所用到的知识点①bootstrap的布局bootstrap用的是网格布局使用col-*-*使用条件要在.container和.row下才能使用结构如下...参考值col-xs-*:小于768px手机col-sm-*:大于768px平板col-md-*:大于998px普通电脑笔记本之类col-lg-*:大于1200px一般为大型台式电脑可以同时使用达到跨多个设备效果偏移col-*-offset-*②表单这里的表单和普通表单没什么太多区别我就不多说了。③font-awesome的使用使用的是4.3.0版本使用方法fa-lg表示大图更多icon参考http://fontawesome.dashgame.com/④jquery-validate表单验证这是我要讲的重点第一步首先到导入jquery-validate第三方资源第二步创建好form表单初始化validate$(#login_form).validate({rules: {username: required,password: {required: true,minlength: 5},},messages: {username: 请输入姓名,password: {required: 请输入密码,minlength: jQuery.format(密码不能小于{0}个字 符)},}});注意这里的login_form必须是form表单上的选择器笔者因为将其设置在p上控制台显示settings没有被定义的错误。这里的username和password都是form表单中的name值rules是规则message是提示的信息required:true表示该字段为必填minlength表示长度至少为5maxlength是html5支持的所以不用在这里面设置equalTo表示与某某相同后面接的是第一个值#id或者是.classmessage中对应的内容后面就是提示的文字信息。可以直接copy我的代码然后根据自己的需要修改。⑤背景自适应屏幕大小不知道前到处找文档知道后才发现好简单那就是background-size:cover;这样可以做到背景图片和浏览器大小一样了。很简单吧。bootstrap创建登录注册页面github下载地址https://github.com/ITDragonBlog/daydayup/blob/master/bootstrap我觉得在实战中学习比盲目学习效果好很多知道这些知识可以做什么解决了为什么学这些知识的问题。我总结你来学一起装逼一起飞。有什么疑问和建议可以留言我会及时修改。转载请注明来源。更多编程相关知识请访问编程学习网站
