一段代码…………请无视
来源:互联网 发布:mac罗马数字怎么打 编辑:程序博客网 时间:2024/05/22 06:48
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=0,maximum-scale=0, user-scalable=yes"/> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <link href="Fesco.css" rel="stylesheet" type="text/css"> <title>绑定</title></head><body> <div class="col-xs-11 col-xs-offset-1 col" style="margin-top:5rem; margin-left: 1rem;"> <p class="text" style="font-size:3rem; line-height: 6rem;">1. 拍摄照片时尽量让身份证充满整个屏幕,且尽量让身份证处于光线充足,背景纯洁的位置。</p> <p class="text" style="font-size:3rem; line-height: 6rem;">2. 上传身份证必须是本人且有效的身份证,否则无法登记。</p> <p class="text" style="font-size:3rem; line-height: 6rem;">3. 为保证照片通过率,请使用后置摄像头,勿使用任何美图功能对照片进行美化。</p> </div> <div class="col-xs-12" style="height:45rem;margin-top: 27rem;margin-left: 14rem" > <div class="col-xs-7 borderDiv" style="padding:0; background-color:#BFBFBF" id="picA"> <img id="idFront" width="100%" height="100%" style="position:absolute;" src="" /> <img id="idFrontWaterMark" width="100%" height="100%" style="position:absolute;" src=""/> <div style="width:100%;text-align:center;" id="picBtnA"> <p class="text" style="position:absolute; color:#FFFFFF">拍摄身份证正面</p> <span class="glyphicon glyphicon-plus text takePhoto" style="line-height:45rem;color:#FFFFFF"> </span> </div> <input type="file" class="photo" capture="camera" accept="image/*" id="idInputFront" name="idInputFront" /> </div> </div> <div class="col-xs-12 col-xs-offset-1 col" style="margin-left: 3rem"> <div class="col-xs-12 gray-border" style="margin-top: 2rem;margin-left:-3rem"></div> <div class="col-xs-12" style="margin-top: -1rem"> <p class="text"> 姓名 <h id="name"> XXX</h> </p> </div> <div class="col-xs-12 gray-border" style="margin-top: 0.5rem"></div> <div class="col-xs-12"> <p class="text"> 身份证 <h id="paperNumber"> XXXXXXXXXXXXXXXXXX</h> </p> </div> <div class="col-xs-12 gray-border" style="margin-top: 0.5rem"></div> <div class="col-xs-9 col-xs-offset-1 col"style="margin-left: -1rem;"> <input type="ID" class="form-control" name="accountPhone" id="accountPhone" style="font-size: 4rem" placeholder="手机号" onBlur="checkIdAndPhone()" onfocus="remErrorMsg()" value=""> </div> <div class="col-xs-12 gray-border"></div> <div class="col-xs-4 col-xs-offset-1 col"> <div class="form-group "style="margin-left: -7rem;"> <input type="ID" class="form-control" name="identifyingCode" onfocus="remErrorMsg()" onBlur="checkIdAndPhoneAndIdentifyingCode(1)" id="identifyingCode" style="font-size: 4rem" placeholder="验证码" value=""> </div> </div> <div class="col-xs-5 col"> <div class="form-group "> <label class="btn smallbtn" id="identifying" onclick="getIdentifyingCode()"><p id="identifyingBtnText">获取验证码</p> </label> </div> </div> <div class="col-xs-12 gray-border"></div> <br/> <div class="col-xs-12" id="errorTips"> <p class="text" id="errorText"></p> </div> <div class="col-xs-11 col-xs-offset-1 col"style="margin-left: 3rem"> <p class="tips">同意<a href="accountRegController.do?toDeclarationPage">《微信号绑定免责条例》</a>,请点击绑定完成 </p> </div> <div class="col-xs-10 col-xs-offset-1" style="height:15rem;margin-left: 2rem" id="bindingDiv" > <div style="height:100%;"> <label class="btn bigbtn" id="binding" style="background-color:#C60000;" onclick="submitBinding()"><p>绑定</p> </label> </div> </div> </div></body><script> //图片预览 $(function() { $("input[name='idInputFront']").change(function(evt) { //input内容发生改变时触发的事件 var files = evt.target.files; for ( var i = 0, f; f = files[i]; i++) { if (!f.type.match('image.*')) { continue; } var reader = new FileReader();//使用FileReader接口 reader.onload = (function(theFile) { return function(e) { $("#picA img").attr("src", e.target.result); //预览图片的位置 $("#idFrontWaterMark").attr("src","watermark.gif"); //添加水印 $("#picBtnA").hide(); }; })(f); reader.readAsDataURL(f); } }); }); //检查ID,paperNumber身份证号 function idVerification() { var ID = $.trim(document.getElementById("paperNumber").value); if (ID == "") { $("#CorrectId").removeClass("glyphicon-ok"); $("#CorrectId").addClass("glyphicon-remove"); $("#CorrectId").removeClass("correct");//green $("#CorrectId").addClass("error");//red return false; } if (ID != "") { //15位或18位,如果是15位,必需全是数字。 // 如果是18位,最后一位可以是数字或字母X|x,其余必需是数字。 var reg = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/; if (!reg.test(ID)) { $("#CorrectId").removeClass("glyphicon-ok"); $("#CorrectId").addClass("glyphicon-remove"); $("#CorrectId").removeClass("correct"); $("#CorrectId").addClass("error"); return false; } } //身份证号正确 $("#CorrectId").removeClass("glyphicon-remove"); $("#CorrectId").addClass("glyphicon-ok"); $("#CorrectId").removeClass("error"); $("#CorrectId").addClass("correct"); return true; }; //检查Phone,accountPhone手机号 function phoneVerification() { var mob = $.trim(document.getElementById("accountPhone").value); if (mob == "") { $("#CorrectPhone").removeClass("glyphicon-ok"); $("#CorrectPhone").addClass("glyphicon-remove"); $("#CorrectPhone").removeClass("correct"); $("#CorrectPhone").addClass("error"); return false; } if (mob != "") { $("#CorrectPhone").addClass("glyphicon-remove"); $("#CorrectPhone").removeClass("correct"); $("#CorrectPhone").addClass("error"); return false; } //手机号码正确 $("#CorrectPhone").removeClass("glyphicon-remove"); $("#CorrectPhone").addClass("glyphicon-ok"); $("#CorrectPhone").removeClass("error"); $("#CorrectPhone").addClass("correct"); return true; }; function checkIdAndPhone() { document.getElementById("errorText").innerHTML = ""; if (!idVerification()) { document.getElementById("paperNumber").className = "form-control errorInput"; } else { document.getElementById("paperNumber").className = "form-control"; } if (!phoneVerification()) { document.getElementById("accountPhone").className = "form-control errorInput"; } else { document.getElementById("accountPhone").className = "form-control"; } } function remErrorMsg(){ document.getElementById("errorText").innerHTML = ""; document.getElementById("errorTips").style.visibility = "hidden"; } //验证码 function identifyingCodeVerification() { var paperNumber = $("#paperNumber"); var accountPhone = $("#accountPhone"); var identifyingCode = $("#identifyingCode"); var flag = false; var IC = $.trim(document.getElementById("identifyingCode").value); if (IC == "") { $("#CorrectIdentifyingCode").removeClass("glyphicon-ok"); $("#CorrectIdentifyingCode").addClass("glyphicon-remove"); $("#CorrectIdentifyingCode").removeClass("correct"); $("#CorrectIdentifyingCode").addClass("error"); flag = false; }else{ $.ajax({ type : "POST", contentType : "application/json", dataType : "json", async : false, url : "accountRegController.do?checklogin&paperNumber=" + paperNumber.val() + "&accountPhone=" + accountPhone.val() + "&identifyingCode=" + identifyingCode.val(), success : function(data) { $("#CorrectIdentifyingCode").removeClass("glyphicon-remove"); $("#CorrectIdentifyingCode").addClass("glyphicon-ok"); $("#CorrectIdentifyingCode").removeClass("error"); $("#CorrectIdentifyingCode").addClass("correct"); flag = true; }, error : function() { alert("抱歉,暂时无法为您提供这项服务。"); flag = false; } }); } return flag; }; function checkIdAndPhoneAndIdentifyingCode(noBlur) { var code = document.getElementById("identifyingCode").value; if(noBlur==1){ if(code.length==0){ return false; } } var flag = true; if (!idVerification()) { document.getElementById("paperNumber").className = "form-control errorInput"; flag= false; } else { document.getElementById("paperNumber").className = "form-control"; } if (!phoneVerification()) { document.getElementById("accountPhone").className = "form-control errorInput"; flag= false; } else { document.getElementById("accountPhone").className = "form-control"; } if (!identifyingCodeVerification()) { document.getElementById("identifyingCode").className = "form-control errorInput"; flag= false; } else { document.getElementById("identifyingCode").className = "form-control"; } return flag; } var InterValObj; //timer变量,控制时间 var count = 60; //间隔函数,1秒执行 var curCount;//当前剩余秒数 //获取验证码 function getIdentifyingCode() { document.getElementById("errorText").innerHTML = ""; if (!phoneVerification()) { document.getElementById("accountPhone").className = "form-control errorInput"; } else { document.getElementById("accountPhone").className = "form-control"; sendMessage(); } } function sendMessage() { curCount = count; //设置button效果,开始计时 $("#identifying").attr("disabled", "true");//倒计时灰色按钮(不可点击) $("#identifying").addClass("disablebtn"); document.getElementById("identifyingBtnText").innerHTML = curCount + "秒后重新发送"; InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次 //向后台发送处理数据 $.ajax({ type : "POST", contentType : "application/json", dataType : "json", url : "searchController.do?getValidateCode&phoneCode="+$("#accountPhone").val(), success : function(data) { alert(data.obj); }, error : function() { alert("抱歉,暂时无法为您提供这项服务。"); } }); } //timer处理函数 function SetRemainTime() { if (curCount == 0) { window.clearInterval(InterValObj);//停止计时器 $("#identifying").removeAttr("disabled");//启用按钮 $("#identifying").removeClass("disablebtn"); document.getElementById("identifyingBtnText").innerHTML = "重新发送"; } else { curCount--; document.getElementById("identifyingBtnText").innerHTML = curCount + "秒后重新发送"; } } function submitBinding() { $("#bindingDiv").hide(); if(!checkIdAndPhoneAndIdentifyingCode(2)){ $("#bindingDiv").show(); return; } if (!checkLogin()) { $("#bindingDiv").show(); return; } $("#bindingInformation").submit(); } /** *登录验证 */ function checkLogin() { var paperNumber = $("#paperNumber"); var accountPhone = $("#accountPhone"); var identifyingCode = $("#identifyingCode"); var flag = false; $.ajax({ type : "POST", contentType : "application/json", dataType : "json", async : false, url : "accountRegController.do?checklogin&paperNumber=" + paperNumber.val() + "&accountPhone=" + accountPhone.val() + "&identifyingCode=" + identifyingCode.val(), success : function(data) { flag = data.success; }, error : function() { alert("抱歉,暂时无法为您提供这项服务。"); flag = false; } }); return flag; }</script></html>
0 0
- 一段代码…………请无视
- 请无视
- 测试功能, 请无视。
- 如何从pastebin粘贴一段代码到putt…
- 一段代码(SAX, DOM, 或…
- [请无视]记录奇怪电话
- 关于值传递(高手请无视)
- 镇馆文(Dale请进,旁人请无视)
- 请说出下面一段代码的输出结果
- 面试题:请给出一段代码描述字符串写入文件
- 有以下一段代码,请选择其运行结果-牛客网
- 无视
- 大神可以无视—代码片测试
- 快速排序(小白入门专用,大神请无视)
- 一段代码
- 一段代码
- 一段代码
- 一段代码。。。
- LeetCode 9 Palindrome Number
- [JAVA · 初级]:20.IO流技术
- Android自定义View之圆形进度条
- 【UVa】11456 - Trainsorting
- 网络:XML 解析(使用GDataXMLNode第三方框架)
- 一段代码…………请无视
- 关于gitblit在window环境下的配置
- 第三章:表单应用
- CDOJ 1137 邱老师选妹子 数位dp
- Android自定义控件系列 十:利用添加自定义布局来搞定触摸事件的分发,解决组合界面中特定控件响应特定方向的事件
- 题目记录
- C语言---“自守数”问题
- 医学图像处理笔记(1)
- 常用正则表达式_转载