jquery实现带滑块验证的注册表单页面代码
代码语言:html
所属分类:表单美化
代码描述:jquery实现带滑块验证的注册表单页面代码,分手机注册和邮箱注册。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>系统注册</title> <style> /*重置*/ html,body,ul,li,h1,h2,h3,p,input { padding: 0; margin: 0; } body { font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif; font-size: 14px; color: #555; background-color: #f5f8fa; } input,button,textarea,img { border: none; } ul { list-style: none; } a { text-decoration: none; color: #333; } i,em { font-style: normal; } /*公共样式*/ .fl { float: left; } .fr { float: right; } .por { position: relative; } .poa { position: absolute; } .clearfix::before, .clearfix::after{ content: "."; line-height: 0; display: block; height: 0; visibility: hidden; clear: both; } .show { display: block; } .hide { display: none; } /*注册样式*/ .header { width: 100%; height: 70px; margin: 0 auto 70px auto; background-color: #fff; } .header-container { width: 1180px; height: 70px; margin: 0 auto; line-height: 70px; } .header-container>h2 { font-size: 16px; color: #333; } .main { width: 1160px; margin: 0 auto; padding: 20px 0; } .main-form { padding: 70px 0 70px 294px; background-color: #fff; } .main-form>form { width: 866px; height: 394px; } .form-tab { width: 320px; height: 30px; margin: 0 0 20px 125px; border-bottom: 1px solid #d7d7d7; } .form-tab li { width: 130px; float: left; text-align: center; line-height: 28px; border-bottom: 2px solid #fff; position: relative; cursor: pointer; } .form-tab li.cur-tab { border-color: #4477d0; color: #4477d0; } .form-tab li:last-child { margin-left: 60px; } .form-tab li span:first-child { /*这里是20*20的图标*/ } .form-group { margin: 20px 0; position: relative; } .form-group>label { display: inline-block; width: 100px; padding-right: 20px; vertical-align: middle; text-align: center; } .input-group { position: relative; display: inline-block; vertical-align: middle; } .input-group>input { width: 325px; height: 50px; box-sizing: border-box; border: 1px solid #d7d7d7; font-size: 14px; padding: 15px 0 15px 20px; line-height: 20px; color: #888; } .input-group>button { position: absolute; width: 120px; height: 36px; line-height: 36px; text-align: center; top: 7px; right: 4px; background-color: #dedede; color: #fff; cursor: pointer; } .input-group>button.clicked { background-color: #4477d0; } .form-group i { position: absolute; color: #333; width: 20px; height: 20px; font-size: 20px; line-height: 20px; text-align: center; top: 15px; right: 15px; cursor: pointer; } .drag { display: inline-block; vertical-align: middle; } .login-btn { display: block; width: 325px; height: 50px; background-color: #4477d0; line-height: 50px; text-align: center; color: #fff; } .marl { margin-left: 124px; } .service-item { color: #4477d0; } .service-item:hover { text-decoration: underline; } .form-group-sp>label { width: 200px; } .form-group-sp>input { width: 13px; height: 13px; vertical-align: middle; } </style> <style> .drag{ position: relative; background-color: #e8e8e8; width: 325px; height: 40px; line-height: 40px; text-align: center; } .drag .handler{ position: absolute; top: 0; left: 0; width: 40px; height: 38px; border: 1px solid #ccc; cursor: move; } .handler_bg{ background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center; } .handler_ok_bg{ background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center; } .drag .drag_bg{ background-color: #7ac23c; height: 40px; width: 0; } .drag .drag_text{ position: absolute; top: 0; width: 325px; -moz-user-select: none; -webkit-user-select: none; user-select: none; -o-user-select:none; -ms-user-select:none; } </style> </head> <body> <div class="header"> <div class="header-container"> <h2 class="fl"><a href="#">系统注册</a></h2> </div> </div> <div class="main"> <div class="main-form"> <form action="" id="form"> <div class="form-tab"> <ul> <li class="cur-tab"> <span class="phone-icon"></span> <span>手机注册</span> </li> <li> <span class="email-icon"></span> <span>邮箱注册</span> </li> </ul> </div> <div class="form-content"> <div class="phone-res"> <div class="form-group"> <label for="userName">手机号码</label> <div class="input-group"> <input id="userName" type="text" placeholder="请输入手机号码"/> </div> </div> <div class="form-group"> <label for="drag0">滑动验证</label> <div class="drag" id="drag0"></div> </div> <div class="form-group"> <label for="cen-code">验证号码</label> <div class="input-group"> <input id="cen-code" type="text" placeholder="请输入验证码"/> <button id="getCodeBtn">获取验证码</button> </div> </div> <div class="form-group"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0