テキストは常に

Question

有効である私はこのようなテキストの入力を実現するつもりだ

input:invalid { 
    background: #fdd; 
} 
input:valid { 
    background: #dfd; 
} 

しかし、私は書くとき私の入力は常に有効です。私は試してみたpattern：

pattern=".{16,}" 

しかし、それは何も解決しませんでした。私のミスはどこですか？入力の長さが16

Answer 1

あなたが近くにいるに等しいとき

入力が有効である必要があります！それを行う方法は次のとおりです。唯一の英数字の任意の文字

<form> 
 
    <input id="username" type="text" pattern=".{16}" maxlength="16" required> 
 
    <input id="submit" type="submit" value="create"> 
 
</form>

0を許可

<form> 
 
    <input id="username" type="text" pattern="[a-zA-Z0-9]{16}" required> 
 
    <input id="submit" type="submit" value="create"> 
 
</form>

---

許可

ここでjQueryのマスク（）プラグインを

、我々は単に、各グループ内の文字の数が続く入力値の一部とデリミタを強制します。この場合、4つの数字の後にスペースが続きます。正規表現とパターンについての詳細情報については

$(document).ready(function() { 
 
    $('#username').mask('9999 9999 9999 9999'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script> 
 

 
<form> 
 
    <input id="username" type="text" pattern="[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}" required> 
 
    <input id="submit" type="submit" value="create"> 
 
</form>

、Regexrをチェックしてください。

Answer 2

コードでは、属性maxlength = "16"は、入力ボックスに16文字を超える文字を入力することはできません。使用している正規表現は、入力が0から16文字のの場合に有効です。そのため、あなたは正規表現でなければなりません：

そして、あなたのHTMLコード：

<input type="text" pattern=".{16,16}" maxlength="16" required/> 

あなたはそれがthis fiddleで働いて見たいかもしれません。