提交代码

src/components/From/Email/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-form ref="formRef" :model="groupData" :rules="rules">
+    <el-form-item
+      :label-width="LABEL_WIDTH"
+      prop="modelValue"
+      label="邮箱"
+    >
+      <el-input
+        v-bind="$attrs"
+        v-model="groupData.modelValue"
+        @input="onInput()"
+        @blur="validate()"
+        max="11"
+      ></el-input>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { LABEL_WIDTH } from '@/constant';
+import { ref, defineProps, defineEmits, defineExpose } from 'vue'
+const formRef = ref(null);
+const props = defineProps({
+  isRequired: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// import { validateIdentity } from './rules'
+const groupData = ref({
+  modelValue: ''
+});
+const emits = defineEmits(['update:modelValue']);
+const onInput = (e) => {
+  emits('update:modelValue', groupData.value.modelValue)
+}
+const isBX = ref(false)
+
+const validateIdentity = () => {
+  return (rule, value, callback) => {
+    const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
+    if (!value) {
+    } else {
+      if (!reg.test(value)) {
+        return callback(new Error('请输入正确的邮箱地址'));
+      } else {
+        callback();
+      }
+    }
+  };
+};
+
+// 验证规则
+const rules = ref({
+  modelValue: [
+    {
+      required: props.isRequired,
+      message: '请输入邮箱',
+      trigger: 'blur'
+    },
+    {
+      trigger: 'blur',
+      validator: validateIdentity()
+    }
+  ]
+})
+
+// 校验是否 符合规则 。 把当前组件名通过 emits分发出去
+const validate = () => {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      emits('validateStatus', { 'Email': true })
+    } else {
+      emits('validateStatus', { 'Email': false })
+    }
+  })
+  if (!props.isRequired && groupData.value.modelValue.length === 0) {
+    emits('validateStatus', { 'Email': true })
+  }
+}
+
+const childMethod = () => {
+  groupData.value.modelValue = ""
+}
+// 主动暴露childMethod方法
+defineExpose({ childMethod })
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/From/IdentityCard/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-form ref="formRef" :model="groupData" :rules="rules">
+    <el-form-item :label-width="LABEL_WIDTH" prop="modelValue" label="身份证号">
+      <el-input
+        v-bind="$attrs"
+        v-model="groupData.modelValue"
+        @input="onInput()"
+        @blur="validate()"
+      ></el-input>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { LABEL_WIDTH } from "@/constant";
+import { ref, defineProps, defineEmits, defineExpose } from "vue";
+import { validateIdentity } from "./rules";
+const props = defineProps({
+  isRequired: {
+    type: Boolean,
+    default: false
+  }
+});
+const groupData = ref({
+  modelValue: ""
+});
+const formRef = ref(null);
+const emits = defineEmits(["videoListShowFn"]);
+const onInput = (e) => {
+  emits("update:modelValue", groupData.value.modelValue);
+};
+// 验证规则
+const rules = ref({
+  modelValue: [
+    {
+      required: props.isRequired,
+      message: "请输入身份证",
+      trigger: "blur"
+    },
+    {
+      trigger: "change",
+      validator: validateIdentity()
+    }
+  ]
+});
+
+// 校验是否 符合规则 。 把当前组件名通过 emits分发出去
+const validate = () => {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      emits("validateStatus", { IdentityCard: true });
+    } else {
+      emits("validateStatus", { IdentityCard: false });
+    }
+  });
+  if (!props.isRequired && groupData.value.modelValue.length === 0) {
+    emits("validateStatus", { IdentityCard: true });
+  }
+};
+
+const childMethod = () => {
+  groupData.value.modelValue = "";
+};
+// 主动暴露childMethod方法
+defineExpose({ childMethod });
+</script>
+
+<style lang="scss" scoped></style>

src/components/From/IdentityCard/rules.js

@@ -0,0 +1,79 @@
+export const validateIdentity = () => {
+  return (rule, value, callback) => {
+    if (!value) {
+      // return callback(new Error('身份证号不能为空'));
+    } else if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
+      callback(new Error('输入的身份证长度或格式错误'));
+    }
+
+    //身份证城市
+    var aCity = {
+      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 (!aCity[parseInt(value.substr(0, 2))]) {
+      callback(new Error('身份证地区非法'));
+    }
+    // 出生日期验证
+    var sBirthday = (
+        value.substr(6, 4) +
+        '-' +
+        Number(value.substr(10, 2)) +
+        '-' +
+        Number(value.substr(12, 2))
+      ).replace(/-/g, '/'),
+      d = new Date(sBirthday);
+    if (
+      sBirthday !==
+      d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate()
+    ) {
+      callback(new Error('身份证上的出生日期非法'));
+    }
+
+    // 身份证号码校验
+    var sum = 0,
+      weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
+      codes = '10X98765432';
+    for (var i = 0; i < value.length - 1; i++) {
+      sum += value[i] * weights[i];
+    }
+    var last = codes[sum % 11]; //计算出来的最后一位身份证号码
+    if (value[value.length - 1] !== last) {
+      callback(new Error('输入的身份证号非法'));
+    }
+    callback();
+  };
+};

src/components/From/Phone/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-form ref="formRef" :model="groupData" :rules="rules">
+    <el-form-item :label-width="LABEL_WIDTH" prop="modelValue" label="手机号">
+      <el-input v-bind="$attrs" v-model="groupData.modelValue" @input="onInput()" @blur="validate()" max="11">
+      </el-input>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { LABEL_WIDTH } from '@/constant';
+import { ref, defineProps, defineEmits, defineExpose } from 'vue'
+const formRef = ref(null);
+const props = defineProps({
+  isRequired: {
+    type: Boolean,
+    default: false
+  }
+})
+const isOk = ref()
+const groupData = ref({
+  modelValue: ''
+});
+const emits = defineEmits(['update:modelValue']);
+const onInput = (e) => {
+  emits('update:modelValue', groupData.value.modelValue)
+}
+const isBX = ref(false)
+
+const validateIdentity = () => {
+  return (rule, value, callback) => {
+    if (!value) {
+    } else {
+      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
+      if (reg.test(value)) {
+        callback();
+      } else {
+        return callback(new Error('请输入正确的手机号'));
+      }
+    }
+  };
+};
+
+// 验证规则
+const rules = ref({
+  modelValue: [
+    {
+      required: props.isRequired,
+      message: '请输入手机号',
+      trigger: 'blur'
+    },
+    {
+      min: 11,
+      message: '手机号格式不正确',
+      trigger: 'blur'
+    },
+    {
+      trigger: 'change',
+      validator: validateIdentity()
+    }
+  ]
+})
+
+// 校验是否 符合规则 。 把当前组件名通过 emits分发出去
+const validate = () => {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      emits('validateStatus', { Phone: true })
+      isOk.value = true
+    } else {
+      emits('validateStatus', { Phone: false })
+      isOk.value = false
+    }
+  })
+  if (!props.isRequired && groupData.value.modelValue.length === 0) {
+    emits('validateStatus', { Phone: true })
+    isOk.value = true
+  }
+}
+
+const childMethod = () => {
+  groupData.value.modelValue = ""
+}
+// 主动暴露childMethod方法
+defineExpose({ childMethod })
+</script>