realname.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <view>
  3. <!-- 公共组件-每个页面必须引入 -->
  4. <public-module></public-module>
  5. <u-form :model="form" ref="uForm" class="addStaffManage" >
  6. <u-form-item label="姓名" prop="name"><u-input v-model="form.name" /></u-form-item>
  7. <!-- <u-form-item label="性别">
  8. <u-input type="select" :select-open="showSex" v-model="form.sex"
  9. placeholder="请选择性别" @click="showSex = true"
  10. placeholder-style="color:#808080"></u-input>
  11. <u-select v-model="showSex" mode="single-column" :list="actions"
  12. @confirm="sexSelect"></u-select>
  13. </u-form-item> -->
  14. <u-form-item label="身份证号" prop="identity"><u-input v-model="form.identity" /></u-form-item>
  15. <u-button hover-class="none" :custom-style="submitBtnStyle" type="success" @click="submit">提交</u-button>
  16. </u-form>
  17. </view>
  18. </template>
  19. <script>
  20. import {
  21. mapState
  22. } from "vuex"
  23. export default {
  24. data() {
  25. //身份证验证
  26. function validateSfz(rule, value, callback) {
  27. if (!value) {
  28. return callback(new Error('身份证号码不能为空'));
  29. }
  30. function validataCredentials(num) {
  31. var msg, boo; // msg身份证验证友情提示,boo返回值
  32. var num = num.toUpperCase(); // 身份证为末尾可能是X
  33. // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,
  34. // 最后一位是校验位,可能为数字或字符X。
  35. const arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
  36. const arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
  37. var nTemp = 0,
  38. i;
  39. if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) {
  40. // 输入的身份证号长度不对,或者号码不符合规定;
  41. return [boo = false, msg = "身份证号码不符合规定"];
  42. }
  43. // 校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。
  44. // 下面分别分析出生日期和校验位
  45. var len, re;
  46. len = num.length;
  47. if (len == 15) {
  48. re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
  49. var arrSplit = num.match(re);
  50. // 检查生日日期是否正确
  51. var dtmBirth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4]);
  52. var bGoodDay;
  53. bGoodDay = (dtmBirth.getYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
  54. if (!bGoodDay) {
  55. // 输入的身份证号里出生日期不对!
  56. return [boo = false, msg = "输入的身份证号里出生日期不对!"];
  57. } else {
  58. // 将15位身份证转成18位
  59. // 校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。
  60. num = num.substr(0, 6) + '19' + num.substr(6, num.length - 6);
  61. for (i = 0; i < 17; i++) {
  62. nTemp += num.substr(i, 1) * arrInt[i];
  63. }
  64. num += arrCh[nTemp % 11];
  65. return [boo = true, msg = num];
  66. }
  67. }
  68. if (len == 18) {
  69. re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
  70. var arrSplit = num.match(re);
  71. // 检查生日日期是否正确
  72. var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]);
  73. var bGoodDay;
  74. bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
  75. if (!bGoodDay) {
  76. // 输入的身份证号里出生日期不对!
  77. return [boo = false, msg = " 输入的身份证号里出生日期不对"];
  78. } else {
  79. // 检验18位身份证的校验码是否正确。
  80. // 校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。
  81. var valnum;
  82. for (i = 0; i < 17; i++) {
  83. nTemp += num.substr(i, 1) * arrInt[i];
  84. }
  85. valnum = arrCh[nTemp % 11];
  86. if (valnum != num.substr(17, 1)) {
  87. // 18位身份证的校验码不正确!
  88. return [boo = false, msg = "身份证的校验码不正确!"];
  89. }
  90. return [boo = true, msg = "验证成功"]
  91. }
  92. }
  93. return [boo = false, msg = "身份证的长度不正确!"];
  94. }
  95. setTimeout(() => {
  96. var res = validataCredentials(value);
  97. if (!res[0]) {
  98. callback(new Error(res[1]));
  99. } else {
  100. callback();
  101. }
  102. }, 200);
  103. }
  104. return {
  105. showSex:false,
  106. submitBtnStyle: {
  107. margin: "30rpx 0rpx 0rpx",
  108. color: "#ffffff",
  109. fontWeight: "550",
  110. letterSpacing: "10rpx",
  111. backgroundColor: "#ea552d",
  112. },
  113. form: {
  114. name: '',
  115. identity: '',
  116. },
  117. actions: [{
  118. value: '1',
  119. label: '男'
  120. },
  121. {
  122. value: '2',
  123. label: '女'
  124. },
  125. {
  126. value: '3',
  127. label: '未知'
  128. }
  129. ],
  130. rules: {
  131. name: [
  132. {
  133. required: true,
  134. message: '请输入姓名',
  135. trigger: ['blur', 'change']
  136. }
  137. ],
  138. identity: [
  139. // {
  140. // required: true,
  141. // message: '请输入身份证号',
  142. // trigger: ['blur', 'change']
  143. // }
  144. { required: true, message: "请填写身份证号" },
  145. { validator: validateSfz }
  146. ]
  147. }
  148. }
  149. },
  150. computed: {
  151. ...mapState(['userInfo'])
  152. },
  153. methods: {
  154. sexSelect(e) {
  155. this.form.sex = e[0].label
  156. },
  157. async submit(){
  158. this.$refs.uForm.validate(valid => {
  159. if (valid) {
  160. console.log('验证通过');
  161. console.log(this.userInfo.sysUser,11111111)
  162. } else {
  163. console.log('验证失败');
  164. }
  165. });
  166. // let res = await this.$http.post('/user/updateUserInfo/' + this.userInfo.sysUser.id,
  167. // {
  168. // sysUser:{name:this.form.name,identity:this.form.identity,status:'1',
  169. // mobile:this.userInfo.sysUser.mobile,deptId:this.userInfo.sysUser.deptId,
  170. // deptName:this.userInfo.sysUser.deptName,
  171. // },
  172. // sysUserInfo:{},
  173. // });
  174. // console.log(res,11111111)
  175. }
  176. },
  177. onReady() {
  178. this.$refs.uForm.setRules(this.rules);
  179. }
  180. }
  181. </script>
  182. <style>
  183. .addStaffManage{
  184. height: 220upx;
  185. margin: 0 40upx;
  186. }
  187. </style>