HTML5、値の入力パターン検証を強制する方法は？

Question

私はHTML5を学びたいと思っており、私はpattern入力キーワードを使用して、ユーザーが入力すると入力を検証します（たとえば、タブを押したり、入力ボックスからフォーカスを変更した後の検証）。

私は次のことを試してみました：

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" onchange="this.variable.validate()" /> </li> 

し、同様に：

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" /> </li> 

私は価値の変化に検証をトリガーする方法

onchange="this.variable.validate()" 

のためのコードを作ったのですか？私はこれだけを行うことができますonSubmit。

Answer 1

あなたはjavascriptの 'onkey'機能を見ましたか？

onkeyupは、ユーザーの種類として何かを探している場合があります。

さらに、onchangeは、フィールドがフォーカスを失ったときに発生し、onkeyupがユーザータイプとして発生します。あなたが必要とするものによって異なります。あなたはあなたの必要性を実装するために、フォーカスとぼかし機能を使用する必要がありますからkeyup

onchange = variable.validate(this.value)

Answer 2

：

あなたは多くのwannaはこのような何かを試してみてください。たとえば ：

パスワードの入力フィールドを持っている：JavaScriptのコードで

<input id="pswd" type="password" required name="pswd" />

：

$('input[type=password]').keyup(function() { 
// keyup event code here with validation rules }); 

$('input[type=password]').focus(function() { 
// focus code here to show message which contains rules for input field }); 

$('input[type=password]').blur(function() { 
// blur code here }); 

Answer 3

_{免責事項：
私はここで働くと言うことを約午前のすべて現代のすべてのブラウザ用ですこの文脈では、「現代のブラウザ」という用語はIE9以前のものを除きます。また、Windows用Safari には部分的なサポートしかありません。あなたが必要とするすべてのスタイリングインジケータがある場合は}

は、あなたはこのために、純粋なCSSを使用することができますパターンを使用する場合は、onsubmit検証は、ブラウザによって自動的に行われます

input[pattern]:invalid{ 
    color:red; 
} 

（のためのSafariでは動作しません。 Windows）。

Answer 4

あなたはIE8のような古いブラウザへのパターンの機能をバックポートするためのjQueryを使用したい場合は、あなたのような何かができる：

// Jquery Function to Validate Patterns on Input Objects 
(function($){ 
    $.fn.validatePattern = function(search) { 
     // Get the current element's siblings 
     var pattern = this.attr('pattern'); 
     var value = this.val(); 

     return !(pattern&&(value.length>0)&&!value.match(new RegExp('^'+pattern+'$'))); 
    }; 
})(jQuery); 

$(document).ready(function() { 
    // Bind pattern checking (invalid) to on change 
    $(':input').change(function() { 
     if (!$(this).validatePattern()) { 
      $(this).addClass('invalidPattern'); 
     } 
    }); 
    // Bind pattern valid to keyUp 
    $(':input').keyUp(function() { 
     if ($(this).validatePattern()) { 
      $(this).removeClass('invalidPattern'); 
     } 
    }); 
}); 

これはパターンを持つ入力オブジェクトにクラスinvalidPatternを追加して行いますそれにマッチしない。パターンが妥当性を確認できない場合、提出を防止するために、必要なものなどのチェックを追加し、フォームのサブミットチェックを追加することもできます。私が上に置いたのは、パターンだけを検証するための素早く軽いスクリプトです。より完全に機能するシムについては

、http://adodson.com/jquery.form.js/

でパターンの検証コードを見て、そのプロジェクトからです。

Answer 5

丙〜私はこの reportValidity（）

$('#test').on('input',function (e) { 
    e.target.setCustomValidity('') 
if ($(this).val()>3) { 
    console.log('o~~~~error'); 
    this.setCustomValidity('123') 
    // this.checkValidity() 
    this.reportValidity(); 
} 

が、その後#test入力がヒント自動ポップ

$('#test').on('input', function(e) { 
 
    this.setCustomValidity('') 
 
    if ($(this).val() > 3) { 
 
     this.setCustomValidity('wooo~~~~') 
 
    } 
 
    // e.target.checkValidity() 
 
    this.reportValidity(); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input autofocus id='test' type="text" min="1" pattern="[0-9]+" required> 
 
<!-- <button type="submit">submit</button> --> 
 
</form>

がある3よりも大きいとき、あなたは何をしたい~~ の使用を知っています

https://html.spec.whatwg.org/#dom-cva-reportvalidity

Answer 6

次のjQueryコードは、入力が変更されるたびに検証を強制します。

<input...>要素のoninput eventを傍受します。イベント後に値が無効な場合、変更は取り消され、元の値が復元されます。無効な値がフィールドに貼り付けられた状況も処理されます。

data() functionは、HTML5 data-attributeを使用して要素にデータを格納して取得します。この関数は元の値を要素data-last-validに格納します。

<script lang="text/javascript"> 
    // First "input" means event type `oninput`, second "input" is the CSS selector. 
    // So read as "for all <input ...> elements set the event handler 
    // for the "oninput" event to the function... 
    $(document).on("input", "input", function (event) { 
     if (this.checkValidity()) { 
      // Store the current valid value for future use 
      $(this).data('last-valid', this.value); 
     } 
     else { 
      // Undo the change using the stored last valid value 
      this.value = $(this).data('last-valid') || ""; 
     } 
    }); 
</script>