小程序身份证上传

效果自认很美,js逻辑不难,主要是各种状态的控制,重点在于页面代码。

下面是身份证正面的代码,反面代码类似。

wxml代码:

<view class="row">
    <view class="delete {{zhengShow?'show':'hidden'}}" bindtap="deleteZhengTap">
    <image src="../../imgs/delete.png" class="icon"></image>
    </view>
    <view class="zhong" bindtap="zhengTap">
     <image src="../../imgs/kuang.png" mode="widthFix" class="im1"></image>
     <image src="{{zhengimg}}" class="im2"></image>
    </view>
    <view class="add {{zhengShow?'show':'hidden'}}" bindtap="addZhengTap">
    <image src="../../imgs/add.png" class="icon"></image>
    </view>
  </view>

外层用relative,内层用absolute,从而实现图片在框里面。

wxss代码:

.row{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 40rpx;
}
.delete{
  flex: 1;
  text-align: center;
}
.show{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
.icon{
  width: 35rpx;
  height: 35rpx;
}
.zhong{
  flex: 5;
  position: relative;
}
.im1{
  position: absolute;
  width: 96%;
  margin-left: 2%;
}
.im2{
  width: 84%;
  height: 266rpx;
  margin-left: 8%;
  margin-top: 4%;
}
.add{
  flex: 1;
  text-align: center;
}

js代码:

  data: {
    zhengimg: "../../imgs/zheng.png",
    zhengShow: false
  },
  deleteZhengTap() {
    this.setData({
      zhengimg: "../../imgs/zheng.png",
      zhengShow: false
    })
  },
  zhengTap() {
    if ("../../imgs/zheng.png" == this.data.zhengimg) {
      this.chooseImgZheng();
    }
  },
  addZhengTap() {
    this.chooseImgZheng();
  },
  chooseImgZheng() {
    let that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths[0];
        that.setData({
          zhengimg: tempFilePaths,
          zhengShow: true
        })
      }
    })
  }

 

