javascript - 検証フォーム-スペースなし

Question

フィールドの値の長さを検証する関数があります。

function validateName(name) {
  if(name.val().length < 5) {
  }
}

余白の有無も確認したい。私はこれで試しましたが、うまくいきませんでした：

function validateName(name) {
  if(name.val().length < 5 && name.val(" ") < 0) {
  }
}

Answer 1

上記のコードの問題は、$.fn.val入力として受け取った引数に基づいて動作が変わることです。具体的には、パラメーターなしで実行された場合はゲッターであり、1つのパラメーターを使用して実行された場合はセッターです。したがって、この行：

name.val(" ")

値に空のスペースが存在するかどうかはチェックしませんが、値を単一の空のスペースに設定します。

文字列に少なくとも空のスペースが含まれているかどうかを確認するには、さまざまな方法があります。ここではString#indexOf、validateName関数を次のように記述できるようにします。

function validateName(name) {
  var val = name.val();
  if (val && val.length < 5 && val.indexOf(" ") < 0) {
    // valid!
  }
}

より表現力豊かなアプローチはを使用することString#includesですが、ブラウザではあまり広くサポートされていません。

function validateName(name) {
  var val = name.val();
  if (val && val.length < 5 && val.indexOf(" ") < 0) {
    console.log("valid", val);
  } else {
    console.log("invalid", val);
  }
}

validateName($('<input value="b" />'));
validateName($('<input value="br" />'));
validateName($('<input value="bru" />'));
validateName($('<input value="brun" />'));
validateName($('<input value="bruno" />'));
validateName($('<input value="b ru" />'));
validateName($('<input />'));

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

また、一般的なアドバイスとして、検証ロジックをjQueryで混乱させることはしません。つまりvalidateName、入力フィールドを表すjQueryオブジェクトではなく、プレーンな文字列を入力として受け入れる方がよいでしょう。