标签 - JavaScript 共找到结果 14 条

号码组成

中华人民共和国国家标准 GB 11643-1999《公民身份号码》中规定:公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成。

公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成。排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码。

  1. 地址码表示编码对象常住户口所在县(市、旗、区)的行政区划代码,按 GB/T 2260 的规定执行。

  2. 出生日期码表示编码对象出生的年、月、日,按 GB/T 7408 的规定执行。年、月、日代码之间不用分隔符。(例:某人出生日期为 1966 年 10 月 26 日,其出生日期码为 19661026。)

  3. 顺序码表示在同一地址码所标识的区域范围内,对同年、同月、同日出生的人编定的顺序号,顺序码的奇数分配给男性,偶数分配给女性。

  4. 校检码是根据前面十七位数字码,按照公式计算出来的检验码。

计算方法

  1. 将前面的身份证号码 17 位数分别乘以不同的系数,从第一位到第十七位的系数分别为:7 9 10 5 8 4 2 1 6 3 7 9 10 5 8 4 2 ;

  2. 将这 17 位数字和系数相乘的结果相加;

  3. 用加出来和除以 11,看余数是多少;

  4. 余数只可能有 0 1 2 3 4 5 6 7 8 9 10 这11个数字,其分别对应的最后一位身份证的号码为 1 0 X 9 8 7 6 5 4 3 2;

  5. 通过上面得知如果余数是 2,就会在身份证的第18位数字上出现罗马数字的 X。如果余数是 10,身份证的最后一位号码就是 2。

JavaScript代码实现:

function check(code) {
    code = code.split('');

    var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
        parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2],
        sum = 0,
        ai = 0,
        wi = 0;

    for (var i = 0; i < 17; i++) {
        ai = code[i];
        wi = factor[i];
        sum += ai * wi;
    }

    var last = parity[sum % 11];

    return last == code[17];
}

问题:

这种方法只能做前端的简单校验,我们java后台进行的判断方式是根据省市县出身年月算出身份证后四位,比这种只对最后一位校验要精准得多,不过不是很清楚他们的做法

阅读全文

新项目需要用到工作流设定 + 自定义表单控件,这里列出了自定义表单控件的代码实现,可实现自定义表单控件,可拖拽排序,自定义属性

项目 UI 组件库为 iView, Element UI 可根据项目内代码进行适当修改达到适用

效果预览

image

image

image

运行使用

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

文件目录

.
├── README.md
├── build
├── config
├── dist
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   │   ├── custom_form             //自定义表单组件
│   │   │   ├── FormList.js         //表单列表    
│   │   │   ├── ItemIcon.js         //表单图标配置
│   │   │   ├── Render.js           //表单列表渲染
│   │   │   ├── components          //表单公用组件
│   │   │   │   └── Uploads         //上传组件
│   │   │   │       └── upload.vue
│   │   │   ├── config              //配置文件
│   │   │   │   ├── area.js         //地区配置
│   │   │   │   └── trigger.js      //表单验证触发事件
│   │   │   ├── control             //表单控件列表
│   │   │       ├── Address.js      //地区选择
│   │   │       ├── Cascader.js     //多级联动
│   │   │       ├── CheckBox.js     //多选框
│   │   │       ├── DatePicker.js   //时间选择器
│   │   │       ├── Hr.js           //hr标签
│   │   │       ├── Input.js        //输入框
│   │   │       ├── P.js            //p标签
│   │   │       ├── Radio.js        //单选框
│   │   │       ├── Select.js       //下拉选择框
│   │   │       ├── Text.js         //文本域
│   │   │       ├── Title.js        //标题
│   │   │       └── Uploads.js      //上传控件
│   │   │   └── index.js            //控件注册
│   │   ├── index.vue               //自定义表单页面
│   │   └── render.vue              //表单渲染,数据回填页面
│   ├── main.js                     //入口文件
│   └── router                      //路由配置
│       └── index.js
└── static                          //静态数据模版
    ├── label.1.json
    ├── label.12.json
    ├── label.14.json
    ├── label.17.json
    ├── label.19.json
    ├── label.3.json
    ├── label.5.json
    ├── label.8.json
    └── label.json

相关代码:

相关链接:

阅读全文

一次Vue项目中需求本来是单选的级联选择器,本来很简单因为iView组件里有,结果产品更改需求到要求实现Vue多选级联选择器,先在网上找了一下想偷个懒结果发现没有,所以这算奇葩需求吗 hah

cascader-multi

基于iView-Cascader的多选级联选择器

效果预览

install 安装

npm i cascader-multi --save

use 使用

在main.js中写入下面的代码

import cascaderMulti from "cascader-multi";
Vue.use(cascaderMulti);

