@ -0,0 +1,138 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
<meta content="telephone=no" name="format-detection" />
|
||||||
|
|
||||||
|
<link href="css/cardNumberBinding.css" tppabs="http://www.17sucai.com/preview/1089623/2018-06-08/form/css/style.css" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
|
||||||
|
<title>卡号绑定</title>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function (doc, win) {
|
||||||
|
var docEl = doc.documentElement,
|
||||||
|
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
|
||||||
|
recalc = function () {
|
||||||
|
var clientWidth = docEl.clientWidth;
|
||||||
|
if (!clientWidth) return;
|
||||||
|
if(clientWidth>=750){
|
||||||
|
docEl.style.fontSize = '100px';
|
||||||
|
}else{
|
||||||
|
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!doc.addEventListener) return;
|
||||||
|
win.addEventListener(resizeEvt, recalc, false);
|
||||||
|
doc.addEventListener('DOMContentLoaded', recalc, false);
|
||||||
|
})(document, window);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="Nav_bar">
|
||||||
|
<div class="left"><a href="#" onclick="history.go(-1)"><img src="images/cardNumberBinding2.png" ></a></div>
|
||||||
|
<div class="center">卡号绑定</div>
|
||||||
|
<div class="right"><img src="images/cardNumberBinding1.png"></div>
|
||||||
|
</div>
|
||||||
|
<!--中间内容部分-->
|
||||||
|
<div id="content">
|
||||||
|
<div class="txt01">银行卡号<input type="number" id="bankAccount" name="bankAccount" class="text" value="" pattern="[0-9]*" tabindex="10" onChange="check_for_btn()" /></div>
|
||||||
|
<div class="txt01">真实姓名<input type="text" id="realname" name="realname" class="text" tabindex="7" onChange="check_for_btn()" /></div>
|
||||||
|
<div class="txt01">身份证号
|
||||||
|
<input type="text" id="idNum" pattern="[0-9]*" name="idNum" class="text" tabindex="6"/>
|
||||||
|
</div>
|
||||||
|
<div class="txt01">预留手机号<input type="number" id="phoneNum" pattern="[0-9]*" name="phoneNum" class="text1" tabindex="6"/></div>
|
||||||
|
</div>
|
||||||
|
<button id="btn" class="r_but" onclick="check()">确定</button>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="js/jquery-1.8.3.min.js" tppabs="http://www.17sucai.com/preview/1089623/2018-06-08/form/js/jquery-1.8.3.min.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
//弹出框
|
||||||
|
function alert1(e) {
|
||||||
|
$("body").append("<div id='msg'><span>" + e + "</span></div>");
|
||||||
|
clearmsg();
|
||||||
|
}
|
||||||
|
|
||||||
|
//关闭弹出框
|
||||||
|
function clearmsg() {
|
||||||
|
var t = setTimeout(function() {
|
||||||
|
$("#msg").remove();
|
||||||
|
}, 2000)
|
||||||
|
};
|
||||||
|
|
||||||
|
// $("#btn").check(){
|
||||||
|
// if(bankNum!=""&&realname!=""&&idNum!=""&&phoneNum!=""){
|
||||||
|
// var userBank = {"bankNum":document.getElementById("bankNum").value,
|
||||||
|
// "realname":document.getElementById("realname").value,
|
||||||
|
// "idNum":document.getElementById("idNum").value,
|
||||||
|
// "phoneNum":document.getElementById("phoneNum").value,
|
||||||
|
// }
|
||||||
|
// var jsonStr = JSON.stringify(userBank);
|
||||||
|
// $.ajax({
|
||||||
|
// type:"POST",
|
||||||
|
// url:"bankCardController",
|
||||||
|
// dataType:"JSON",
|
||||||
|
// data:jsonStr
|
||||||
|
// })
|
||||||
|
// }else{
|
||||||
|
// alert("请检查您的输入!");
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
//提交后的check
|
||||||
|
function check() {
|
||||||
|
|
||||||
|
|
||||||
|
var phoneNum = $("#phoneNum").val();
|
||||||
|
var realname = $("#realname").val();
|
||||||
|
|
||||||
|
if(phoneNum == "") {
|
||||||
|
alert1("请输入手机号");
|
||||||
|
clearmsg();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if(!(/^1[34578]\d{9}$/.test(phoneNum))) {
|
||||||
|
alert1("请输入正确的手机号");
|
||||||
|
clearmsg();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if(realname == "") {
|
||||||
|
alert1("请输入姓名");
|
||||||
|
clearmsg();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$(".r_but").css("background", "#49b9eb");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//必填项没有全部填写时,灰色,全部填写时蓝色
|
||||||
|
function check_for_btn() {
|
||||||
|
var phoneNum = $("#phoneNum").val();
|
||||||
|
var realname = $("#realname").val();
|
||||||
|
if(realname == "" || phoneNum == null) {
|
||||||
|
$(".r_but").css("background", "#d1d5db");
|
||||||
|
}
|
||||||
|
if(realname != "" && phoneNum != null) {
|
||||||
|
$(".r_but").css("background", "#49b9eb");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
$(function() {
|
||||||
|
|
||||||
|
$(".r_but").css("background", "#d1d5db");
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,53 @@
|
|||||||
|
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'microsoft yahei','微软雅黑','abchanel-couture','华文细黑','STXHei','华文黑体','ST Heiti','MS黑体','MSHei','Arial','Helvetica','sans-serif';
|
||||||
|
background-color: #fff;
|
||||||
|
height: 100%;
|
||||||
|
max-width:7.5rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
li, ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
li, ul { list-style-type: none;}
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
a, a:hover, a:visited {text-decoration: none;}
|
||||||
|
a{color: #000;}
|
||||||
|
a:hover, a:focus{
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
#Nav_bar{height:0.88rem; padding:0 0.2rem; background:#2d2d2e; color:#fff; font-size:0.28rem;}
|
||||||
|
#Nav_bar .left{width:20%; height:0.63rem; float:left; padding-top:0.25rem;}
|
||||||
|
#Nav_bar .left img{ width:0.2rem; height:0.38rem;}
|
||||||
|
#Nav_bar .center{width:60%; height:0.88rem; float:left; font-size:0.36rem; text-align:center; line-height:0.88rem;}
|
||||||
|
#Nav_bar .right{width:20%; height:0.88rem; float:right; text-align:right; line-height:0.88rem;}
|
||||||
|
#Nav_bar .right img{ width:0.5rem; height:0.1rem;}
|
||||||
|
|
||||||
|
#content{width:6.9rem; overflow:auto; padding:0 0.3rem;}
|
||||||
|
#content .txt01{width:100%; min-height:1.08rem; border-bottom:#dfdfdf solid 0.01rem; float:left; line-height:1.08rem; color:#666; font-size:0.3rem;}
|
||||||
|
.r_but{ width:5.5rem; height:0.98rem; background:#49b9eb; line-height:0.98rem; border:none; font-size:0.32rem; color:#fff; text-align:center; margin-left:1rem;}
|
||||||
|
select,input,textarea{
|
||||||
|
font-size: 0.28rem;
|
||||||
|
color: #999;
|
||||||
|
width: 70%;
|
||||||
|
height: 1rem;
|
||||||
|
float: right;
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.txt01 label{float:right; width:13%; height:0.48rem; text-align:right; margin-top:0.3rem; vertical-align:middle; line-height:0.48rem; margin-left:0.8rem;}
|
||||||
|
.txt01 span{ margin-bottom:-0.1rem;}
|
||||||
|
.txt01 a{float:right; height:1rem; width:80%; text-align:right; color:#999;}
|
||||||
|
/*弹出框样式*/
|
||||||
|
#msg {height: 1em; text-align: center; position: fixed; top: 50%; margin-top: -1rem; line-height: 2rem; width: 100%; }
|
||||||
|
#msg span {color: #ffffff; background: rgba(0, 0, 0, 0.5); height: 1.5em; padding: 0.5em 1.5em; border-radius: 6px; font-size: 26px; font-family: "microsoft yahei"; }
|
||||||
|
#btn {border-radius: 6px;}
|
@ -1,4 +1,4 @@
|
|||||||
@charset 'utf-8';
|
@charset "utf-8";
|
||||||
html{color:#000;background:#FFF;font-family:'Microsoft YaHei',sans-serif,Arial;}
|
html{color:#000;background:#FFF;font-family:'Microsoft YaHei',sans-serif,Arial;}
|
||||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{padding:0;margin:0;font-family:'Microsoft YaHei',sans-serif,Arial;}
|
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{padding:0;margin:0;font-family:'Microsoft YaHei',sans-serif,Arial;}
|
||||||
table{border-collapse:collapse;border-spacing:0;}
|
table{border-collapse:collapse;border-spacing:0;}
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |