入力フィールドhtmlのパターンと必須属性を同時に使用する

Question

htmlフォームで必須属性を使用しているときに、入力フィールドのパターンを検証する方法を教えてください。私はそれぞれの属性に対して2つの異なる警告メッセージを出したい。

<div class="form-group"> 
        <label class="col-md-4 control-label">E-Mail</label> 
        <div class="col-md-4 inputGroupContainer"> 
         <div class="input-group"> 
          <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> 
          <input name="email" placeholder="Địa chỉ E-Mail" class="form-control" type="text" required 
            pattern=" /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/" 
            oninvalid="this.setCustomValidity('Vui lòng nhập địa chỉ email')" 
            oninput="setCustomValidity('')"/> 
         </div> 
        </div> 
       </div> 

有効なメールを確認するには正規表現がありますか？私は、インターネット上の正規表現を見つけましたが、それは正しく

Answer 1

働くことの単純なキープしません：あなたは本当にあなたが現在行っているとして、私はpretty good browser supportを持って定期的にForm Validationとなるだろう、Constraint Validation APIを使用行く必要がない限り、O）を。

基本的にrequired属性をinput要素に適用すると、いくつかの条件と照合されます。 1つはフィールドを空白にすることはできません。もう1つはオプションのpatternです。あなたの場合、type="email"と指定することができ、ブラウザは有効な電子メールアドレスの入力と一致します。私の知る限り、あなたのリクエストを読むことができるよう、次はあなたのニーズをカバーする必要があります：正規表現を使用してカスタムパターンを定義する

<form action=""> 
    <input type="email" required> 
    <input type="submit"> 
</form> 

リスクは、障害のあるパターンのテストを終わるかもしれないということです。あなたのケースでは、有効な電子メールアドレスであっても、example@example.cancerresearchのテストは失敗します。