GitBucket
4.23.0
Toggle navigation
Sign in
Files
Branches
1
Releases
Issues
Pull requests
Labels
Priorities
Milestones
Wiki
Forks
yn-bftl-byx
/
thirdparty
Browse code
前端页面修改
master
1 parent
6163415
commit
20f01d53fac526b6dc9d2b243082e4c584ed6de8
steven
authored
on 10 Oct
Patch
Showing
1 changed file
src/main/resources/templates/passGuard.html
Ignore Space
Show notes
View
src/main/resources/templates/passGuard.html
<!DOCTYPE HTML> <html> <head> <title>H5密码控件Demo</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1,width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen"> <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no,email=no"> <link rel="stylesheet" type="text/css" href="./css/microdone-h5.css"> <link rel="stylesheet" type="text/css" href="./css/passGuard.css"> <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./js/demo.js"></script> <script type="text/javascript" src="./js/microdoneH5.js"></script> <script type="text/javascript"> var kb = new keyBoard({ "chaosMode": 0, // 混乱模式,0:无混乱;1:打开时乱一次;2:每输入一个字符乱一次,默认值0 "pressStatus": 1, // 按键状态,0:按下、抬起按键无变化;1:按下、抬起按键的颜色变化,默认值0 "kbType": 1, // 键盘类型,0:全键盘;1:纯数字键盘,默认值0 "svg": "svg",//svg图片的地址 "hasMap": "0",//是否调用mapping值：当为1时调用，当为非1时，不调用 "license": "b0JWK1NCeDRORVRCTFgvY3lzZWhZcEtWV0hYVlBtQ1IwOW5JVTBtUHFKMlNVODdTWGFRTWZqT04rY2JORkllZmVOekRsZHR6bE1CQkVGenhNUi80elhJelJGZHJLanY5R2JtN3N3M2ZLeE1QVVlzdG5vaFJuN1F6emhkVnVENjhIZmFGT3phdHJRdGJuMUd4ZG4rZUpHcGtJZ0ZWaFZhcVlTSnNZUDRmejZvPXsiaWQiOjAsInR5cGUiOiJ0ZXN0IiwicGxhdGZvcm0iOjEwLCJub3RiZWZvcmUiOiIyMDIwMTExNiIsIm5vdGFmdGVyIjoiMjAyMTAyMTYifQ==" }); //设置映射数组,此处为了方便demo演示，写死了，正常应该由 //服务器端下发映射数组 passGuard.mapArr = "Wyc0MycsICc1NycsICc3MScsICcxMjEnLCAnMTI2JywgJzEyNCcsICc5MCcsICcxMTInLCAnODknLCAnOTMnLCAnMTA1JywgJzgxJywgJzExMycsICcxMjUnLCAnNjgnLCAnMzgnLCAnODUnLCAnNjUnLCAnMTE4JywgJzgwJywgJzg3JywgJzkxJywgJzQ0JywgJzMzJywgJzc4JywgJzg4JywgJzk2JywgJzEwOScsICc2MScsICc2NicsICc0MCcsICc4MicsICc3MicsICcxMjAnLCAnOTUnLCAnMTEwJywgJzQ2JywgJzg2JywgJzEwNycsICc1MCcsICc3MCcsICc5OCcsICcxMTcnLCAnMzYnLCAnMTAxJywgJzgzJywgJzQ4JywgJzExNCcsICc2NycsICc3NycsICcxMDgnLCAnMTAwJywgJzM1JywgJzczJywgJzY5JywgJzk5JywgJzEwMicsICc3NicsICc3NScsICcxMDQnLCAnNDknLCAnOTInLCAnNjInLCAnNTgnLCAnNTMnLCAnNzknLCAnOTcnLCAnNDUnLCAnNDEnLCAnMTE5JywgJzEyMycsICc1MScsICc2MycsICc0NycsICcxMDYnLCAnMzknLCAnMTExJywgJzExNScsICczNCcsICc5NCcsICcxMjInLCAnNjQnLCAnNTknLCAnMTE2JywgJzM3JywgJzc0JywgJzU1JywgJzYwJywgJzU0JywgJzUyJywgJzQyJywgJzg0JywgJzEwMycsICc1Nidd"; var passGuard1 = new passGuard( { //"mappurl" : "./send_mapping.jsp",//此处为了前端演示而屏蔽了，正常开发中需要此参数，该地址由后台人员提供 "fixed": "H5fixed",//当fixed接口添加时，代表该输入框在fixed覆盖层上且覆盖层的ID为接口的值(在demo中覆盖层ID为"H5fixed") "maxLength": 6, // 最大输入长度 "regExp1": "[\\S\\s]", // 输入过程限制的正则 "regExp2": "[\\S\\s]{1,6}", "displayMode": 0, // 显示形式,0:星号;1:明文,默认值0 "callBack": cb1, //成功回调 "errorCallBack": cb2, //失败回调 "focus": inputFocus1,//H5键盘获取焦点回调 "blur": inputBlur1,//H5键盘失去焦点回调 "rsaPublicKey": "30818902818100ac7916eeb5cc45b22e8a20ebb2cb11ac6b76678564300b70c3f09f8c0cb92076499556c2d60fa02a78d2d3d94a559ee5f65f5f89a94da88e5cade3bf6a412e4832d7380958fee0c9fe959a1e4c45c8c037a04f693210bb76fa0a3a9dbf3bee803e1365572b03848a7aa2e547257e5a8461073fd15b68b381f5bd76ec7fbc4d230203010001" // rsa公钥 }); var passGuard2 = new passGuard( { //"mappurl" : "./send_mapping.jsp",//此处为了前端演示而屏蔽了，正常开发中需要此参数，该地址由后台人员提供 "maxLength": 12, // 最大输入长度 "regExp1": "[\\S\\s]", // 输入过程限制的正则 "regExp2": "[\\S\\s]{6,12}", "displayMode": 0, // 显示形式,0:星号;1:明文,默认值0 "callBack": cb3, //成功回调 "errorCallBack": cb4, //失败回调 "focus": inputFocus2,//H5键盘获取焦点回调 "blur": inputBlur2,//H5键盘失去焦点回调 "rsaPublicKey": "30818902818100ac7916eeb5cc45b22e8a20ebb2cb11ac6b76678564300b70c3f09f8c0cb92076499556c2d60fa02a78d2d3d94a559ee5f65f5f89a94da88e5cade3bf6a412e4832d7380958fee0c9fe959a1e4c45c8c037a04f693210bb76fa0a3a9dbf3bee803e1365572b03848a7aa2e547257e5a8461073fd15b68b381f5bd76ec7fbc4d230203010001" // rsa公钥 }); var passGuard3 = new passGuard( { //"mappurl" : "./send_mapping.jsp",//此处为了前端演示而屏蔽了，正常开发中需要此参数，该地址由后台人员提供 "jump": 1, //是否用添加删除回调：1代表使用，0代表不使用(可用于6个格子) "add": tianjia, //输入框值添加回调,当jump为1时，才有回调 "del": jianshao, //输入框值减少回调,当jump为1时，才有回调 "fixed": "H5fixed",//当fixed接口添加时，代表该输入框在fixed覆盖层上且覆盖层的ID为接口的值(在demo中覆盖层ID为"H5fixed") "maxLength": 6, // 最大输入长度 "regExp1": "[\\S\\s]", // 输入过程限制的正则 "regExp2": "[\\S\\s]{6,12}", "displayMode": 0, // 显示形式,0:星号;1:明文,默认值0 "callBack": cb5, //成功回调 "errorCallBack": cb6, //失败回调 "focus": inputFocus3,//H5键盘获取焦点回调 "blur": inputBlur3,//H5键盘失去焦点回调 "rsaPublicKey": "30818902818100ac7916eeb5cc45b22e8a20ebb2cb11ac6b76678564300b70c3f09f8c0cb92076499556c2d60fa02a78d2d3d94a559ee5f65f5f89a94da88e5cade3bf6a412e4832d7380958fee0c9fe959a1e4c45c8c037a04f693210bb76fa0a3a9dbf3bee803e1365572b03848a7aa2e547257e5a8461073fd15b68b381f5bd76ec7fbc4d230203010001" // rsa公钥 }); function cb1() { console.log("passGuard1输入的密码匹配regExp2"); } function cb2() { console.log("passGuard1输入的密码不匹配regExp2"); } function cb3() { console.log("passGuard2输入的密码匹配regExp2"); } function cb4() { console.log("passGuard2输入的密码不匹配regExp2"); } function cb5() { console.log("passGuard3输入的密码匹配regExp2"); } function cb6() { console.log("passGuard3输入的密码不匹配regExp2"); } function inputFocus1() { console.log("passGuard1输入框获得焦点"); } function inputBlur1() { console.log("passGuard1输入框失去焦点"); } function inputFocus2() { console.log("passGuard2输入框获得焦点"); } function inputBlur2() { console.log("passGuard2输入框失去焦点"); } function inputFocus3() { console.log("passGuard3输入框获得焦点"); } function inputBlur3() { console.log("passGuard3输入框失去焦点"); } function tianjia(xh) { //xh为密码的长度 $(".kb3>li").eq(xh - 1).append($("<p class='yuan'></p>")); if (xh == 6) { kb.hide(); } } function jianshao(xh) { $(".kb3>li").eq(xh).html(""); } </script> </head> <body> <div style="background-color: #f2f2f2; height: 100%"> <div style=" margin: 20px; box-shadow: 0px 1px 16px 0px rgba(54, 54, 54, 0.13); border-radius: 14px; display: flex; flex-direction: column; justify-content: center; padding: 20px; background-color: #fff; " > <div style=" font-family: PingFang SC; font-weight: bold; color: #323232; margin-bottom: 20px; " > <span>重置信息</span> </div> <div class="basic-info-input"> <span class="relative"><sup class="required absolute">*</sup>新支付密码</span> <input type="text" readonly="readonly" id="kb1" name="input3" placeholder="请输入密码" class="default NoneInput90" maxlength="50" tabindex="3" /> <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard1.generate("kb1", kb, "passGuard1", 1); </script> </div> <div class="basic-info-input"> <span class="nowrap">验证码</span> <!-- <input type="text" id="kb2" readonly="readonly" name="input3" placeholder="请输入新密码" class="default NoneInput90" maxlength="50" tabindex="3"/> --> <input type="text" id="verifCode" onfocus="kb.hide();" class="de2 NoneInput90" maxlength="6" /> <!-- <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard2.generate("kb2", kb, "passGuard2", 0); </script> --> <button class="nowrap blue no-border" id="sendCodeBtn" onclick="postMessage('getVerifCode')">获取验证码</button> </div> <div class="flex-row flex-align-center"> <img src="./svg/wenhao.svg" style="width: 14px" alt="" srcset=""> <span class="color666 font14 margin-left-5">验证码短信向绑定账户的手机号码发送</span> </div> </div> <div style="padding: 0 20px; margin-top: 25px"> <button style=" background: #ffffff; border: 1px solid #4a74ff; border-radius: 19px; padding: 10px; display: flex; justify-content: center; align-items: center; width: 100%; " onclick="postMessage('submit')" > <span style=" font-size: 15px; font-family: PingFang SC; font-weight: 500; color: #4a74ff; " >提交</span > </button> </div> </div> <script type="text/javascript"> let globalData = null; let countdown = null; // 用来保存倒计时的 interval ID window.onload = function () { Le = $(".default").length; for (var i = 1; i <= Le; i++) { $("#kb" + i).val(""); }; setTimeout(function () { kb.generate(); Show = 0; }, 100); }; // 监听获取 父级react native 传过来的数据 window.addEventListener("message", (event) => { globalData = JSON.parse(event.data); console.log('message????',data.message); // 输出 'Hello WebView!' console.log('user????',data.user); // 输出 'BigFar' }); // 验证码倒计时 function startCountdown() { const sendCodeBtn = document.getElementById('sendCodeBtn'); let seconds = 6; // 倒计时秒数 // 禁用按钮并开始倒计时 sendCodeBtn.disabled = true; sendCodeBtn.innerText = '重新发送 (' + seconds + ')'; countdown = setInterval(() => { seconds--; sendCodeBtn.innerText = '重新发送 (' + seconds + ')'; if (seconds <= 0) { clearInterval(countdown); // 清除倒计时 sendCodeBtn.disabled = false; sendCodeBtn.innerText = '获取验证码'; // 恢复按钮文字 } }, 1000); // 每秒更新一次 }; // 触发通讯 向react native传递 function postMessage(eventType='',data={}) { var miwen = passGuard1.getOutput(); var postData = null; var postDataStr = ''; console.log('eventType????',eventType); console.log('miwen????',miwen); console.log('globalData?????',globalData); // if (window.ReactNativeWebView) { switch (eventType) { case 'getVerifCode': alert('getVerifCode'); this.startCountdown(); postData = {eventType}; postDataStr = JSON.stringify(postData) window.ReactNativeWebView.postMessage(postDataStr); break; case 'submit': alert('submitNew11???'); let verifCode = document.getElementById('verifCode').value; postData = {eventType,miwen,verifCode}; postDataStr = JSON.stringify(postData) console.log('postData?????',postData); console.log('postDataStr?????',postDataStr); console.log('verifCode?????',verifCode); window.ReactNativeWebView.postMessage(postDataStr); break; default: break; } // } else { // alert('无法与React Native通信'); // } }; </script> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>H5密码控件Demo</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1,width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen"> <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no,email=no"> <link rel="stylesheet" type="text/css" href="./css/microdone-h5.css"> <link rel="stylesheet" type="text/css" href="./css/passGuard.css"> <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./js/demo.js"></script> <script type="text/javascript" src="./js/microdoneH5.js"></script> <script type="text/javascript"> var kb = new keyBoard({ "chaosMode": 0, // 混乱模式,0:无混乱;1:打开时乱一次;2:每输入一个字符乱一次,默认值0 "pressStatus": 1, // 按键状态,0:按下、抬起按键无变化;1:按下、抬起按键的颜色变化,默认值0 "kbType": 1, // 键盘类型,0:全键盘;1:纯数字键盘,默认值0 "svg": "svg",//svg图片的地址 "hasMap": "0",//是否调用mapping值：当为1时调用，当为非1时，不调用 "license": "b0JWK1NCeDRORVRCTFgvY3lzZWhZcEtWV0hYVlBtQ1IwOW5JVTBtUHFKMlNVODdTWGFRTWZqT04rY2JORkllZmVOekRsZHR6bE1CQkVGenhNUi80elhJelJGZHJLanY5R2JtN3N3M2ZLeE1QVVlzdG5vaFJuN1F6emhkVnVENjhIZmFGT3phdHJRdGJuMUd4ZG4rZUpHcGtJZ0ZWaFZhcVlTSnNZUDRmejZvPXsiaWQiOjAsInR5cGUiOiJ0ZXN0IiwicGxhdGZvcm0iOjEwLCJub3RiZWZvcmUiOiIyMDIwMTExNiIsIm5vdGFmdGVyIjoiMjAyMTAyMTYifQ==" }); //设置映射数组,此处为了方便demo演示，写死了，正常应该由 //服务器端下发映射数组 passGuard.mapArr = "Wyc0MycsICc1NycsICc3MScsICcxMjEnLCAnMTI2JywgJzEyNCcsICc5MCcsICcxMTInLCAnODknLCAnOTMnLCAnMTA1JywgJzgxJywgJzExMycsICcxMjUnLCAnNjgnLCAnMzgnLCAnODUnLCAnNjUnLCAnMTE4JywgJzgwJywgJzg3JywgJzkxJywgJzQ0JywgJzMzJywgJzc4JywgJzg4JywgJzk2JywgJzEwOScsICc2MScsICc2NicsICc0MCcsICc4MicsICc3MicsICcxMjAnLCAnOTUnLCAnMTEwJywgJzQ2JywgJzg2JywgJzEwNycsICc1MCcsICc3MCcsICc5OCcsICcxMTcnLCAnMzYnLCAnMTAxJywgJzgzJywgJzQ4JywgJzExNCcsICc2NycsICc3NycsICcxMDgnLCAnMTAwJywgJzM1JywgJzczJywgJzY5JywgJzk5JywgJzEwMicsICc3NicsICc3NScsICcxMDQnLCAnNDknLCAnOTInLCAnNjInLCAnNTgnLCAnNTMnLCAnNzknLCAnOTcnLCAnNDUnLCAnNDEnLCAnMTE5JywgJzEyMycsICc1MScsICc2MycsICc0NycsICcxMDYnLCAnMzknLCAnMTExJywgJzExNScsICczNCcsICc5NCcsICcxMjInLCAnNjQnLCAnNTknLCAnMTE2JywgJzM3JywgJzc0JywgJzU1JywgJzYwJywgJzU0JywgJzUyJywgJzQyJywgJzg0JywgJzEwMycsICc1Nidd"; var passGuard1 = new passGuard( { //"mappurl" : "./send_mapping.jsp",//此处为了前端演示而屏蔽了，正常开发中需要此参数，该地址由后台人员提供 "fixed": "H5fixed",//当fixed接口添加时，代表该输入框在fixed覆盖层上且覆盖层的ID为接口的值(在demo中覆盖层ID为"H5fixed") "maxLength": 12, // 最大输入长度 "regExp1": "[\\S\\s]", // 输入过程限制的正则 "regExp2": "[\\S\\s]{6,12}", "displayMode": 0, // 显示形式,0:星号;1:明文,默认值0 "callBack": cb1, //成功回调 "errorCallBack": cb2, //失败回调 "focus": inputFocus1,//H5键盘获取焦点回调 "blur": inputBlur1,//H5键盘失去焦点回调 "rsaPublicKey": "30818902818100ac7916eeb5cc45b22e8a20ebb2cb11ac6b76678564300b70c3f09f8c0cb92076499556c2d60fa02a78d2d3d94a559ee5f65f5f89a94da88e5cade3bf6a412e4832d7380958fee0c9fe959a1e4c45c8c037a04f693210bb76fa0a3a9dbf3bee803e1365572b03848a7aa2e547257e5a8461073fd15b68b381f5bd76ec7fbc4d230203010001" // rsa公钥 }); var passGuard2 = new passGuard( { //"mappurl" : "./send_mapping.jsp",//此处为了前端演示而屏蔽了，正常开发中需要此参数，该地址由后台人员提供 "maxLength": 12, // 最大输入长度 "regExp1": "[\\S\\s]", // 输入过程限制的正则 "regExp2": "[\\S\\s]{6,12}", "displayMode": 0, // 显示形式,0:星号;1:明文,默认值0 "callBack": cb3, //成功回调 "errorCallBack": cb4, //失败回调 "focus": inputFocus2,//H5键盘获取焦点回调 "blur": inputBlur2,//H5键盘失去焦点回调 "rsaPublicKey": "30818902818100ac7916eeb5cc45b22e8a20ebb2cb11ac6b76678564300b70c3f09f8c0cb92076499556c2d60fa02a78d2d3d94a559ee5f65f5f89a94da88e5cade3bf6a412e4832d7380958fee0c9fe959a1e4c45c8c037a04f693210bb76fa0a3a9dbf3bee803e1365572b03848a7aa2e547257e5a8461073fd15b68b381f5bd76ec7fbc4d230203010001" // rsa公钥 }); var passGuard3 = new passGuard( { //"mappurl" : "./send_mapping.jsp",//此处为了前端演示而屏蔽了，正常开发中需要此参数，该地址由后台人员提供 "jump": 1, //是否用添加删除回调：1代表使用，0代表不使用(可用于6个格子) "add": tianjia, //输入框值添加回调,当jump为1时，才有回调 "del": jianshao, //输入框值减少回调,当jump为1时，才有回调 "fixed": "H5fixed",//当fixed接口添加时，代表该输入框在fixed覆盖层上且覆盖层的ID为接口的值(在demo中覆盖层ID为"H5fixed") "maxLength": 6, // 最大输入长度 "regExp1": "[\\S\\s]", // 输入过程限制的正则 "regExp2": "[\\S\\s]{6,12}", "displayMode": 0, // 显示形式,0:星号;1:明文,默认值0 "callBack": cb5, //成功回调 "errorCallBack": cb6, //失败回调 "focus": inputFocus3,//H5键盘获取焦点回调 "blur": inputBlur3,//H5键盘失去焦点回调 "rsaPublicKey": "30818902818100ac7916eeb5cc45b22e8a20ebb2cb11ac6b76678564300b70c3f09f8c0cb92076499556c2d60fa02a78d2d3d94a559ee5f65f5f89a94da88e5cade3bf6a412e4832d7380958fee0c9fe959a1e4c45c8c037a04f693210bb76fa0a3a9dbf3bee803e1365572b03848a7aa2e547257e5a8461073fd15b68b381f5bd76ec7fbc4d230203010001" // rsa公钥 }); function cb1() { console.log("passGuard1输入的密码匹配regExp2"); } function cb2() { console.log("passGuard1输入的密码不匹配regExp2"); } function cb3() { console.log("passGuard2输入的密码匹配regExp2"); } function cb4() { console.log("passGuard2输入的密码不匹配regExp2"); } function cb5() { console.log("passGuard3输入的密码匹配regExp2"); } function cb6() { console.log("passGuard3输入的密码不匹配regExp2"); } function inputFocus1() { console.log("passGuard1输入框获得焦点"); } function inputBlur1() { console.log("passGuard1输入框失去焦点"); } function inputFocus2() { console.log("passGuard2输入框获得焦点"); } function inputBlur2() { console.log("passGuard2输入框失去焦点"); } function inputFocus3() { console.log("passGuard3输入框获得焦点"); } function inputBlur3() { console.log("passGuard3输入框失去焦点"); } function tianjia(xh) { //xh为密码的长度 $(".kb3>li").eq(xh - 1).append($("<p class='yuan'></p>")); if (xh == 6) { kb.hide(); } } function jianshao(xh) { $(".kb3>li").eq(xh).html(""); } </script> </head> <body> <!-- <form id="form1" name="form1" method="post" action="return false;"> <div id="Main"> <div id="TitleBar"> <div id="LogoBg_Topbar"> 北京微通新成手机网银H5密码控件Demo </div> <div id="LoginTab"> <div class="on"> 修改密码场景 </div> </div> </div> <div id="InputBlock"> <div id="InputInfoTable"> <div class="line5px"></div> <table class="InputLine"> <tbody> <tr> <td class="left" align="right"> <table class="AutoAlignLabel"> <tr> <td class="BeginWord"> 账 </td> <td class="EndWord"> 号 </td> </tr> </table> </td> <td class="right" align="left"> <input type="text" value="tester" id="username2" onfocus="kb.hide();" name="username" class="de2 NoneInput90" maxlength="50" tabindex="1" /> </td> </tr> </tbody> </table> <div class="line0px"></div> <table class="InputLine"> <tbody> <tr> <td class="left" align="right"> <table class="AutoAlignLabel"> <tr> <td class="BeginWord"> 旧 </td> <td class="MidWord"> 密 </td> <td class="EndWord"> 码 </td> </tr> </table> </td> <td class="right" align="left" style="position: relative;"> <input type="text" readonly="readonly" id="kb1" name="input3" placeholder="请输入密码" class="default NoneInput90" maxlength="50" tabindex="3" /> <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard1.generate("kb1", kb, "passGuard1", 1); </script> </td> </tr> </tbody> <tbody> <tr> <td class="left" align="right"> <table class="AutoAlignLabel"> <tr> <td class="BeginWord"> 新 </td> <td class="MidWord"> 密 </td> <td class="EndWord"> 码 </td> </tr> </table> </td> <td class="right" align="left" style="position: relative;"> <input type="text" id="kb2" readonly="readonly" name="input3" placeholder="请输入新密码" class="default NoneInput90" maxlength="50" tabindex="3" /> <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard2.generate("kb2", kb, "passGuard2", 0); </script> </td> </tr> </tbody> <tbody> <tr> <td class="left" align="right"> <table class="AutoAlignLabel"> <tr> <td class="BeginWord"> 确 </td> <td class="MidWord"> 认 </td> <td class="MidWord"> 新 </td> <td class="MidWord"> 密 </td> <td class="EndWord"> 码 </td> </tr> </table> </td> <td class="right" align="left" style="position: relative;"> <input type="text" id="kb3" readonly="readonly" name="input3" placeholder="请输入确认密码" class="default NoneInput90" maxlength="50" tabindex="3" /> <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard3.generate("kb3", kb, "passGuard3", 0); </script> </td> </tr> </tbody> </table> <br /> <div id="LoginBar"> <table id="LoginBtn" ontouchstart="javascript:kb.hide();" onclick="javascript:formSubmit();"> <tr> <td> 提交 </td> </tr> </table> </div> </div> </div> </div> <input type="hidden" name="password" id="password" value="" /> <input type="hidden" name="repassword" id="repassword" value="" /> </form> --> <div style="background-color: #f2f2f2; height: 100%"> <div style=" margin: 20px; box-shadow: 0px 1px 16px 0px rgba(54, 54, 54, 0.13); border-radius: 14px; display: flex; flex-direction: column; justify-content: center; padding: 20px; background-color: #fff; " > <div style=" font-family: PingFang SC; font-weight: bold; color: #323232; margin-bottom: 20px; " > <span>重置信息</span> </div> <div class="basic-info-input"> <span class="relative"><sup class="required absolute">*</sup>新支付密码</span> <input type="text" readonly="readonly" id="kb1" name="input3" placeholder="请输入密码" class="default NoneInput90" maxlength="50" tabindex="3" /> <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard1.generate("kb1", kb, "passGuard1", 1); </script> </div> <div class="basic-info-input"> <span class="nowrap">验证码</span> <input type="text" id="kb2" readonly="readonly" name="input3" placeholder="请输入新密码" class="default NoneInput90" maxlength="50" tabindex="3" /> <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard2.generate("kb2", kb, "passGuard2", 0); </script> <span class="nowrap blue" onclick="postMessage('getVerifCode')">获取验证码</span> </div> <div class="flex-row flex-align-center"> <img src="./svg/wenhao.svg" style="width: 14px" alt="" srcset=""> <span class="color666 font14 margin-left-5">验证码短信向绑定账户的手机号码发送</span> </div> <!-- <div class="basic-info-input"> <span>设置密码</span> <input type="text" id="kb3" readonly="readonly" name="input3" placeholder="请输入确认密码" class="default NoneInput90" maxlength="50" tabindex="3" /> <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard3.generate("kb3", kb, "passGuard3", 1); </script> </div> --> </div> <div style="padding: 0 20px; margin-top: 25px"> <button style=" background: #ffffff; border: 1px solid #4a74ff; border-radius: 19px; padding: 10px; display: flex; justify-content: center; align-items: center; width: 100%; " onclick="postMessage('submit')" > <span style=" font-size: 15px; font-family: PingFang SC; font-weight: 500; color: #4a74ff; " >提交</span > </button> </div> </div> <script type="text/javascript"> window.onload = function () { Le = $(".default").length; for (var i = 1; i <= Le; i++) { $("#kb" + i).val(""); }; setTimeout(function () { kb.generate(); Show = 0; }, 100); }; /** * 登录场景表单提交方法 */ function formSubmit(){ //判断密码长度 /*if(passGuard1.getLength()==0){ alert("原密码不能为空！"); return false; } if(passGuard2.getLength()==0){ alert("新密码不能为空！"); return false; } if(passGuard3.getLength()==0){ alert("确认密码不能为空！"); return false; }*/ //判断密码是否匹配正则 /*if(passGuard2.getValid()==1){ alert("新密码不符合要求！"); return false; } if(passGuard3.getValid()==1){ alert("确认密码不符合要求！"); return false; } //比对新密码和确认密码 if(passGuard2.getHash() != passGuard3.getHash()){ alert("新密码和确认密码不一致！"); return false; }*/ //设置32位随机因子,此处为了demo方便演示，写死了，正常应用后台随机下发。 passGuard1.setRandKey("20180911102848206839527896154835"); passGuard2.setRandKey("20180911102848206839527896154835"); //获取密文 var miwen1 = passGuard1.getOutput(); var miwen2 = passGuard2.getOutput(); _$("kb1").value = ""; _$("kb2").value = ""; // _$("kb3").value = ""; // for(var i=1;i<=3;i++){//PH.arrPlace-->H5输入框的placeholder数组；PH.arrId-->H5输入框的id数组 // $("#"+PH.arrId[i-1]).attr('placeholder',PH.arrPlace[i-1]); // } return {miwen1,miwen2} }; // 触发通讯 向react native传递 function postMessage(eventType='',data={}) { console.log('eventType????',eventType); console.log('this????',this.formSubmit()); if (window.ReactNativeWebView) { switch (eventType) { case 'getVerifCode': alert('getVerifCode') window.ReactNativeWebView.postMessage("getVerifCode",data); break; case 'submit': alert('submit') var miwenData = this.formSubmit() console.log('miwenData?????',miwenData); window.ReactNativeWebView.postMessage("submit",data); break; default: break; } } else { alert('无法与React Native通信'); } }; </script> </body> </html>
Show line notes below
GitBucket
4.23.0
GitBucket
4.23.0