【jQuery】フォームの値を取得・設定方法ーテキスト部分

jQueryを使用したフォールの値を取得する方法をまとめです。

フォーム部分の値を取得したり、設定したりする作業のたびに、毎回検索するのが手間なので自分に対しての備忘録として記載しておきます。
今回はテキスト部分のまとめです。

値を取得

HTML側

<input type="text" id="state" value="都道府県">

javascript側

var state = $('#state').val(); //値を取得
console.log(state); //"都道府県"

値を代入

javascript側

var val = $('#name').val('東京');

設定した文字数以内であるか

.length関数を使用して文字数をカウントして、if文で条件分岐をして判定する。

javascript側

if($('#name').val().length <= 5 ){
	console.log('指定した文字数以内です');
}else {
	console.log('指定した文字数以上です');
}

正規表現を使用して入力項目をチェックする

正規表現を使用して入力項目もチェックします。
例えば、メールアドレスの入力項目があった場合は、メールアドレスが正しく入力されているかのチェックを正規表現を使用して確認します。

【正規表現】まとめ

電話番号

HTML側

<input type="tel" id="tel" value="0123-4567-890">

javascript側

var tel = $('#tel').val().replace(/[━.*‐.*―.*－.*\–.*ー.*\-]/gi,'');
console.log(tel); //"01234567890"

if(!tel.match(/^[0-9]+$/)){
	console.log('数字以外が含まれています');
}

.replace(/[━.*‐.*―.*－.*\–.*ー.*\-]/gi,”)でハイフンを削除します。
.match(/^[0-9]+$/)を使用して数字かどうかの判定をします。

• Twitter
• Facebook