テキストエリア内、特定の文字が指定数以下ならエラーメッセの実装

Question

テキストエリアにて、特定文字の個数を数え、指定の数以下ならエラーメッセージ表示というものを実装したいです。

メールアドレス入力欄に、

if( １：”＠”が必須 || ２："." が最低1つ必要 )

という条件を指定したいのですが、１はクリアでき

いろいろvalueを取得する方法を試してみましたが２が機能しません。

見ていただけないでしょうか？

いくつか試したものを下記の記載いたします。

よろしくお願いいたします。

  $("#regoBtn").click(function(){

    var alert = document.getElementById("erMsgRego");
    var nameVal = $("#txtName").val();
    var emailVal = $("#txtEmail").val();

    if (nameVal == "" || nameVal.length < 2) {
      alert.innerHTML = "Enter your name.";
      $("#txtName").select();
    }else if (emailVal == "") {
      alert.innerHTML = "Enter your e-Mail.";
      $("#txtEmail").select();
//下記コード
    }else if (!emailVal.match(/@/) || emailVal.search(.).length == 0){
      alert.innerHTML = "E-mail address has to contain \"@\" and at least one \" . \" .";
      $("#txtEmail").select();
    }else{
      alert.innerHTML = "works.";
    }

  });

//試して見たもの
//   emailVal.match(/./).length == 0
//   /./.test(emailVal).length < 1
//   emailVal.search(.).length == 0

      <div data-role="fieldcontain">
        <label for="txtName">Name:</label>
        <input type="txtName" name="txtName" id="txtName"/>
      </div>
      <div data-role="fieldcontain">
        <label for="txtEmail">e-Mail:</label>
        <input type="txtEmail" name="txtEmail" id="txtEmail"/>
      </div>

    <p id="erMsgRego" class="erMsg"></p>
    <button id="regoBtn" data-inline="true">Register</button>

#上記実装後
どれも１だけクリアしてしまうとelseが発動してしまいます。

#追記
１も２も個数は1つあればいいので分ける必要がないことに気付きました。単に　@ と　.　があるかの確認をすればいようです。

Answer 1

自分でJavaScriptを実装しなくても、<input type="email">（MDN）を使えば、ほぼ手間なくメールアドレスとしての検証を行えます。

Comments

[mogiruri]

コメントありがとうございます。
提案していただいたところ恐縮ですが、”いかに上記の条件を満たすコードを書くか”が目的ですので、別の提案をお願いできますでしょうか？

Answer 2

まず条件が＠と.を含むということなのでorではなくandにする必要がある。

上記文字はspecial charなのでエスケイプする必要があり、それは\を用いることによって可能

よって

else if (!emailVal.match(/^(?=.@)(?=..)/)

で解決