实现申请验证

pages/human/practice/register/RegistrationAddForm.vue

@@ -29,7 +29,22 @@
 			     <u--input placeholder='请填写民族'  v-model="inputForm.nation"></u--input>
 			</u-form-item>
 			<u-form-item label="政治面貌" borderBottom prop="politicalOutlook" >
-			     <u--input placeholder='请填写政治面貌'  v-model="inputForm.politicalOutlook"></u--input>
+<!--			     <u&#45;&#45;input placeholder='请填写政治面貌'  v-model="inputForm.politicalOutlook"></u&#45;&#45;input>-->
+				<jp-picker v-model="inputForm.politicalOutlook" rangeKey="label" rangeValue="value" :range="[
+						        { label: '中共党员', value: '1' },
+						        { label: '中共预备党员', value: '2' },
+						        { label: '共青团员', value: '3' },
+						        { label: '民革党员', value: '4' },
+						        { label: '民盟盟员', value: '5' },
+						        { label: '民建会员', value: '6' },
+						        { label: '民进会员', value: '7' },
+						        { label: '农工党党员', value: '8' },
+						        { label: '致公党党员', value: '9' },
+						        { label: '九三学社社员', value: '10' },
+						        { label: '台盟盟员', value: '11' },
+						        { label: '无党派人士', value: '12' },
+						        { label: '群众', value: '13' },
+						    ]"></jp-picker>
 			</u-form-item>
 			<u-form-item label="毕业院校" borderBottom prop="graduatedFrom" >
 			     <u--input placeholder='请填写毕业院校'  v-model="inputForm.graduatedFrom"></u--input>
@@ -38,13 +53,13 @@
 			     <u--input placeholder='请填写专业'  v-model="inputForm.speciality"></u--input>
 			</u-form-item>
 			<u-form-item label="联系电话" borderBottom prop="mobilePhone" >
-			     <u--input placeholder='请填写联系电话'  v-model="inputForm.mobilePhone" @blur="validatePhone"></u--input>
+			     <u--input placeholder='请填写联系电话'  v-model="inputForm.mobilePhone"></u--input>
 			</u-form-item>
 			<u-form-item label="QQ号/微信号" borderBottom prop="qqNum" >
-			     <u--input placeholder='请填写QQ号/微信号'  v-model="inputForm.qqNum"></u--input>
+			     <u--input placeholder='请填写QQ号/微信号'  v-model="inputForm.qqNum" :maxlength="20"></u--input>
 			</u-form-item>
 			<u-form-item label="简介" borderBottom prop="remarks">
-			    <u--textarea  placeholder='请填写简介'  v-model="inputForm.remarks" ></u--textarea>
+			    <u--textarea  placeholder='请填写简介' :maxlength="200" v-model="inputForm.remarks" ></u--textarea>
 			</u-form-item>
 			
 			 <!-- 添加按钮 -->
@@ -190,7 +205,24 @@
 							required: true,
 							message: '联系电话不能为空',
 							trigger: ['blur', 'change']
-					  }]
+					  },
+						  {
+							  validator: (rule, value, callback) => this.validatePhone(value, callback),
+							  trigger: ['blur', 'change']
+						  }
+					],
+					'idCard': [
+						{
+							validator: (rule, value, callback) => this.isCardId(value, callback),
+							trigger: ['blur', 'change']
+						}
+					],
+					'qqNum': [
+						{
+							validator: (rule, value, callback) => this.qqNumCheck(value, callback),
+							trigger: ['blur', 'change']
+						}
+					],
 				}
 			}
 		},
@@ -271,24 +303,156 @@
 			  // this.tableData.splice(index, 1);
 			  this.inputForm.familyMembers.splice(index, 1);
 			},
-			validatePhone() {
-			        // 此正则表达式用于验证中国大陆手机号码格式
-			        const regex = /^1[3-9]\d{9}$/;
-			
-			        if (!regex.test(this.inputForm.mobilePhone)) {
-			            // 如果输入不符合手机号码格式，你可以进行相应的处理，比如清除输入或者提示用户
-			            this.inputForm.mobilePhone = ''; // 清空输入
-			            // 或者提示用户输入格式不正确
-			            // 例如：this.$message.error('请输入正确的手机号码格式');
-						this.$message.error('请输入正确的手机号码格式')
-			        }
+			validatePhone (str,callback) {
+				const phone = /(^(\d{3,4}-)?\d{6,8}$)|(^(\d{3,4}-)?\d{6,8}(-\d{1,5})?$)|(^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(19[0-9]{1}))+\d{8})$)/
+				if (str && !phone.test(str)) {
+					callback(new Error('请输入正确的电话号码'))
+				} else {
+					callback()
+				}
 			},
 			formatDate(date) {
 				const year = date.getFullYear();
 				const month = (date.getMonth() + 1).toString().padStart(2, '0');
 				const day = date.getDate().toString().padStart(2, '0');
 				return `${year}-${month}-${day}`;
-			}
+			},
+			isEmpty(value) {
+				let result = false;
+				if (value == null || value == undefined) {
+					result = true;
+				}
+				if (typeof value == 'string' && (value.replace(/\s+/g, "") == "" || value == "")) {
+					result = true;
+				}
+				if (typeof value == "object" && value instanceof Array && value.length === 0) {
+					result = true;
+				}
+				return result;
+			},
+			isNotEmpty (value) {
+				return !this.isEmpty(value)
+			},
+			isCardId(code,callback) {
+				let msg = "";
+				const 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: "国外 ",
+				};
+				if (!this.isNull(code)) {
+					if (code.length === 18) {
+						if (!code || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)) {
+							msg = "证件号码格式错误";
+							callback(new Error(msg));
+						} else if (!city[code.substr(0, 2)]) {
+							msg = "地址编码错误";
+							callback(new Error(msg));
+						} else {
+							// 18位身份证需要验证最后一位校验位
+							code = code.split("");
+							// ∑(ai×Wi)(mod 11)
+							// 加权因子
+							let factor = [
+								7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2,
+							];
+							// 校验位
+							let parity = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2, "x"];
+							let sum = 0;
+							let ai = 0;
+							let wi = 0;
+							for (let i = 0; i < 17; i++) {
+								ai = code[i];
+								wi = factor[i];
+								sum += ai * wi;
+							}
+							let last = parity[sum % 11];
+							if ("" + last !== "" + code[17]) {
+								msg = "证件号码校验位错误";
+								callback(new Error(msg));
+							}
+						}
+					} else {
+						msg = "证件号码长度不为18位";
+						callback(new Error(msg));
+					}
+				} else {
+					msg = "证件号码不能为空";
+					callback(new Error(msg));
+				}
+				if (msg) {
+					callback();
+				}
+				return true;
+			},
+			/**
+			 * 判断是否为空
+			 */
+			isNull(val) {
+				if (val instanceof Array) {
+					if (val.length === 0) return true;
+				} else if (val instanceof Object) {
+					if (JSON.stringify(val) === "{}") return true;
+				} else {
+					if (
+							val === "null" ||
+							val == null ||
+							val === "undefined" ||
+							val === undefined ||
+							val === ""
+					)
+						return true;
+					return false;
+				}
+				return false;
+			},
+			qqNumCheck(qqNum,callback) {
+				//判断是否是汉字
+				if (this.isNotEmpty(qqNum)) {
+					const chineseRegex = /[\u4e00-\u9fa5]/;
+					if (chineseRegex.test(this.inputForm.qqNum)){
+						var msg = 'QQ号/微信号填写不正确，请重新填写'
+						callback(new Error(msg));
+					} else {
+						callback();
+					}
+				} else {
+					callback();
+				}
+
+			},
 		}
 	  }
 </script>