vue3中，form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change

<template>
  <div>
    <form @submit.prevent="validateForm">
      <input v-model="form.specialChar" placeholder="特殊字符">
      <input v-model="form.phoneNumber" placeholder="手机号">
      <input v-model="form.idCard" placeholder="身份证号">
      <input v-model="form.percentage" placeholder="百分制数字">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  specialChar: '',
  phoneNumber: '',
  idCard: '',
  percentage: ''
});

const validateForm = () => {
  const specialCharRegex = /^[A-Za-z0-9]+$/; // 特殊字符验证
  const phoneNumberRegex = /^1[3-9]\d{9}$/; // 手机号验证（中国大陆）
  const idCardRegex = /^(\d{15}$|^\d{18}$)/; // 身份证号验证
  const percentageRegex = /^(\d|[1-9]\d|100)$/; // 百分制数字验证

  if (!specialCharRegex.test(form.specialChar)) {
    alert('特殊字符验证失败');
    return;
  }
  if (!phoneNumberRegex.test(form.phoneNumber)) {
    alert('手机号验证失败');
    return;
  }
  if (!idCardRegex.test(form.idCard)) {
    alert('身份证号验证失败');
    return;
  }
  if (!percentageRegex.test(form.percentage)) {
    alert('百分制数字验证失败');
    return;
  }

  alert('表单验证通过');
  // 这里可以执行提交表单的操作
};
</script>