Dans le projet vue3+ts, comment résoudre le problème que la vérification de formulaire du composant vant ne prend pas effet ?

Description du problème:

Après avoir cliqué pour envoyer le code de vérification, afin de rendre la logique plus rigoureuse, la vérification du formulaire fournie avec le composant vant est utilisée pour effectuer une deuxième vérification afin d'éviter que le numéro de téléphone mobile de connexion ne soit modifié deux fois après l'envoi du code de vérification. avec succès, mais selon la description officielle du site cv Cela ne prend pas effet, et même le compte à rebours après avoir obtenu le code de vérification ne disparaît pas...

 code afficher comme ci-dessous:

// Récupère le code de vérification
const getCode = async () => {

  // throttling : si time > 0, ne pas exécuter
  if (time.value > 0) return

  time.value = 10
  const res = attendre getLoginCode(mobile.value, 'login')
  console.log(res, 'get verification code')
  code.value = res.data.code

  // La vérification de formulaire intégrée de Vant empêche le numéro de téléphone mobile d'être à nouveau modifié après l'obtention du code de vérification et empêche l'exécution de console.log(formRef.value, 'fromRef')   si la vérification échoue à nouveau

  formRef.value?.validate('mobile').catch((error) => {     console.log(error, 'error')   })

  timeId = setInterval(() => {     time.value -= 1     codeText.value = time.value + 's get again after'     if (time.value < 1) {       codeText.value = 'send verification code'       return clearInterval( tempsId)     }   }, 1000) }

L'erreur interceptée par catch est indéfinie, c'est-à-dire que le nom du paramètre passé par la méthode de validation n'a pas de valeur, et il s'avère que l'attribut name n'est pas ajouté à la structure

 

Le code modifié est le suivant :

 <van-form autocomplete="off" @submit="login" ref="formRef">
      <van-field
        name="mobile"
        v-model="mobile"
        :rules="mobileRules"
        placeholder="请输入手机号"
        type="tel"
      ></van-field>

Ajoutez simplement l'attribut name à l'élément de formulaire qui doit être vérifié.

Optimisation du code métier :

const getCode = asynchrone () => {

  // throttling : si time > 0, ne pas exécuter
  if (time.value > 0) return

  time.value = 10
  const res = attendre getLoginCode(mobile.value, 'login')
  console.log(res, 'get verification code')
  code.value = res.data.code

  // La vérification de formulaire intégrée de Vant empêche le numéro de téléphone mobile d'être à nouveau modifié après l'obtention du code de vérification et empêche l'exécution si la vérification échoue à nouveau. //
  La valeur de retour de validate est une promesse, mais il n'est pas nécessaire de recevez la valeur de retour ici, ajoutez simplement Une attente est plus simple 

  attendre formRef.value?.validate('mobile')

  timeId = setInterval(() => {     time.value -= 1     codeText.value = time.value + 's get again after'     if (time.value < 1) {       codeText.value = 'send verification code'       return clearInterval( tempsId)     }   }, 1000) }