問題の説明:
クリックして確認コードを送信した後、ロジックをより厳密にするために、vant コンポーネントに付属のフォーム確認を使用して 2 回目の確認を実行し、確認コードの送信後にログイン携帯電話番号が 2 回変更されるのを防ぎます。成功しましたが、公式サイトの説明cvによると有効にならず、認証コード取得後のカウントダウンも消えません…
コードは以下のように表示されます:
// 確認コードを取得する
const getCode = async () => {
// スロットリング: 時間 > 0 の場合は実行しない
if (time.value > 0) return
time.value = 10
const res = await getLoginCode(mobile.value, 'ログイン')
console.log(res, '認証コードを取得')
code.value = res.data.code
// Vant の組み込みフォーム検証は、検証コードが取得された後に携帯電話番号が再度変更されるのを防ぎ、検証が再び失敗した場合に
console.log(formRef.value, 'fromRef') の実行を防ぎますformRef.value?.validate('モバイル').catch((エラー) => { console.log(エラー, 'エラー') })
timeId = setInterval(() => { time.value -= 1 codeText.value = time.value + 's get again after' if (time.value < 1) { codeText.value = '確認コードを送信' return clearInterval( timeId) } }, 1000) }
catch によってキャッチされたエラーは未定義です。つまり、validate メソッドによって渡されたパラメーターの名前に値がなく、構造体に name 属性が追加されていないことがわかります。
変更されたコードは次のとおりです。
<van-form autocomplete="off" @submit="login" ref="formRef">
<van-field
name="mobile"
v-model="mobile"
:rules="mobileRules"
placeholder="请输入手机号"
type="tel"
></van-field>
検証が必要なフォーム項目に name 属性を追加するだけです。
ビジネスコードの最適化:
const getCode = async () => {
// スロットリング: 時間 > 0 の場合は実行しない
if (time.value > 0) return
time.value = 10
const res = await getLoginCode(mobile.value, 'ログイン')
console.log(res, '認証コードを取得')
code.value = res.data.code// Vant の組み込みフォーム検証は、検証コードを取得した後に携帯電話番号が再度変更されることを防ぎ、検証が再度失敗した場合は実行を防ぎます。 // validate の戻り値は promise ですが、する必要はありません
。ここで戻り値を受け取り、 await を追加するだけです
await formRef.value?.validate('モバイル')timeId = setInterval(() => { time.value -= 1 codeText.value = time.value + 's get again after' if (time.value < 1) { codeText.value = '確認コードを送信' return clearInterval( timeId) } }, 1000) }