我正在使用Html 5和Javascript开发Windows 8地铁风格的应用程序
我的问题很简单,如何编写带有验证的简单表单?
<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);
当我单击提交按钮时,事件侦听器的"登录单击"函数启动,而不检查 html 5 表单输入元素是否有效。
HTML5/JS Windows Store Application (WSA)时遇到了同样的问题。 期望在客户端上通知用户,并且"提交"中的代码不会运行。这是我们在浏览器中运行的基于 Web 的 HTML5 应用程序上看到的。 但是,无论验证状态如何,WSA 应用都会在单击按钮时运行提交代码。 在我的应用程序中,我包含了对loginForm.checkValidity()属性的检查。 当所有验证都正确时,情况确实如此。
if (loginForm.checkValidity())
{
//...submit logic...
}
我同意,鉴于我们对网络世界的期望,此检查是一个额外的步骤。 这仍然是WSA平台的版本1,我希望此功能将在将来的更新/版本中演变为产品。
根据 w3schools 的说法,您必须在表单标签中调用 onsubmit="return function()"。这样,它不应该在没有经过验证的情况下继续提交。
从W3学校抓取:
<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;
}
}