Html Form 驗證非同步的提交

_Ong發表於2024-12-01
HTMLORM非同步

一、需求

需要在Form的submit按鈕點選或輸入框回車的時候計算一個耗時的驗證。

二、解決方案

在Form 的 onsubmit事件中開啟驗證，並返回false阻止提交；在驗證過程中，根據驗證結果決定是否提交。

三、程式碼

<form action="/Index/login" method="post" onsubmit="return Submit()">
  <input type="password" name="pswd" id="fm_pswd" />
  <input class="btn" type="submit" value="登入" />
</form>
async function Sha256(data) {
  const encoder = new TextEncoder();
  const dataBuffer = encoder.encode(data);
  const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer);
  // 將結果轉換為十六進位制表示
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
  return hashHex.toLocaleUpperCase();
}

function Submit() {
    if (fm_pswd.value == '') {
        layer.alert('密碼未填寫');
        return false;
    }
    layer.load(2);
    Sha256(fm_pswd.value + location.pathname.toLowerCase() + fmstmp.value)
        .then(val => {
            fm_pswd.value = val;
            document.querySelector('form').submit();
        });
    return false;
}
// 或者 document.querySelector('form').onsubmit = Submit;

四、關鍵點說明

1. 在 Form 的 提交的時候驗證：onsumit 事件Hook；在 提交驗證的HTML程式碼中 return 很重要

2. 或者 html 程式碼中去掉 “onsubmit=....” ， 在JS中Hook：document.querySelector('form').onsubmit = Submit;

3. 在驗證程式碼 Submit 中 僅返回 false，阻止提交；在 驗證結果出來的時候判斷可以提交再直接觸發 Form 的提交（不會Hook驗證）

相關文章