0

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);

送信ボタンをクリックすると、EventListener の「loginClick」関数が、html 5 フォームの入力要素が有効かどうかをチェックせずに起動します。

4

2 に答える 2

1

HTML5/JS Windows ストア アプリケーション (WSA) を使用しているときに、同じ問題が発生しました。ユーザーがクライアントで通知され、「送信」内のコードが実行されないことが予想されます。これは、ブラウザーで実行されている Web ベースの HTML5 アプリケーションで見られるものです。ただし、検証ステータスに関係なく、ボタンがクリックされると、WSA アプリは送信コードを実行します。私のアプリケーションでは、loginForm.checkValidity() プロパティのチェックを含めました。これは、すべての検証が正しい場合に当てはまります。 

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

Web の世界からの期待を考えると、このチェックは追加のステップです。これはまだ WSA プラットフォームのバージョン 1 であり、この機能は将来の更新/リリースで製品に進化することを期待しています。

于 2012-12-28T13:49:53.853 に答える
1

w3schools によると、form タグで 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;
    }
}
于 2012-10-04T17:11:26.757 に答える