接下来,你就可以在页面中使用cascader-multi了

<template>
    <cascaderMulti @on-change="array => end_code = array" :data="end_codes" placeholder="状态码"></cascaderMulti>
</template>
<script>
    export default {
        data () {
            return {
                end_code: [],
                end_codes: []
            }
        }
    }
</script>
属性 说明 类型 默认值
data 用于渲染页面的数据 Array
value 默认已选择数据项 Array
multiple 是否支持多选 Boolean false
filterable 是否支持搜索 Boolean true
disabled 是否禁用选择器 Boolean false
clearable 是否支持清除 Boolean true
size 输入框大小,可选值为largesmall或者不填 String -
transfer 是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果 Boolean false
placeholder 输入框占位符 String -
element-id 给表单元素设置 id,详见 iView-Form 用法。 String -
name 给表单元素设置 name,详见 iView-Form 用法。 String -
事件 说明 返回值
on-change 选择完成后的回调,返回值此时已选的数据数组 data

补充说明

  • 传入data数据格式如下:
    [
      {
        value: 1000,
        label: "接通",
        children: [{
          label: "已报价",
          value: 1100,
          children: [],
          multiple: true //可忽略项,当为true时该项为多选
        }]
      }
    ]
    

文件目录

.
├── README.md
├── dist
│   ├── cascader-multi.js
│   └── cascader-multi.js.map
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   └── lib
│       ├── components
│       │   ├── cascader-multi-panel.vue
│       │   ├── cascader-multi.vue
│       │   └── index.js
│       └── utils
│           └── index.js
└── webpack.config.js

代码已上传至:

阅读全文

近期手上有个小程序项目,UI妹纸给的对话框效果图需要自定义,因为wx.showModal无法自定义内容,例如icon图标,字体大小之类的,只能自定义一个Modal组件。

下面是自定义组件的文件:

1. dialogModal.js


Component({
  properties: {
    // 模态框 显示/隐藏
    modalHidden: {
      type: Boolean,
      value: false
    }, //这里定义了modalHidden属性,属性值可以在组件使用时指定.写法为modal-hidden,
    showCancel: {
      type: Boolean,
      value: true
    },
    // 模态框title标题
    modalTitle: {
      type: String,
      value: '',
    },
    // 模态框msg内容
    modalMsg: {
      type: String,
      value: ''
    },
    // 模态框状态 1.‘’;2.‘success’;3.‘error’
    modalType: {
      type: String,
      value: ''
    }
  },
  methods: {
    // 防止事件冒泡,阻止page滚动事件
    moveD: () => { },
    // modal取消点击事件
    modal_cancel: function () {
      // 隐藏模态框
      this.setData({
        modalHidden: true,
      })
    },
    // modal确认点击事件
    modal_confirm: function (e) {
      this.modal_cancel();
      var eventDetail = {} // detail对象,提供给事件监听函数
      var eventOption = {} // 触发事件的选项
      this.triggerEvent('handleConfirm');
    }
  }
})

2. dialogModal.json

{
  "component": true,
  "usingComponents": {}
}

3. dialogModal.wxml

<!--components/dialogModal/dialogModal.wxml-->
<view hidden='{{modalHidden}}' class="dialog-modal" catchtouchmove='moveD'>
  <view class='mask_layer' />
  <view class='modal_box'>
    <image bindtap='modal_cancel' src="../../images/modal_close.png" class="modal-close"></image>
    <view class='modal-body'>
      <view>
        <view class="modal-title">
          <image src="../../images/error.png" wx:if="{{modalType == 'error'}}"></image>
          <image src="../../images/success.png" wx:if="{{modalType == 'success'}}"></image>
          <text>{{modalTitle}}</text>
        </view>
        <!-- modal状态为'success',只显示标题 -->
        <view class="modal-content" wx:if="{{modalMsg}}">
          <text>{{modalMsg}}</text>
        </view>
      </view>
    </view>
    <view class='modal-btn'>
      <text wx:if="{{showCancel}}" bindtap='modal_cancel' class='modal-cancel'>取消</text>
      <text bindtap='modal_confirm' class='modal-confirm'>确定</text>
    </view>
  </view>
</view>

4. dialogModal.wxss

/* components/dialogModal/dialogModal.wxss */

.dialog-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mask_layer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}

.modal_box {
  position: relative;
  width: 91.4%;
  overflow: hidden;
  z-index: 1001;
  background: #fff;
  border-radius: 3px;
}

.modal-close {
  position: absolute;
  right: 16rpx;
  top: 16rpx;
  width: 20rpx;
  height: 20rpx;
}

