HTML5検証パターン？

Question

私はいくつかの異なる入力フィールドに対してパターンを作成しようとしています。最初の2つのフィールドは姓と名です。それから私は性別と学年を持っています。ここに私が作成したものがあります：

<input type="text" name="lname" id="lname" value="" size="20" maxlength="30" title="Maximum length 30 characters." pattern="/^ *[a-z][a-z' .,-]{0,29} *$/i" required /> 
<input type="text" name="fname" id="fname" value="" size="20" maxlength="30" title="Maximum length 30 characters." pattern="/^ *[a-z][a-z' .,-]{0,29} *$/i" required /> 
<input type="text" name="gender" id="gender" value="" size="1" maxlength="1" title="Maximum length 1 character." pattern="/^ *([M|F])? *$/i" required /> 
<input type="text" name="garde" id="grade" value="" size="2" maxlength="2" title="Maximum length 2 characters." pattern="/^ *(0?[0-9]|1[0-2]|[A-Z]{1,2})? *$/i" required /> 

正規表現はどれも動作しません。私は正しい構文を使用しているのか何か他のものが私のコードで問題であるかどうかはわかりません。姓と名字のフィールドには、最大30文字（' .,-など）の英字チャーターを許可する必要があります。性別はmまたはfまたはMまたはFとする必要があります。グレードフィールドには、大文字/小文字、または1文字以下の数字を使用できます。誰かが助けてくれたら教えてください。ありがとうございました。

Answer 1

HTML5パターン属性で正規表現リテラルを使用することはできません。文字クラスに文字通りA-Za-zを追加する必要があります。 ^と$のアンカーが暗示されています。つまり、パターンはHTML5エンジンによって自動的に^(?:と)$で囲まれます。

したがって、あなたのパターンはそうで

pattern=" *[a-zA-Z][A-Za-z' .,-]{0,29} *" 
pattern=" *[MmFf]? *" 

とのようになります。