javascript - 如何以 Metro 风格进行简单的 html 5 验证？

Question

我正在使用 Html 5 和 Javascript 开发 Windows 8 Metro 风格应用程序

我的问题很简单，如何编写带有验证的简单表单？

<form id="loginForm">
        E-Mail:
        <input id="login-email" type="email" name="Username" oninvalid="this.setCustomValidity('Enter email pls')" 
    maxlength="40" required pattern="^.{2,}@.{2,}$"/>

        Password:
        <input id="login-password" type="password" name="Password" maxlength="25" required pattern=".{6,10}"/>

    <button name="login" type="submit" class="go-login" id="btnlogin" value="LOGIN">LOGIN</button></form>

这是我的 html 5 表单。但问题是 Metro 风格的事件监听器......

document.getElementById("btnlogin").addEventListener('click', loginClick);

当我单击提交按钮时，EventListener 的“loginClick”函数将启动，而不检查 html 5 表单输入元素是否有效。

Answer 1

在使用 HTML5/JS Windows 应用商店应用程序 (WSA) 时遇到了同样的问题。预期是在客户端上通知用户，并且“提交”中的代码不会运行。这就是我们在浏览器中运行的基于 Web 的 HTML5 应用程序上看到的内容。但是，无论验证状态如何，当单击按钮时，WSA 应用程序都会运行提交代码。在我的应用程序中，我包含了对 loginForm.checkValidity() 属性的检查。当所有验证都正确时，情况就是如此。

if (loginForm.checkValidity())
{
  //...submit logic...
}

我同意，考虑到我们对网络世界的期望，这项检查是一个额外的步骤。这仍然是 WSA 平台的第 1 版，我预计此功能将在未来的更新/发布中演进到产品中。