.modal-body {
  text-align: center;
  /* margin: 30rpx 0; */
  display: flex;
  overflow-y: scroll; /*超出父盒子高度可滚动*/
  min-height: 228rpx;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
}

.modal-body image {
  width: 44rpx;
  /* vertical-align:-6rpx; */
  height: 44rpx;
  margin-right: 15rpx;
}

.modal-title {
  padding: 20rpx 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gazure;
  font-size: 32rpx;
  color: #484848;
  letter-spacing: 0.36px;
}

.modal-content {
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #484848;
  letter-spacing: 0.31px;
}

.modal-btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: #fff;
}

.modal-cancel {
  width: 100%;
  padding: 40rpx;
  text-align: center;
  border-top: 1rpx solid #f3f3f3;
  border-right: 1rpx solid #f3f3f3;
  font-size: 28rpx;
  color: #fd5612;
  letter-spacing: 0.31px;
}

.modal-confirm {
  width: 100%;
  padding: 40rpx;
  background-color: #fff;
  text-align: center;
  border-top: 1rpx solid #f3f3f3;
  font-size: 28rpx;
  color: #fd5612;
  letter-spacing: 0.31px;
}

.modal-msg {
  text-align: center;
  margin-bottom: 50rpx;
  display: block;
}

接下来就是在我们的index页面里使用自定义的Modal组件:

1. index.json

{
  "usingComponents": {
    "modal": "../../components/dialogModal/dialogModal"
  }
}

2. index.wxml

<!--index.wxml-->
<view class="container">
  <modal bind:handleConfirm="modalConfirmCallBack" modal-hidden="{{modal.hidden}}" modal-title="{{modal.title}}" modal-msg="{{modal.msg}}" modal-type="{{modal.type}}" data-params="{{modal.params}}"></modal>
  <button bindtap='handleDefaultClick'>default</button>
  <button bindtap='handleSuccessClick'>success</button>
  <button bindtap='handleErrorClick'>error</button>
</view>

3. index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    modal: {
      hidden: true,
      title: '',
      msg: '',
      type: '',
      params: {}
    }
  },
  handleDefaultClick: function () {
    this.setData({
      'modal.hidden': false,
      'modal.title': 'default标题',
      'modal.msg': 'default内容',
      'modal.type': '',
      'modal.params': {
        type: 'default'
      }
    })
  },
  handleSuccessClick: function () {
    this.setData({
      'modal.hidden': false,
      'modal.title': 'success标题',
      'modal.msg': 'success内容',
      'modal.type': 'success',
      'modal.params': {
        type: 'success'
      }
    })
  },
  handleErrorClick: function () {
    this.setData({
      'modal.hidden': false,
      'modal.title': 'error标题',
      'modal.msg': 'error内容',
      'modal.type': 'error',
      'modal.params': {
        type: 'error'
      }
    })
  },
  modalConfirmCallBack: function (e) {
    const params = e.target.dataset.params;
    console.log(params);
  }
})

4. index.wxss

/**index.wxss**/

.container button {
  margin-top: 20rpx;
}

modal {
  z-index: 1024;
}

具体代码在: mrabit/wx_app_component

参考地址:

阅读全文

在计算机科学中,柯里化(英语:Currying),又译为卡瑞化或加里化,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。 – 维基百科

函数柯里化的好处在于:

  • 函数复用,提高适用性
  • 延迟执行

1.函数复用:

const match = (reg, str) => {
  console.log(str.match(reg));
};

const reg = /\s+/g;
// 重复调用reg变量
match(reg, 'hello world'); // [" "]
match(reg, 'spaceless'); // null

函数柯里化实现:

const curry = fn => {
  return (...args) => {
    return (...cb) => {
	  // 合并参数,立即执行
      return fn.apply(null, [...args, ...cb]);
    };
  };
};

const match = curry((reg, str) => {
  console.log(str.match(reg));
});
const hasSpace = match(/\s+/g);

hasSpace('hello world'); // [" "]
hasSpace('spaceless'); // null

缩小函数的适用范围,但同时提高函数的适用性

2.延迟执行

const curry = (fn) => {
  return (...args) => {
    return function _f() {
      if (arguments.length) {
        // 参数不为空,合并参数
        args.push(...arguments);
        // 返回自身,链式调用
        return _f;
      }
      // 参数为空,立即执行
      return fn.apply(null, args);
    };
  };
};

// 累加方法
const add = curry((...arr) => {
  return arr.reduce((next, p) => {
    return next + p;
  }, 0);
});

console.log(add(1, 2, 3, 4)(5)()); // 15
console.log(add(1)(2)(3)(4)(5)()); // 15

累积传入参数,当不传参数的时候,最后执行。

参考地址:

阅读全文