複数のスペースがフォームの検証をクリアするのを止める方法はありますか？

Question

私はシンプルなフォームとJavaScriptの検証機能に取り組んでいます。私が持っている唯一の問題は、複数のスペースが有効なエントリとして読み取られることです。私はフォームが実際に各フィールドに2つのスペースを入れてフォームを送信するだけでなく、実際に記入されていることを確認する必要があります。これをどうやって止めることができますか？最初の文字がスペースである場合にfalseを返す方法はありますか、または他の文字がないものとして任意の数のスペースをfalseとして読み取る方法はありますか？

Answer 1

文字列trim関数を使用して、文字列をトリミングしてから検証します。先頭と末尾のスペースを整える必要があります。私は、以下の例を含めました、あなたはtrim documentation from Mozilla Developer Network

var demoInput = document.getElementById('multipleSpaces'); 
 
var demoText = demoInput.value; 
 

 
var output = document.getElementById('output'); 
 

 
alert('Initial text length: ' + demoText.length + ' \n trimmed length ' + demoText.trim().length);

<input type='text' value=' ' id='multipleSpaces'/> 
 
<div id='output'></div>

Answer 2

こんにちはジョエルはあなたが（.trimを使用することができます末尾スペースを削除したい場合に述べたように）上でより多くのドキュメントを参照してくださいすることができます。文字列を1つのスペースに正規化する場合は、次のスニペットを使用できます。

var str = "this  is sparta "; 
    str = str.trim() 
    str = str.split(/[ ]{2,}/).join(' ') 

//output: "this is sparta" 

正規表現/[ ]{2,}/以上1つのスペースを検索し、文字列を分割し、その後、.join(' ')は1つの文字列に分割さの要素をコンパイルします。次にそれを短縮することができます。

str = str.trim().split(/[ ]{2,}/).join(' ')

Answer 3

と仮定すると、あなたの使ってconstraint validationを内蔵し、独自のローリングない、これは<input>要素のpattern属性のための偉大なユースケースのように思えます。必須属性と組み合わせることで、これは任意のJSせずに欲しいものを達成する必要があります

<form> 
    <input 
     type="text" 
     pattern=".*\S.*" 
     title="Must contain non-whitespace characters" 
     required> 
    <input type="submit" value="Submit"> 
</form> 

チェックcaniuseを属性がターゲット環境において機能的であることを確実にするため。