カスタム正規表現を使用してフォームを検証する

Question

カスタムデータ属性を使用してフォームを検証したいが、これがどのように行われているかはわからない。また、必要に応じて、データ属性にエラーメッセージを表示する必要があります。

私は、データ属性からの正規表現の値と一致する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> 

Answer 1

あなたが唯一の近代的なブラウザのために開発している場合、あなたはこのためにいくつかの素晴らしい機能を使用することができますが：入力タイプメールitemUse

1. 一覧ユーザー名フィールドにブラウザがバリデーションを行います。
2. 属性が必要ですを使用してください。ブラウザは、ユーザーがフィールドに値を入力しないで送信することはできません。
3. 属性パターンを使用してください。ブラウザは、指定されたパターンと一致する値なしでユーザーが送信できるようにしません。 がhttp://www.the-art-of-web.com/html/html5-form-validation/#section_6

   例：ここでは

   <input type="email" required /> 
   

   あなたがチェックアウトすることができAltoughは、電子メールの種類で、あなたはあなたの電子メール:)

チェックアウトpattern属性にマッチする恐ろしい正規表現をスキップすることができ最も使用されているブラウザの最新のフォーム機能のサポート： 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; 
}); 

Answer 2

jqueryの検証が最高になります。 標準のjQuery検証のデモとコードを参照してください。 jQuery Validation