搜索到
9
篇与
前端
的结果
-
JS身份证校验代码实现 开发中我们经常需要校验数据信息，其中包含身份证与手机号等，校验数据合法性我们需要使用正则的方法进行校验文章目录索引身份证校验1. 简单校验校验15位纯数字或18位字符或以X结尾身份证，缺点该方法校验不完整//数据匹配合法返回true function checkIdNo(num){ if (!(/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/.test(num))) { return false; } return true }方法调用checkIdNo('4521266');//false checkIdNo('530124197312202026');//true2. 完整校验校验区域前缀及出身年月及性别等//数据匹配合法返回true const validateIdent = { aIdentityCode_City: { // 城市代码列表 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: "国外 " }, IdentityCode_isCardNo(card) {//检查号码是否符合规范，包括长度，类型 var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X if (reg.test(card) === false) { return false; } return true; }, IdentityCode_checkProvince(card) { //取身份证前两位，校验省份 var province = card.substr(0, 2); if (validateIdent.aIdentityCode_City[province] == undefined) { return false; } return true; }, IdentityCode_checkBirthday(card) { //检查生日是否正确，15位以'19'年份来进行补齐。 var len = card.length; //身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字 if (len == '15') { var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/; var arr_data = card.match(re_fifteen); // 正则取号码内所含出年月日数据 var year = arr_data[2]; var month = arr_data[3]; var day = arr_data[4]; var birthday = new Date('19' + year + '/' + month + '/' + day); return validateIdent.IdentityCode_verifyBirthday('19' + year, month, day, birthday); } //身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X if (len == '18') { var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/; var arr_data = card.match(re_eighteen); // 正则取号码内所含出年月日数据 var year = arr_data[2]; var month = arr_data[3]; var day = arr_data[4]; var birthday = new Date(year + '/' + month + '/' + day); return validateIdent.IdentityCode_verifyBirthday(year, month, day, birthday); } return false; }, IdentityCode_verifyBirthday(year, month, day, birthday) {//校验日期 ，15位以'19'年份来进行补齐。 var now = new Date(); var now_year = now.getFullYear(); //年月日是否合理 if (birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day) { //判断年份的范围（3岁到150岁之间) var time = now_year - year; if (time >= 3 && time <= 150) { return true; } return false; } return false; }, IdentityCode_checkParity(card) { //校验位的检测 card = validateIdent.IdentityCode_changeFivteenToEighteen(card); // 15位转18位 var len = card.length; if (len == '18') { var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'); var cardTemp = 0, i, valnum; for (i = 0; i < 17; i++) { cardTemp += card.substr(i, 1) * arrInt[i]; } valnum = arrCh[cardTemp % 11]; if (valnum == card.substr(17, 1)) { return true; } return false; } return false; }, IdentityCode_changeFivteenToEighteen(card) { //15位转18位身份证号 if (card.length == '15') { var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'); var cardTemp = 0, i; card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6); for (i = 0; i < 17; i++) { cardTemp += card.substr(i, 1) * arrInt[i]; } card += arrCh[cardTemp % 11]; return card; } return card; }, } function IdentityCodeValid(card) {// 身份证号码检验主入口 let pass = true; let sex = '' //是否为空 if (pass && card === '') pass = false; //校验长度，类型 if (pass && validateIdent.IdentityCode_isCardNo(card) === false) pass = false; //检查省份 if (pass && validateIdent.IdentityCode_checkProvince(card) === false) pass = false; //校验生日 if (pass && validateIdent.IdentityCode_checkBirthday(card) === false) pass = false; //检验位的检测 if (pass && validateIdent.IdentityCode_checkParity(card) === false) pass = false; if (pass) { var iCard = validateIdent.IdentityCode_changeFivteenToEighteen(card); if (parseInt(iCard.charAt(16)) % 2 == 0) { sex = "0"; // 女生 } else { sex = "1"; // 男生 } return true } else { return false } } 方法调用IdentityCodeValid('4521266');//false IdentityCodeValid('530124197312202026');//true3. 联网校验或人工校验则需要调用第三方api接口，一般需要付费使用，费用较高，可校验名字与身份证是否匹配并返回用户的基础信息。一般项目中，正常情况下情况下选择代码校验即可，推荐使用方法2：完整校验 -
实现漂亮的CSS条纹背景与边框 本文主要介绍如实使用css完成复杂的边框与背景，让你的网站添加色彩文章目录索引一、css边框1.css半透明边框我们使用rgba,halc方法来实现半透明，设定对象为borderhsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。HSLA 即色相、饱和度、亮度、透明度。(css3)rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。RGBA 即红色、绿色、蓝色、透明度(css3) /* 半透明边框 */ .tratnslucentborder{ width: 300px; height: 200px; border:10px solid rgba(155, 86, 97, 0.3);//半透明边框 background-image: url('./35.jpg'); background-clip: padding-box; background-size: contain; }2.css多重边框(1) 1outline 解决方案outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline简写属性在一个声明中设置所有的轮廓属性。(css2)适用于两层边框，样式可以设置成各种样式 /* outline解决方案 */ .outlinetwoline{ width: 300px; height: 200px; border:10px solid red; outline:5px solid black; border-radius: 12px; background-image: url('./35.jpg'); background-clip: padding-box; background-size: contain; }(2) box-shaow解决方案box-shadow 支持逗号分隔语法，可以创建多个实线边框(css3) /* 多重边框|box-shadow解决方案 */ .multipleborder{ width: 300px; height: 200px; border:10px solid red; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink; background-image: url('./35.jpg'); background-clip: padding-box; background-size: contain; }3.css边框内圆角outline不会随着圆角的变化而变化不会随着圆角的变化而变化，box-shadow会随着圆角的变化而变化 .borderInnerCircle{ width: 60%; height: 60%; background-color: blue; background-image: url('./36.png'); background-repeat: no-repeat; background-position: right 20px bottom 10px; border-radius: .8em; padding: 1em; box-shadow: 0 0 0 .6em #655; /* outline: .6em solid #655; 不会随着圆角的变化而变化*/ }二、css背景1.灵活的背景定位（1）background-position 的扩展语法方案background-position属性设置背景图像的起始位置。(css1) .backgroundposition{ width: 60%; height: 60%; background-color: blue; border:8px solid #655; background-image: url('./36.png'); background-repeat: no-repeat; background-position: right 20px bottom 10px;//右下 }（2）background-origin 的扩展语法方案background-Origin属性指定background-position属性应该是相对位置。如果背景图像background-attachment是"固定"，这个属性没有任何效果 .backgroundorgin{ width: 60%; height: 60%; background-color: blue; border:8px solid #655; padding: 10px; background: url("./36.png") left 17px bottom;//左下 background-color: blue; background-repeat: no-repeat; background-origin: content-box;//相对于content }2.css条纹背景(1)css水平无渐进条纹linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。(css3) .tiaowen{ width: 60%; height: 60%; background: linear-gradient(#788 50%,red 50%); /* background-size: 100% 20px; */ }(2)css垂直条纹规定方向为to right,或者90deg /* 垂直条纹 */ .verticalStripes{ width: 60%; height: 60%; background: linear-gradient(to right,#788 15px,red 15px); background-size: 30px 100%; }(3)css斜向条纹规定角度为45deg，或其他角度 .diagonalStripes{ width: 60%; height: 60%; background: linear-gradient(45deg,#788 25%,red 0,red 50%,#788 0,#788 75%,red 0); background-size: 30px 30px; } (4)更好的斜向条纹 .betterDiagonalStripes{ width: 60%; height: 60%; background: linear-gradient(45deg,#788 ,red 30px,#788 30px,red 60px,#788 60px,#788 120px,red 120px,#788 150px); background-size: 30px 30px; }(5)灵活的同色系条纹repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像" .flexibleStripes { width: 60%; height: 60%; background: #58a; background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px); }原文作者：雾灵原文链接：https://juejin.cn/post/6979003471072591909本文来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
-
【插件】UNI APP 实现商米打印机功能支持T1,T2,V2机型 uniapp 是目前比较主流的开发框架支持一套代码多端部署，本文主要讲解uniapp如何使用商米机型实现打印，扫码，开钱箱等功能实现文章索引适用机器本插件已测试商米机型 V2手持机 T1,T2 ，大家看好收银机牌子和机型，,商米收银机V2手持机 T1,T2！商米收银机V2 T1,T2！商米收银机V2 T1,T2！重要的事情要说3次，其他的机子尚未经过测试，如有问题可联系作者插件功能实现商超类型票据打印，适配58mm，80mm页面纸张类型实现收银机USB外接扫码枪获取商品条码，原理通过广播监听扫码数据，并回调通知收扫码结果，无需使用input组件。（解决input组件弹出键盘问题，失去焦点无法获取内容问题）钱箱功能切刀功能（仅支持有切刀的机型）台式机主副屏通信插件不足因为票据模板内容各方有不同的需求，无法满足各位的不同显示效果，同时为了考虑插件的易用性，尽可能封装好直接调用，大家也懒得再看一大堆的文档和参数。如何使用代码使用因为考虑需求比较简单所以再接口设计方面并未考虑太复杂1. 初始化插件//引用插件对象以来 const shangMiPrint = uni.requireNativePlugin('G5KJ-ShangMiPrint') const globalEvent = uni.requireNativePlugin('globalEvent'); //onLoad函数中执行始化插件 onLoad() { let _this=this; shangMiPrint.init(function(e){ uni.showModal({ content:"回调返回结果："+JSON.stringify(e) }) }) //扫码返回 globalEvent.addEventListener('scancode',function(e){ uni.showModal({ content:"回调返回结果："+JSON.stringify(e) }) _this.code=e.data }) }2. 类超市外卖小票打印//打印调用 let data={ title:"广西*****馆", subTitel:"收银小票单据", orderTotalPrice:"￥59", printUser:"收银员校长", orderId:"843905060353", saleRel:"0776-72939424 李亮", goods:[ { goodName:"植护牌压花纸纸巾/56抽", goodNum:'1', goodNo:'78905060353', goodPrice:'￥17', goodTotalPrice:'￥17' }, { goodName:"植护牌压花纸纸巾/56抽", goodNum:'1', goodNo:'78905060353', goodPrice:'￥17', goodTotalPrice:'￥17' }, ] } shangMiPrint.printTicket(data,function(e){ //打印返回结果：{code:ok} alert(JSON.stringify(e)) })打印字段字典说明data字段说明字段类型空默认注释titlevarchar(32)是 主标题subTitelvarchar(16)是 副标题orderTotalPricevarchar(20)是 实收总金额printUservarchar(20)是 收银员orderIdvarchar(32)是0订单/流水IDsaleRelvarchar(32)是0售后联系goodsarray()是0商品品列表data.goods对象字段说明字段类型空默认注释goodNamevarchar(32)是 商品名称goodNumvarchar(16)是 购买数量goodNovarchar(20)是 商品编号goodPricevarchar(20)是 商品单价goodTotalPricevarchar(32)是0合计总价3. 钱箱相关//打开钱箱 shangMiPrint.openDrawer(function(e){ // if(e.code=='ok'){ } }) //获取钱箱状态 shangMiPrint.getDrawerStatus(function(e){ //true正常 if(e.data==true){ } })4. 二维码票务打印 let printData = [] let _this = this let printTicketItem={ title: item.commodityName,//主标题 subTitle: item.saleName,//副标题 code: item.checkCode,//票码 indentId: item.indentId,// 订单Id useDate: _this.dateFormat(item.useTime, 'YYYY-MM-DD'),//使用时间 saleDate: _this.dateFormat(item.initime, 'YYYY-MM-DD'),//销售时间 'remark': '本门票仅限当天使用，欢迎您的到来' } shangMiPrint.printTicketTemplet({ templetId: 'LY01', cut: true, data: printData//传入数组 }, function(e) { //判断业务漏记 } ) 4. 主副屏通信//price 为空时，主动关闭副屏 shangMiPrint.showPriceText({ title: '总金额', content: '￥' + a, price: a + "" }, function() { } ); 客显效果图调用方法列表1. 插件初始化init(func)参数func：初始化成功回调2. 小票打印printTicket（data,func）参数data：打印数据参数func：执行回调结果3. 钱箱相关openDrawer（func）打开钱箱getDrawerStatus (func) 获取钱箱状态3. 二维码票务打印printTicketTemplet（func）打印带二维码小票（景区票务，排号码等使用）3. 主副屏通信显示价格showPriceText（func）显示价格（景区票务，排号码等使用）事件监听usb接口扫码枪返回条码scancode 事件监听回调 const globalEvent = uni.requireNativePlugin('globalEvent') onLoad(){ let _this=this globalEvent.addEventListener('scancode',function(e){ uni.showModal({ content:"回调返回结果："+JSON.stringify(e) }) //返回内容：{code:ok,data:'条码\n'} _this.code=e.data }) } 使用注意问题插件使用调试需要先自定义打包基座，在进行测试，自定义基座可查看官方教程。https://nativesupport.dcloud.net.cn/NativePlugin/use/use使用插件无法打包检查是否使用其他商米插件，同类型插件无法共同兼容使用插件下载云插件市场可免费试用，请试用没问题后在进行付费购买，购买后不做退款处理 ，因为钱不是打给我的 :@(吐血倒地)，有其他疑问请在博客中留言 商米内置打印机与扫码插件下载
-
npm新手使用教程 本文主要讲解前端构建工具npm的学习使用，旨在为初学者可以快速的进行使用，一、安装与初始化软件安装使用npm 需要安装nodejs,可到官网进行下载安装，安装推荐使用稳定版，下载后根据提示安装即可，本文不展开安装过程描述node下载地址： 点击去官网下载初始化git在使用 npm 之前，需要先对当前的目录进行初始化：npm init可以先运行 npm init -h 对init的参数做更详细的了解： npm init -h npm init Usage: npm init [--force|-f|--yes|-y|--scope] npm init <@scope> (same as `npx <@scope>/create`) npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`) aliases: create, innit Run "npm help init" for more info 这里面提示 npm help init 可以看到更多的操作指南，就不赘述了。直接运行 npm init 的时候，会有一步一步的提示，让开发者输入相应的信息。之后在当前目录就会产生我们熟悉的 package.json 文件了。如果不想这么麻烦，可以直接 npm init -y 来跳过输入步骤。建议在进行 npm 初始化之前，先对目录做 git 初始化，这样的好处是，在 npm init 时， repo 项会自动填充为 git 的 origin 源。 git init git remote add origin git://xxxxx 初始化总结在使用 npm 之前，应当使用 npm init 对目录进行初始化，创建 package.json 文件。使用 npm init -y 来跳过初始化交互过程。建议先进行 git init ，并配置好 origin 源。二、包管理安装npm包执行命令 npm install <package-name> #也可以简写为 npm i <package-name> 同时安装多个包npm i <package1> <package2> <package3> ...安装全局包 npm install -g <package-name> 三、依赖层级包有两个依赖层级： 项目依赖 和 开发依赖 。项目依赖的意思是，当前项目发布运行需要该包支持，那么在使用 webpack 之类进行打包时，该包应当被打入到最后的package中。比如 react redux antd 之类。此类包会标记在 package.json 中的 dependencies 字段。开发依赖中的包，当前项目对其不应有运行依赖，一般都是围绕项目编译、打包、集成等做辅助工作的周边工具。比如 webpack 以及各种 babel 插件。此类包会标记在 package.json 中的 devDependencies 字段。当然，在项目打包期间，打包工具会做 treeshake 动作来晃掉未使用的包，但维护一个严谨的package依赖关系，应当是前端在管理项目时要重点关注的事情，更何况 treeshake 也是有局限的。安装项目依赖npm install <package-name> npm install <package-name> --save npm install <package-name> -S # 安装开发依赖 npm install <package-name> --save-dev npm install <package-name> -D 一个真实的 package.json 代码：{ ... "dependencies": { "@babel/core": "^7.14.6", "@babel/plugin-transform-react-jsx": "^7.14.5", "chalk": "^2.4.2", "commander": "^7.2.0", "md5": "^2.3.0", "watch": "^1.0.2" }, "devDependencies": { "@types/babel__core": "^7.1.14", "@types/md5": "^2.3.0", "@types/watch": "^1.0.1", "ts-node": "^10.0.0", "typescript": "^4.3.4" } }四、卸载包# 卸载项目依赖 npm uninstall -S <package-name> # 卸载开发依赖 npm uninstall -D <package-name> # 卸载全局包 npm uninstall -g <package-name> 五、全局包就像 webpack-cli 或者 create-react-app 之类的工具，当 npm 安装其为全局时，这些包可以被当成一个工具，在 bash 命令中直接运行。安装全局包有几个地方需要注意：安装位置是否在环境变量中做了配置？否则会无法执行。一些类似nvm的工具，会对 -g 的包按 node 版本进行安装，切换 node 版本之后可能会找不到该包，或者出现问题1的情况。Mac系统中，如果是从官网下载dmg包安装，在安装 -g 时需要 sudo ，同样 uninstall 也需要 sudo 。建议使用 Homebrew 安装 node 。像 webpack ts-node tsc 这些工具，可安装为项目的开发依赖，通过 npm 运行，不必安装为 -g 。这样做的好处是， 项目与开发环境解耦 。下面是在开发依赖中配置 ts 编译器、在 scripts.build 中对 ts 文件进行编译的例子： { "scripts": { "build": "tsc ./src/*.ts --esModuleInterop -d -t ES5 --lib es5 --outDir dist" }, "devDependencies": { "typescript": "^4.3.4" } } package-lock.json用来锁定安装包的版本号。这个文件有可能造成一些问题，比如锁定的低版本已经从 npm 源下线了。所以当对版本没有强要求，或者是对包作者足够信赖时，我一般会把这个文件放入 .gitignore 。而需要锁定的版本，直接在 package.json 中写死。六、关于版本号版本号中 ^ 字符，经测试是不会跳大版本的。比如 npm i webpack@^3 ，只会安装webpack3的最新版本，并不会安装webpack4甚至webpack5。如果想安装最新版本，使用 @latest 版本号npm i <package-name>@latest转载声明本文原文出处： https://juejin.cn/post/6976843799574085669
