vue3+ element-plus+css：开展活动表单填写页面样式

正则表达式校验手机号：
1）当输入值变化时检测第二位是否为2，第一位是否不为1

2）手机号填写完成后，用正则表达式检验手机号格式

regex为正则表达式，^：字符串开始，1：第一位字符为“1”，[3-9]：3-9的任意一个数字，\d{9}：\d为数字，\d{9}表示9位任意数字，$字符串结束

使用test方法检查手机号是否满足regex正则表达式，如果手机号存在且不满足正则表达式，则给出相应提示；否则校验其它输入框信息是否填写正确

错误：

This comparison appears to be unintentional because the types 'string' and 'RegExp' have no overlap.

    表明你在尝试比较一个字符串类型（string）和一个正则表达式类型（RegExp），这是不合理的，因为这两种类型在JavaScript中没有交集。这意味着你不能直接将它们进行比较，因为比较运算符（如 == 或 ===）预期操作数应该是可以相互比较的类型。

正确写法：

完整示例：

<template>
  <el-form
    :model="ruleForm"
    ref="ruleFormRef"
    :rules="rules"
    label-width="auto"
    label-position="left"
    status-icon
    :size="formSize"
    style="
      max-width: 100%;
      background-color: #ffffff;
      padding: 2rem 0 0 3rem;
      right: 2.5%;
      width: 95%;
    "
    class="el_form"
  >
    <el-form-item label="活动名称" class="el_form-item" required prop="activityname">
      <el-input
        v-model="ruleForm.activityname"
        style="width: 90%"
        placeholder="请填写活动名称"
      />
    </el-form-item>
    <el-form-item label="负责人身份" required prop="identifier">
      <el-select
        v-model="ruleForm.identifier"
        placeholder="您的身份是"
        style="width: 90%"
      >
        <el-option label="老师" value="teacher" />
        <el-option label="管理员" value="management" />
      </el-select>
    </el-form-item>
    <el-form-item label="负责人姓名" required prop="name">
      <el-input
        v-model="ruleForm.name"
        placeholder="请填写负责人姓名"
        style="width: 90%"
      />
    </el-form-item>
    <el-form-item label="活动地点" required prop="region">
      <el-input
        v-model="ruleForm.region"
        style="width: 90%"
        placeholder="请填写活动地点"
      />
    </el-form-item>
    <el-form-item label="活动开始时间" required prop="beginDate">
      <el-date-picker
        v-model="ruleForm.beginDate"
        type="datetime"
        placeholder="请选择活动开始时间"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="MMM DD, YYYY"
        time-format="HH:mm"
      />
    </el-form-item>
    <el-form-item label="活动结束时间" required prop="endData">
      <el-date-picker
        v-model="ruleForm.endData"
        type="datetime"
        placeholder="请选择活动结束时间"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="MMM DD, YYYY"
        time-format="HH:mm"
      />
    </el-form-item>
    <!-- 正则表达式校验号码 -->
    <el-alert
      title="手机号必须从1开始"
      type="error"
      show-icon
      v-if="phone1"
      style="width: 90%"
    />
    <el-alert
      title="非法输入"
      type="error"
      show-icon
      v-if="phone2"
      style="width: 90%"
    />
    <el-form-item label="联系电话" required prop="phonenumber">
      <el-input
        v-model="ruleForm.phonenumber"
        style="width: 90%"
        maxlength="11"
        placeholder="请填写手机号"
        show-word-limit
        @input="inputNum"
        type="text"
      />
    </el-form-item>
    <el-form-item label="活动备注">
      <el-input
        v-model="ruleForm.desc"
        placeholder="需携带什么物品等"
        type="textarea"
        style="width: 90%"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        @click="onSubmit(ruleFormRef)"
        style="width: 90%; background-color: #b4fdff"
        >提交</el-button
      >
    </el-form-item>
    <!-- <el-button style="width: 100%">复位</el-button> -->
  </el-form>
</template>
  <script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const phone1 = ref(false);
const phone2 = ref(false);
const formSize = ref("default");
interface RuleForm {
  activityname: string;
  identifier: string;
  name: String;
  region: string;
  beginDate: string;
  endData: string;
  phonenumber: string;
  desc: string;
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  activityname: "",
  identifier: "",
  name: "",
  region: "",
  beginDate: "",
  endData: "",
  phonenumber: "",
  desc: "",
});
const rules = reactive<FormRules<RuleForm>>({
  activityname: [
    { required: true, message: "请输入活动名字", trigger: "blur" },
  ],
  identifier: [
    {
      required: true,
      message: "请输入您的身份",
      trigger: "change",
    },
  ],
  name: [
    {
      required: true,
      message: "请输入您的名字",
      trigger: "change",
    },
  ],
  region: [
    {
      required: true,
      message: "请输入活动地点",
      trigger: "change",
    },
  ],
  beginDate: [
    {
      type: "date",
      required: true,
      message: "请输入活动开始时间",
      trigger: "change",
    },
  ],
  endData: [
    {
      type: "date",
      required: true,
      message: "请输入活动结束时间",
      trigger: "change",
    },
  ],
  phonenumber: [
    {
      required: true,
      message: "请输入您的联系电话",
      trigger: "change",
    },
  ],
});
const onSubmit = async (formEl: FormInstance | undefined) => {
  const regex = /^1[3-9]\d{9}$/;
  if (!regex.test(ruleForm.phonenumber) && (ruleForm.phonenumber)) {
    alert("请输入正确的手机号码");
  } else {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      console.log("提交表单", formEl);
      if (valid) {
        console.log("submit success!");
      } else {
        console.log("error submit!", fields);
      }
    });
  }
};
const inputNum = (e) => {
  console.log("校验手机号", e);
  // 如果检测到输入的第二位为非2数字^1[3-9]\d{9}$
  if (e[1] == 2) {
    //取出手机号e的第二位，判断是否为2
    console.log("非法输入");
    phone2.value = true;
  } else if (e[0] != 1 && e) {
    //判断手机号e长度是否不为0且第1位不为1
    console.log("必须从1开始");
    phone1.value = true;
  } else {
    phone1.value = false;
    phone2.value = false;
  }
};
</script>
  <style scoped>
.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}
.el_form {
  display: flex;
  flex-direction: column; /* 子元素竖直排列 */
  /* align-items: center; 子元素在父元素中水平居中   */
  justify-content: space-between; /* 子元素之间的间距平均分布 */
  height: 100vh; /* 根据需要设置父元素的高度，这里设置为视口高度 */
  padding: 0 10%; /* 设置内边距，防止子元素过于靠近视口边缘 */
}
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
}
.line {
  width: 1px;
  background-color: var(--el-border-color);
}
</style>
    

注意：使用el-form前，需前往element-plus官网下载相关包：一个 Vue 3 UI 框架 | Element Plus