Html Form 验证异步的提交

一、需求

需要在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验证）