現在テキストボックスの未入力チェックを行っています。
テキストボックスが空白の場合は、
if($('#txtbox').val()===''){
//アラート処理
}
で対応できるのですが、
全角スペースはこれに引っかかりません。
この対処方法を知っている方や参考サイトを知っている方がいらっしゃいましたら教えていただけると有難いです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答6件
0
全角スペースを削除して比較してはどうですか?
javascript
1if($('#txtbox').val().replace(/\s+/g, "")===''){ 2 3 //アラート処理 4 5}
投稿2016/04/20 11:47
総合スコア1939
0
ベストアンサー
質問文では「全角スペース」とありますが、半角空白/タブ文字等の空白文字全般の連続を認識したいものとして解釈します。
jQuery.trim
jquery-2.2.3.js を確認したところでは、jQuery.trim
は下記コードと等価です。
JavaScript
1function trim ( text ) { 2 return text == null ? '' : (text + '').replace(/^[\x20\t\r\n\f]+|((?:^|[^\\])(?:\\.)*)[\x20\t\r\n\f]+$/g, ''); 3}
見ての通り、全角空白を含まない為、今回は使えません。
String.prototype.trim
String.prototype.trim
は Unicode 規定の Zs
を含む為、全角空白も削除します。
\s
も ES3 当時から Zs
を含みますが、IE8- は独自仕様で対応しない為、\s+
で削除する事ができません。
過去に Polyfill を書いたので github を参照して下さい。
- Regular Expression Syntax (JavaScript)
- ECMAScript5.js : ES5 準拠のメソッドを定義するJavaScriptライブラリ
- ECMAScript 5 の String.prototype.trim を実装する - Togetterまとめ
JavaScript
1if (jQuery('#txtbox').val().trim() === '') { // for IE9+ 2 // 処理 3}
Re: k499778 さん
投稿2016/04/20 12:53
総合スコア18156
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/20 14:44
2016/04/20 15:00 編集
2016/04/21 00:11
0
JavaScript
1// わかりやすく書くと 2str = $('#txtbox').val(); 3str = str.replace(/ /g, " "); //全角スペースを半角スペースに変換 4str = str.replace(/ /g, ""); //半角スペースを削除 5// 他にも条件があるなら関数にまとめた方がいいかも 6if(str===''){ 7 8 //アラート処理 9 10}
投稿2016/04/20 12:07
総合スコア7458
0
正規表現で空白だけかチェックすればどうかな(下のコードではコメントアウトしてある部分)、と思いましたが、$.trim()
で空白文字をトリムして空になるかをチェックする方がスマートかも、です。
$.trim()
も内部で正規表現で空白を除去しているようです。
で、いずれも全角空白は正規表現の \s
にマッチすればいいわけですが、\s
にマッチするかどうかはブラウザ依存のようです。詳しくは調べないとわかりませんが、IE8 以前だと全角空白が \s
にマッチしないのだとか。最近のブラウザならマッチすると考えてもいいと思います。
もし、IE8 もサポート対象にするなら、$.trim()
を使わず、正規表現として /^\s*$/
ではなく、/^[\s ]*$/
を使って(s
と ]
の間に全角空白)マッチするかで判定するといいと思います。
html
1<!DOCTYPE html> 2<html> 3<head> 4<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 5</head> 6<body> 7 <input type="button" value="チェック" id="checkButton" /> 8 <input type="text" value="" id="txtbox" /> 9 <span id="alert" style="color:red;">空だよ</span> 10</body> 11<script> 12$(function() { 13 $('#alert').hide(); 14 $('#checkButton').on('click', function() { 15 /* 16 if ($('#txtbox').val().match(/^\s*$/)) { 17 $('#alert').show(); 18 } else { 19 $('#alert').hide(); 20 } 21 */ 22 if ($.trim($('#txtbox').val()) === '') { 23 $('#alert').show(); 24 } else { 25 $('#alert').hide(); 26 } 27 return false; 28 }); 29}); 30</script> 31</html>
投稿2016/04/20 12:01
総合スコア2468
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/20 11:51
2016/04/20 14:47