1

カスタム データ属性を使用してフォームを検証したいのですが、その方法がわかりません。また、必要に応じてデータ属性にエラー メッセージを表示したいと考えています。

データ属性の正規表現値と一致し、対応する入力値と一致する JavaScript を探しています。

私は次のフォームを持っています..

<form id="loginForm" name="loginForm">
                    <ul>
                        <li>
                            <label for="Username">Username:</label>
                            <input type="email" data-validation-error="Please enter a username" data-validation-use="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" id="username" name="username" maxlength="254" class="required" />
                        </li>
                        <li>
                            <label for="Password">Password:</label>
                            <input type="password" data-validation-error="Please enter a password" data-validation-use="^[a-zA-Z]\w{5,12}$" id="password" name="password" value="" maxlength="12" class="required" />
                        </li>
                    </ul>
                    <input type="submit" value="Login" class="button" name="loginBtn" id="loginBtn" />
            </form>
4

2 に答える 2

2

最新のブラウザーのみを対象として開発している場合は、いくつかの優れた機能を使用できます。

  1. リスト アイテムのユーザー名フィールドには、入力タイプの電子メールを使用します。ブラウザが検証を処理します。
  2. 属性を使用する必要があります。ブラウザは、フィールドに値がないとユーザーが送信できないようにします。
  3. 属性パターンを使用します。ブラウザーは、指定されたパターンに一致する値がないと、ユーザーが送信することを許可しません。ただし、電子メールタイプを使用すると、あなたの電子メールに一致する恐ろしい正規表現をスキップできます:)

パターン属性を確認してください: http://www.the-art-of-web.com/html/html5-form-validation/#section_6

例：

<input type="email" required />

ここでは、最も使用されているブラウザーでの最新のフォーム機能のサポートを確認できます: http://caniuse.com/#feat=forms

エラー メッセージを指定してスタイルを設定できるようにするかどうかについては、現在も議論が続いています (ブラウザによって処理されます)。今のところ、検証メッセージのスタイルを設定することはできないと思います。これらのメッセージがすべてのページで同じであれば、ユーザーにとってより使いやすいでしょうか?

古いブラウザーをサポートする必要がある場合は、各フィールドに JavaScript イベント ハンドラーを配置し、データ属性から正規表現を抽出して値と照合する必要があります。クライアント側の検証は、サーバー側の検証に代わるものではないことに注意してください。これは、ユーザーの便宜のためです。したがって、HTML5 検証は、それをサポートするブラウザーを使用しているユーザーにとっては十分である可能性があります。ユーザー エクスペリエンスはそれほど優れていないとはいえ、残りの部分はサーバー側の検証に依存します。

この例は、それがどのように行われるかを示しています (私はこれを十分にテストしていません:o):

$('form').submit(function(){
    var isValid = true;
    $(this).find(':input').each(function(){
        var regex = new RegExp($(this).attr('data-validation-use'));
        if(!regex.exec($(this).val())){
            $('.validationError').append($(this).attr('data-validation-error'));
            $(this).addClass('invalid');
            isValid = false;
        }
    });
    return isValid;
});
于 2011-12-20T12:20:53.863 に答える
0

jqueryの検証が最適です。ここで、標準のjQuery検証のデモとコードを参照してください。jQueryの検証

于 2011-12-20T12:36:51.690 に答える