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表单。但问题是都市风格事件监听器......

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

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

Answer 1

根据w3schools，您必须在表单标记中调用onsubmit =“return function（）”。这样就不应该在不经过验证的情况下继续提交。

从W3schools抓起来：

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>

和所属的javascript：

function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
        alert("Not a valid e-mail address");
    return false;
    }
}

Answer 2

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

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

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

如何在Metro风格中进行简单的html 5验证？

2 个答案: