银行卡号自动分段展示效果测试

向阳榆木

于 2023-06-10 11:23:00 发布

阅读量664

点赞数 6

文章标签： javascript java 可用性测试前端

本文链接：https://blog.youkuaiyun.com/qq_43323918/article/details/131139746

版权

使用前端代码实现

1.新建一个bankCard.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/Demo.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <title>银行卡号自动分段展示效果测试</title>
</head>
<body>

  <input type="text" id="card-number" name="card_number" maxlength="23" placeholder="请输入银行卡号">

  <button id="submit-button">提交</button><hr>

  <input type="text" id="card-number1" name="card_number" maxlength="23" value="6217359907710306789">


  <script src="js/Demo.js"></script>
</body>
</html>

2.创建一个Demo.css文件：

input[name=card_number] {
    width: 500px; /* 输入框宽度 */
    padding: 10px;
    font-size: 16px;
    border: solid 1px #ccc;
    background-color: #fff;
    letter-spacing: 0.5em; /* 字符间隔，表示每个字符之间留出 0.5 个空格的宽度 */
}
input[name=card_number]:focus {
    outline: none;
    border-color: #0071eb; /* 获得焦点时框体的颜色 */
}

3.创建一个Demo.js文件：


//输入每4位自动分段展示
$(function() {
    $('#card-number').on('input', function() {
      let val = $(this).val();
      // 去除非数字字符
      val = val.replace(/\D/g, '');
      // 插入空格
      val = val.replace(/(.{4})/g, '$1 ');
  
      $(this).val(val);
    });
  });
  
//回显时自动分段展示
//   $(function() {
//     let elem = $('#card-number1');
//     let val = elem.val();
//     // 去除非数字字符
//     val = val.replace(/\D/g, '');
//     // 插入空格
//     val = val.replace(/(.{4})/g, '$1 ');
  
//     elem.val(val);
//   });
  
  $(function() {
    let elem = $('#card-number1');
    // 设置初始值
    elem.val('6271007150000306789');
  
    function formatCardNumber(elem) {
      let val = elem.val();
      // 去除非数字字符
      val = val.replace(/\D/g, '');
      // 插入空格
      val = val.replace(/(.{4})/g, '$1 ');
      
      elem.val(val);
    }
  
    // 调用格式化函数
    formatCardNumber(elem);
  
    // 在需要的时候再次调用格式化函数
    elem.on('input', function() {
      formatCardNumber($(this));
    });
  });
  
const submitButton = document.getElementById("submit-button");

submitButton.addEventListener('click', () => {
    let cardNumberInput = document.getElementById("card-number");
    let cardNumberValue = cardNumberInput.value.replace(/\s/g, '');
    console.log('提交处理空格后='+cardNumberValue); // 在控制台输出处理后的银行卡号数据
    
    // 省略发送请求到服务器的逻辑...
});

4.大概的效果如下：
输入或回显卡号分段展示
以上仅仅是使用简单的前端代码实现银行卡的自动分段展示效果。

使用Java代码处理

新建一个BankCardDemoTest.java文件：

package cn.xyym.test;

/**
 * @Classname BankCardDemoTest
 * @Description 获取银行卡号实现自动分段效果输出
 * @Version 1.0.0
 * @Date 2023/6/10 10:40
 * @Author xiaopan
 */
public class BankCardDemoTest {
    public static void main(String[] args) {
                String s = "6271007150000306789";
                StringBuilder stringBuilder = new StringBuilder(s);

                int i = 4;
                while (i < stringBuilder.length()) {
                    stringBuilder.insert(i, ' ');
                    i += 5; // 每隔 5 个字符插入一个空格符
                }

                System.out.println("获取s值添加空格："+stringBuilder.toString());

                // 原来的值为 “6271007150000306789” ，现在将结果转化后修改回原始数据
                String s1 = stringBuilder.toString().replace(" ", "");

                System.out.println("去除空格后："+s1);
            }


    }