html+JavaScript架构 可以用在.asp .php .jsp的用户注册页面中 功能如下: 1.可以验证用户密码的安全级别并返回安全级别的等级 全部数字安全级别为低 数字+字母安全级别为中 数字+大小写字母安全级别为最高 并且密码不能为全角 或者特殊符号等 如果修改功能请修改 js下的passwordstrength.js 2.姓名验证 验证中国人的姓名 3.身份证验证根据用户提供的身份证信判断出省市,然后在判断....做到只能输入 正确的省份证信息才可以.... 判断身份证的方法比使用正则表达式更加准确详细请看 js中的 checkidcard.js 判断省份证的 js function checkIsChinese(str){ if (str.length < 2 || str.length > 15){ return "姓名长度不正确"; } var ret=true; for(var i=0;i<str.length;i++){ ret=ret && (str.charCodeAt(i)>=10000); } if (ret){ return "true"; } else{ return "请输入中文"; } } //www.jsphelp.com function parseIdCard(val) { var birthdayValue; var sexId; var sexText; if (15 == val.length) //15位身份证号码 { birthdayValue = val.charAt(6) + val.charAt(7); if (parseInt(birthdayValue) < 10) { birthdayValue = '20' + birthdayValue; } else { birthdayValue = '19' + birthdayValue; } birthdayValue = birthdayValue + '-' + val.charAt(8) + val.charAt(9) + '-' + val.charAt(10) + val.charAt(11); if (parseInt(val.charAt(14) / 2) * 2 != val.charAt(14)) { sexId = "1"; sexText = "男"; } else { sexId = "2"; sexText = "女"; } } if (18 == val.length) { //18位身份证号码 birthdayValue = val.charAt(6) + val.charAt(7) + val.charAt(8) + val.charAt(9) + '-' + val.charAt(10) + val.charAt(11) + '-' + val.charAt(12) + val.charAt(13); if (parseInt(val.charAt(16) / 2) * 2 != val.charAt(16)) { sexId = "1"; sexText = "男"; } else { sexId = "2"; sexText = "女"; } } //年龄 var dt1 = new Date(birthdayValue.replace("-", "/")); var dt2 = new Date(); var age = dt2.getFullYear() - dt1.getFullYear(); var m = dt2.getMonth() - dt1.getMonth(); if (m < 0) age--; return new Array(birthdayValue, sexId, sexText, age); } function checkIdcard(idcard){ idcard = idcard.toUpperCase(); var Errors=new Array("true","身份证号码位数不对!","身份证号码出生日期超出范围或含有非法字符!","身份证号码校验错误!","身份证号码中地区编码不正确!"); var area={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"} var idcard,Y,JYM; var S,M; var idcard_array = new Array(); idcard_array = idcard.split(""); if(idcard.length != 15 && idcard.length != 18) return Errors[1]; //if(idcard.length != 18) return Errors[1]; if (idcard.substr(0,6) == "000000" || idcard.substr(0,6) == "111111" || idcard.substr(0,6) == "222222" || idcard.substr(0,6) == "333333" || idcard.substr(0,6) == "444444" || idcard.substr(0,6) == "555555" || idcard.substr(0,6) == "666666" || idcard.substr(0,6) == "777777" || idcard.substr(0,6) == "888888" || idcard.substr(0,6) == "999999") return Errors[4]; if (idcard.substr(0,6) == "123456" || idcard.substr(0,6) == "234567" || idcard.substr(0,6) == "345678" || idcard.substr(0,6) == "456789" || idcard.substr(0,6) == "567890" || idcard.substr(0,6) == "012345" || idcard.substr(0,6) == "543210" || idcard.substr(0,6) == "432109" || idcard.substr(0,6) == "321098" || idcard.substr(0,6) == "210987" || idcard.substr(0,6) == "109876" || idcard.substr(0,6) == "098765" || idcard.substr(0,6) == "987654" || idcard.substr(0,6) == "876543" || idcard.substr(0,6) == "765432") return Errors[4]; if (idcard.substr(0,6) == "121212" || idcard.substr(0,6) == "131313" || idcard.substr(0,6) == "141414" || idcard.substr(0,6) == "151515" || idcard.substr(0,6) == "161616" || idcard.substr(0,6) == "171717" || idcard.substr(0,6) == "181818" || idcard.substr(0,6) == "191919" || idcard.substr(0,6) == "101010") return Errors[4]; if (idcard.substr(0,6) == "212121" || idcard.substr(0,6) == "232323" || idcard.substr(0,6) == "242424" || idcard.substr(0,6) == "252525" || idcard.substr(0,6) == "262626" || idcard.substr(0,6) == "272727" || idcard.substr(0,6) == "282828" || idcard.substr(0,6) == "292929" || idcard.substr(0,6) == "202020") return Errors[4]; if (idcard.substr(0,6) == "313131" || idcard.substr(0,6) == "323232" || idcard.substr(0,6) == "343434" || idcard.substr(0,6) == "353535" || idcard.substr(0,6) == "363636" || idcard.substr(0,6) == "373737" || idcard.substr(0,6) == "383838" || idcard.substr(0,6) == "393939" || idcard.substr(0,6) == "303030") return Errors[4]; if (idcard.substr(0,6) == "414141" || idcard.substr(0,6) == "424242" || idcard.substr(0,6) == "434343" || idcard.substr(0,6) == "454545" || idcard.substr(0,6) == "464646" || idcard.substr(0,6) == "474747" || idcard.substr(0,6) == "484848" || idcard.substr(0,6) == "494949" || idcard.substr(0,6) == "404040") return Errors[4]; if (idcard.substr(0,6) == "515151" || idcard.substr(0,6) == "525252" || idcard.substr(0,6) == "535353" || idcard.substr(0,6) == "545454" || idcard.substr(0,6) == "565656" || idcard.substr(0,6) == "575757" || idcard.substr(0,6) == "585858" || idcard.substr(0,6) == "595959" || idcard.substr(0,6) == "505050") return Errors[4]; if (idcard.substr(0,6) == "616161" || idcard.substr(0,6) == "626262" || idcard.substr(0,6) == "636363" || idcard.substr(0,6) == "646464" || idcard.substr(0,6) == "656565" || idcard.substr(0,6) == "676767" || idcard.substr(0,6) == "686868" || idcard.substr(0,6) == "696969" || idcard.substr(0,6) == "606060") return Errors[4]; if (idcard.substr(0,6) == "717171" || idcard.substr(0,6) == "727272" || idcard.substr(0,6) == "737373" || idcard.substr(0,6) == "747474" || idcard.substr(0,6) == "757575" || idcard.substr(0,6) == "767676" || idcard.substr(0,6) == "787878" || idcard.substr(0,6) == "797979" || idcard.substr(0,6) == "707070") return Errors[4]; if (idcard.substr(0,6) == "818181" || idcard.substr(0,6) == "828282" || idcard.substr(0,6) == "838383" || idcard.substr(0,6) == "848484" || idcard.substr(0,6) == "858585" || idcard.substr(0,6) == "868686" || idcard.substr(0,6) == "878787" || idcard.substr(0,6) == "898989" || idcard.substr(0,6) == "808080") return Errors[4]; if (idcard.substr(0,6) == "919191" || idcard.substr(0,6) == "929292" || idcard.substr(0,6) == "939393" || idcard.substr(0,6) == "949494" || idcard.substr(0,6) == "959595" || idcard.substr(0,6) == "969696" || idcard.substr(0,6) == "979797" || idcard.substr(0,6) == "989898" || idcard.substr(0,6) == "909090") return Errors[4]; if(area[parseInt(idcard.substr(0,2))]==null) return Errors[4]; switch(idcard.length){ case 15: if ((parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){ ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;//测试出生日期的合法性 } else{ ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//测试出生日期的合法性 } if(ereg.test(idcard)) return Errors[0]; else return Errors[2]; break; case 18: if ( parseInt(idcard.substr(6,4)) % 4 == 0 || (parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){ ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//闰年出生日期的合法性正则表达式 } else{ ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正则表达式 } if(ereg.test(idcard)){ S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3 ; Y = S % 11; M = "F"; JYM = "10X98765432"; M = JYM.substr(Y,1); if(M == idcard_array[17]) return Errors[0]; else return Errors[3]; } else return Errors[2]; break; default: return Errors[1]; break; } } function checkTwID(id){ //建立字母分数数组(A~Z) var city = new Array( 1,10,19,28,37,46,55,64,39,73,82, 2,11, 20,48,29,38,47,56,65,74,83,21, 3,12,30 ) id = id.toUpperCase(); // 使用「正规表达式」检验格式 if (id.search(/^[A-Z](1|2)\d{8}$/i) == -1) { return "身份证号码格式不对!"; } else { //将字符串分割为数组(IE必需这么做才不会出错) id = id.split(''); //计算总分 var total = city[id[0].charCodeAt(0)-65]; for(var i=1; i<=8; i++){ total += eval(id[i]) * (9 - i); } //补上检查码(最后一码) total += eval(id[9]); //检查比对码(余数应为0); if (total%10 == 0) { return "true"; } else { return "身份证号码格式不对!"; } } }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猴子学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值