近日接到需要输入用户信息的同时进行信息脱敏的需求,平时的脱敏只在展示时用到过,边输入边脱敏,本小白直接蒙了。难点在于,vue动态绑定的值不能脱敏后传给后端,需要传输客户填写的真实数据。研究一番最后决定采用“双input框”方法,通过区分展示值和真实值的方式,让接口传真实值,而页面展示脱敏后的数据。
那么下面就分三部分介绍:
第一部分 脱敏JS方法
这里利用了vue的mixin
混入策略,将脱敏的方法写成公共的,方便其他模块公用。
export const mixins = {
//身份证脱敏
methods: {
//身份证号脱敏
setCertNo(certNo) {
if (certNo && certNo.length >= 10) {
var certNo = certNo.trim();
// let cert1 = certNo.substring(0, certNo.length-4);
// let cert2 = cert1 + "****";
// return cert2;
// let cert1 = certNo.replace(/(\w{6})\w{2}(\w{6})\w{4}/, '$1**$2****');
let cert1 = certNo.substring(0, 6) + '**' + certNo.substring(8, certNo.length - 4) + '****';
return cert1;
}else{
return certNo;
}
},
//手机脱敏
setTel(tel) {
if (tel && tel.length >= 11) {
var pat = /(\d{3})\d*(\d{4})/
let telFinal = tel.replace(pat, '$1****$2');
return telFinal
}else{
return tel;
}
},
//脱敏姓名 方式一,根据性别变成某女士或者某先生
setName(str, sex) {
if (str && sex) {
let str1 = str.substr(0, 1);