vue3+ts+vant4 gestión unificada de reglas de verificación de formularios

vue3+ts+vant4+pinia+axios+scss proceso básico de creación de un proyecto

自我记录

src/utils/rules.ts

// 引入vant组件:rules=[] 的类型
import type {
    
     FieldRule } from 'vant'

// 表单校验
const mobileRules: FieldRule[] = [
  {
    
     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 }

usarsrc/views/Login/index.vue

La página utilizada importa el archivo ts de reglas públicas recién escrito import { mobileRules, passwordRules } de '@/utils/rules'
y luego en :rules="mobileRules" :rules="passwordRules"el formato específico de la siguiente manera

Verifique el documento vant
submit en su totalidad . La función de devolución de llamada se activa después de enviar el formulario y pasar la verificación. valores: objeto
native-typetipo de botón nativo atributo de la etiqueta
componente del formulario @submit="login"uso del componente del botónnative-type="submit"

<script setup lang="ts">
import {
    
     ref } from 'vue'
// 引入
import {
    
     mobileRules, passwordRules } from '@/utils/rules'
const checked = ref(false)
const show = ref(false)
const mobile = ref('')
const password = ref('')
// 表单提交
const login = () => {
    
    
  //整体校验通过
  console.log('可以发请求了')
}
</script>

<template>
  <div class="login-page">
    <cp-nav-bar right-text="注册" @click-right="$router.push('/register')" />
    <!-- 头部 -->
    <div class="login-head">
      <h3>密码登录</h3>
      <a href="javascript:;">
        <span>短信验证码登录</span>
        <van-icon name="arrow"></van-icon>
      </a>
    </div>
    <!-- 表单 -->
    <van-form autocomplete="off" @submit="login">
      <van-field
        :rules="mobileRules"
        placeholder="请输入手机号"
        type="tel"
        v-model="mobile"
      ></van-field>
      <van-field
        :rules="passwordRules"
        placeholder="请输入密码"
        :type="show ? 'text' : 'password'"
        v-model="password"
      >
        <template #button>
          <cp-icon
            :name="`login-eye-${show ? 'on' : 'off'}`"
            @click="show = !show"
          />
        </template>
      </van-field>
      <div class="cp-cell">
        <van-button block round type="primary" native-type="submit">登 录</van-button>
      </div>
    </van-form>
  </div>
</template>

单独校验usar después de pasar整体校验