封装校验-----Vue3+ts项目

登录校验页面

<script setup lang="ts">
import {
    ref } from 'vue'
import {
    mobileRules, passwordRules } from '@/utils/rules'
const mobile = ref('')
const password = ref('')
</script>

<!-- 表单 -->
    <van-form autocomplete="off">
      <van-field
        v-model="mobile"
        :rules="mobileRules"
        placeholder="请输入手机号"
        type="tel"
      ></van-field>
      <van-field
        v-model="password"
        :rules="passwordRules"
        placeholder="请输入密码"
        type="password"
      ></van-field>

封装校验页面utils/rules.ts
提取表单校验规则（为了其他页面复用）
加上 FieldRule ，可以有提示，提高效率

import type {
    FieldRule } from 'vant'
const mobileRules = [
  {
    required: true, message: '请输入手机号' },
  {
    pattern: /^1[3-9]\d{9}$/, message: '手机号不正确' }
]
const passwordRules: FieldRule[] = [
  {
    required: true, message: '请输入密码' },
  {
    pattern: /^\w{8,24}$/, message: '密码必须是8-24个字符' }
]
export {
    mobileRules, passwordRules }

效果图：