jquery 6位支付密码弹窗

原创于 2019-08-29 16:35:28 发布 · 758 阅读

2 ·

CC 4.0 BY-SA版权

html开发实践专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种改进的支付密码验证方法，解决了苹果端兼容性问题，通过HTML、CSS和JavaScript实现了密码输入界面，并在输入六位密码后触发AJAX请求进行密码验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开启免密支付的时候弹出支付密码验证，如果验证通过，则变更状态，反之提示更改失败，网上找了个网友的版本，但是不兼容苹果端，苹果网页输入的时候弹窗无法输入值，所以改进了一下。

实现效果：

html:

<input type="hidden" name="password" id="password">
	<input type="hidden" id="text" maxLength="6" />
	<div align="center" class="passpword_div" style="display: none">
		<div align="center" class="line1">
			<p>请输入支付密码</p>
		</div>
		<div class="input">
			<div class="box">
				<input type="text" maxLength="1" class="onestr1" readonly>
			</div>
			<div class="box">
				<input type="text" maxLength="1" class="onestr2" readonly>
			</div>
			<div class="box">
				<input type="text" maxLength="1" class="onestr3" readonly>
			</div>
			<div class="box">
				<input type="text" maxLength="1" class="onestr4" readonly>
			</div>
			<div class="box">
				<input type="text" maxLength="1" class="onestr5" readonly>
			</div>
			<div class="box">
				<input type="text" maxLength="1" class="onestr6" readonly>
			</div>
		</div>
	</div> 
	<div class="selectCarCon" style="left: 0px;display: none">
		<div class="block">
			<table>
				<tr>
					<td onclick="add(1)">1</td>
					<td onclick="add(2)">2</td>
					<td onclick="add(3)">3</td>
				</tr>
				<tr>
					<td onclick="add(4)">4</td>
					<td onclick="add(5)">5</td>
					<td onclick="add(6)">6</td>
				</tr>
				<tr>
					<td onclick="add(7)">7</td>
					<td onclick="add(8)">8</td>
					<td onclick="add(9)">9</td>
				</tr>
				<tr>
					<td class="td" style="font-size: 18px" onclick="close_bg()">关闭</td>
					<td onclick="add(0)">0</td>
					<td class="td" onclick="deletetd()"><image src="__STATIC__/express/images/delete.png" width=40px height=40px></image></td>
				</tr>
			</table>
		</div>
	</div>

css:

.line1 {font-size: 15px;color: #868585;margin-bottom: 8px;}
td{width: 33.3%;}
table {width: 100%;text-align: center;line-height: 2.3;font-size: 25px;background-color: #F8F8F8;border-collapse: collapse;}
table,table tr th,table tr td {border: 1px solid #E9E9E9;}
.selectCarCon {width: 100%;position: fixed;bottom: 0;z-index:10000;}
.block {display: block}
.td {background-color: #E6E6E6}
.box,.box input {height: 40px;width: 40px;}
.input {display: flex;justify-content: center;}
input {	font-size: 24px;text-align: center;border:1px solid #b4b4b4;border-right:1px solid rgba(255,255,255,0);}
.box:last-child input{border-right:1px solid #b4b4b4;}
.passpword_div{position: fixed;top:20%;width: 90%;left: 5%;background: #fff;padding:20px 0;z-index:10000;border-radius: 10px}

js:

function close_bg(){
	$(".selectCarCon").css({'display':'none'});
	$(".div_bg").css({'display':'none'});
	$(".passpword_div").css({'display':'none'});
}

function add(n) {
	var str = $("#text").val();
	var now = str.length+1;
	var newstr = "";
	console.log(str);
	$(".onestr"+now).val("*");
	if (str.length<6) {
		newstr = str + n;
		$("#text").val(newstr);			 
	}
	if (newstr.length == 6){
		var password = $("#text").val();
		$("#password").val(password);

		var auth_code = '{$Think.config.AUTH_CODE}';
		var paypwd = md5(auth_code + $.trim(password));

		$.ajax({
			type: 'GET',
			url: "{:url('mobile/express/open_pay_paswd')}",
			data:{password:paypwd,need_payment_password:'yes'},
			success:function(result){
				var result = eval("(" +result+ ")");
				layer.open({
					content: result.msg
					,skin: 'msg'
					,time: 2 //2秒后自动关闭
				});
				if(result.code == 200){
					$(".selectCarCon").css({'display':'none'});
					$(".div_bg").css({'display':'none'});
					$(".passpword_div").css({'display':'none'});
				}
			}
		})
	}
}

function deletetd(){		
	var str = $("#text").val();
	var newstr=str.slice(0,str.length-1);	
	$(".onestr"+str.length).val("");	
	$("#text").val(newstr);
}

原理：检测到输入密码等于6位触发提交ajax，进行行为更新和验证。

说明：md5方法是借用了md5.min.js对支付密码进行了加密，可不管；layer第三方弹窗插件，不必赘述；剩下的对返回结果的处理就是跟后台的交互，问题不大；