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

在Vue 3中，你可以使用正则表达式来进行特殊字符、手机号、身份证号和百分制数字的验证。以下是一个简单的例子，展示了如何在Vue 3组件中实现这些验证：

<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>

在这个例子中，我们定义了一个带有specialChar、phoneNumber、idCard和percentage属性的响应式对象form。我们还定义了一个validateForm函数，它会在表单提交时触发验证流程。如果任何验证失败，它会显示一个警告，并且不会继续执行提交操作。如果所有验证都通过，它会显示一个通过的消息，并且可以在这里执行表单提交的操作。