Vue.jsの覚書 | ワクガンス

vue.js | 複数チェックボックス

Demo

HTML

	<div id="app1">
		<input type="checkbox" id="aka_neko" value="1" v-model="cats">
		<label for="aka_neko">赤猫</label>
		<input type="checkbox" id="siro_neko" value="2" v-model="cats">
		<label for="siro_neko">白猫</label>
		<input type="checkbox" id="mike_neko" value="3" v-model="cats">
		<label for="mike_neko">三毛猫</label>
		<br>
		<span>選択: {{ cats }}</span>
	</div>
	

JavaScript

	var app; // vue.js
	jQuery(() => {
		app = new Vue({
			el: '#app1',
			data: {
				cats: [],
			},
		})
	});
	

checkedについて

vue.jsを適用しているcheckboxにchecked属性を記述してもチェックされない。
チェック状態にするにはdataのプロパティに値をセットする。

	var app; // vue.js
	jQuery(() => {
		app = new Vue({
			el: '#app1',
			data: {
				cats: [],
			},
		})
	});
	

2019-3-13

vue.js | セレクトボックス SELECT

Demo

HTML

	<div id="app1">
		<div>
			<p>普通のセレクトボックス</p>
			「option value」の値を取得して表示
			<select v-model="fish_type">
				<option disabled value="">-- 魚選択 --</option>
				<option value="1">ガーラ</option>
				<option value="2">ミーバイ</option>
				<option value="3">アーガイ</option>
			</select>
			<span>Selected: {{ fish_type }}</span>
		</div>
		
		<div>
			<p>テキスト部分を取得して表示</p>
			<select v-model="fish_type2">
				<option disabled value="">-- 魚選択2 --</option>
				<option>ガーラ</option>
				<option>ミーバイ</option>
				<option>アーガイ</option>
			</select>
			<span>Selected: {{ fish_type2 }}</span>
		</div>
		
		<div>
			<p>動的にセレクトボックスを生成</p>
			<select v-model="amphibian_type">
				<option v-for="option in amphibianOptions" v-bind:value="option.value">
					{{ option.text }}
				</option>
			</select>
			<span>Selected: {{ amphibian_type }}</span>
		</div>
		
	</div>
	

JavaScript

	var app; // vue.js
	jQuery(() => {
		app = new Vue({
			el: '#app1',
			data: {
				fish_type: '',
				fish_type2: '',
				amphibian_type: '2',
				amphibianOptions: [
					{ text: 'カエル', value: '1' },
					{ text: 'イモリ', value: '2' },
					{ text: 'ｻﾝｼｮｳｳｵ', value: '3' }
				]
			},
		})
	});
	

---

基本型

	<select v-model="ent.animal_type" >
		<option v-for="(name, value) in animalTypeList" v-bind:value="value">@{{name}}</option>
	</select>
	

animalTypeListの構造
animalTypeList[数値] = '名前'


2019-3-13 | 2022-11-2

vue.js | セレクトボックス 選択肢を追加

Demo

HTML

<div id="app1">
	<select v-model="amphibian_value">
		<option v-for="(value, i) in amphibianList" v-bind:value="i">
			{{ value }}
		</option>
	</select>
	<span>Selected: {{ amphibian_value }}</span>
	<input type="text" v-model="new_amphibian" />
	<button type="button" v-on:click="addList()" >追加</button>
</div>
	

JavaScript

var app; // vue.js
jQuery(() => {
	
	let amphibianList = [
			'アフリカツメガエル',
			'シリケンイモリ',
			'トウキョウサンショウウオ',
			'カジカガエル',
	];
	
	app = new Vue({
		el: '#app1',
		data: {
			amphibian_value: '2',
			new_amphibian:'',
			amphibianList: amphibianList,
		},
		methods:{
			addList:()=>{
				let add_value = this.app.new_amphibian;
				this.app.amphibianList.push(add_value);
			}
		},
	})
});
	

2020-8-19

vue.js | 動的複数チェックボックス

Demo

HTML

	<div id="app1">
		<div v-for="(ent, key) in catData" style="display:inline-block;margin-right:10px">
			<input type="checkbox" id="{{ent.xid}}" value="ent.value" v-model="cats[key]">
			<label v-bind:for="ent.xid">{{ent.text}}</label>
		</div>
		<br>
		<span>選択: {{ cats }}</span>
	</div>
	

JavaScript

	var app; // vue.js
	jQuery(() => {
		app = new Vue({
			el: '#app1',
			data: {
				cats: [false, true, true, false],
				catData:[
					{text:'赤猫', value:1, xid:'cb_cat_aka'},
					{text:'白猫', value:2, xid:'cb_cat_siro'},
					{text:'三毛猫', value:3, xid:'cb_cat_mike'},
					{text:'茶白猫', value:4, xid:'cb_cat_chasiro'},
				],
			},
		})
	});
	

2019-3-14

v-forとinput要素へのbind

Demo

HTML

	<div id="app1">
		<div v-for="(ent, key, index) in catData" style="margin-right:10px">
			<span>index = {{index}}:</span>
			<span>key = {{key}}:</span>
			<input type="text" v-model="ent.cat_name">
			<input type="text" v-model="ent.cat_num">
	
		</div>
		<br>
		
		<hr>
		<div v-for="(ent, key, index) in catData" style="margin-right:10px">
			<span class="text-success">{{ent.cat_name}}</span>
			<input type="text" v-bind:value="ent.cat_num" />
		</div>
	</div>
	

JavaScript

	var app; // vue.js
	jQuery(() => {
		app = new Vue({
			el: '#app1',
			data: {
				catData:{
					akaneko: {cat_name:'赤猫', cat_num:1},
					sironeko: {cat_name:'白猫', cat_num:2},
					mikeneko: {cat_name:'三毛猫', cat_num:3},
					chasiro: {cat_name:'茶白猫', cat_num:4},
				},
			},
		})
	});
	

2019-3-14

v-bindとv-modelの違い

v-modelは表示、入力ともに連動する。
v-bindは表示のみの一方通行である。入力を変えても全体に反映されない。
ただv-bindは各種属性にも適用できる。例→「v-bind:class='text-primary'」

Demo

HTML

	<div id="app1">
		v-model<br>
		<input type="text" v-model="test1"><br>
		<br>
		
		v-bind:value<br>
		<input type="text" v-bind:value="test1"><br>
		<br>
		
		{{}}<br>
		<div>{{test1}}</div>
	</div>
	

JavaScript

	var app; // vue.js
	jQuery(() => {
		app = new Vue({
			el: '#app1',
			data: {
				test1:'ライオンタマリン',
			},
		})
	});
	

2019-3-14

vue.js | セレクトボックスとマッピング表示

Demo

HTML

	<div id="app1">
		<p>動的にセレクトボックスを生成</p>
		<select v-model="amphibian">
			<option v-for="(amphibian_name, amphibian_id) in amphibianList" v-bind:value="amphibian_id">
				{{amphibian_name}}
			</option>
		</select>
		<span>Selected: {{ amphibianList[amphibian] }}</span>
	
	</div>
	

JavaScript

	var app; // vue.js
	jQuery(() => {
		app = new Vue({
			el: '#app1',
			data: {
				amphibian: '2',
				amphibianList: {
					'100':'トウキョウサンショウウオ',
					'101':'シリケンイモリ',
					'102':'ホルストガエル',
					'103':'オオサンショウウオ',
					'104':'イボイモリ',
				}
			},
		})
	});
	

2019-3-14

vue.js | v-ifの使い方

Demo

HTML

	<div id="app1">
		<div v-for="(str, key, index) in catdog">
			<div v-if="str=='cat'" class="text-danger">ネコ</div>
			<div v-if="str=='dog'" class="text-primary">イヌ</div>
		</div>
	</div>
	

JavaScript

	var app; // vue.js
	jQuery(() => {
		app = new Vue({
			el: '#app1',
			data: {
				catdog:['cat', 'cat', 'dog', 'cat']
			},
		})
	});
	

2019-3-14

vue.js | 全データループ

Demo

JavaScript

	var app; // vue.js
	jQuery(() => {
		app = new Vue({
			el: '#app1',
			data: {
				cat_name:'赤猫', 
				cat_num:100,
				cat_date:'2019-3-20'
			},
		})
		
		// ▼ 全データのループ
		for(var key in app._data){
			console.log('key=' + key);
			console.log(app[key]);
			jQuery('#res').append(key + ' = ' + app[key] + '<br>');
		}
		
	});
	

HTML

	<div id="app1">
		<input type="text" v-model="cat_name">
		<input type="text" v-model="cat_num">
		<input type="text" v-model="cat_date">
	</div>
	<hr>
	<div id="res" class="text-success"></div>
	

2019-3-20

Vueのappからバインドされていないプレーンなデータを取得する

Demo

無理
連想配列データをvue.jsでバインドした場合、どうしてもvue.jsによって余計な内部関数やプロパティが入ってしまう。それらを除いて一括でプレーンなデータを取得する方法は現状なさそう。
一つ一つ丁寧にキーをしていしてデータ取得するしかない。

ちなみに「_data」ではなく$dataが良いとのこと。

let data = vueApp.$data

---

旧・解説

連想配列データには対応できていない。

let app;

$(()=>{
	
	let formData = {
		'cat_name':'ボウシちゃん',
		'cat_nickname':'オコモさん',
	};
	
	app = new Vue({
		el: '#app1',
		data: {
			'formData':formData,
		},
	});
	
	let plainData = getPlainDataFromVue(app, 'formData');
	console.log(plainData);
	$('#res').html(JSON.stringify( plainData));
	
});

/**
* Vueのappからバインドされていないプレーンなデータを取得する
* ＠param app VueのApp
* @param key データのキー省略可
* @return {} プレーンなデータ
*/
function getPlainDataFromVue(app, key){
	let anyData = null;
	if(key==null){
		anyData = app._data;
	}else{
		anyData = app[key];
	}
	
	let plainData = {};
	for(let key2 in anyData){
		plainData[key2] = anyData[key2];
	}
	
	return plainData;
}

	

2019-3-14 | 2022-11-11

vue.jsによるメンバー登録フォーム | 新規登録フォーム, 会員登録, 利用登録, ユーザー登録

Demo

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="google" content="notranslate" />
   	<meta http-equiv="X-UA-Compatible" content="IE=edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>メンバー登録フォーム | ワクガンス</title>
	<link rel='shortcut icon' href='/home/images/favicon.ico' />
	
	<link href="/note_prg/css/bootstrap.min.css" rel="stylesheet">
	<link href="/note_prg/css/common2.css" rel="stylesheet">

	<script src="/note_prg/js/jquery3.js"></script>	<!-- jquery-3.3.1.min.js -->
	<script src="/note_prg/js/bootstrap.min.js"></script>
	<script src="jquery.validate.min.js"></script>
	<script src="vue.min.js"></script>
	<script src="member_reg_form.js"></script>
	
	<style>
		form .inp_w{
			margin-bottom:10px;
		}
		form label{
			display:inline-block;
			width:170px;
		}
		form label.error{
			color:red;
			font-size:0.8em;
			width:auto;
		}
		form.hosoku{
			color:#636363;
			font-size:0.75em;
		}
		#step4 label{
			display:inline-block;
			width:170px;
		}
		.checkboxs_w{
			display:inline-block
		}
		.checkboxs_w label{
			width:50px
		}
	</style>
	

</head>
<body>
<div id="header" ><h1>メンバー登録フォーム | ワクガンス</h1></div>
<div class="container">


<input type="button" value="テストデータを入力" class="btn btn-default" onclick="testDataInput()" /><br>
<br>
<div id="err" style="color:red"></div>

<div id="app1">
<div id="step1">
	
	
	<form id="form_step1">
		<div class="inp_w">
			<label for="email">Eメール</label>
			<input name="email" type="text" value="" v-model="email" placeholder="example@example.com" style="width:70%"/>
		</div>
	
		<div class="inp_w">
			<label for="password" style="vertical-align:top">パスワード</label>
			<div style="display:inline-block">
				<input type="password" name="password" v-model="password" class="password" placeholder="パスワード"/><br>
				<input type="password" name="password_confirm" class="password"  placeholder="パスワード(もう一度)" />
			</div>
			<br>
		</div>

	</form>
	
	<div id="err_step1" class="text-danger" style="display:none"></div>

	<button onclick="nextBtnForStep1()" class="btn btn-primary">次へ</button>
</div>


<div id="step2">

	<form id="form_step2">
		<div class="inp_w">
			<label for="last_name">氏名</label>
			<input name="last_name" type="text" v-model="last_name" value="" placeholder="山田" />
			<input name="first_name" type="text" v-model="first_name" value="" placeholder="太郎" />
		</div>
		
		<div class="inp_w">
			<label for="last_name_kana">カタカナ氏名</label>
			<input name="last_name_kana" type="text" v-model="last_name_kana" value="" placeholder="ヤマダ" />
			<input name="first_name_kana" type="text" v-model="first_name_kana" value="" placeholder="タロウ" />
		</div>
		
			<div class="inp_w">
			<label for="tel">電話番号</label>
			<input name="tel" type="text" v-model="tel" value="" placeholder="090-0123-4567" />
			<span class="hosoku"> 国際電話番号形式の入力可 +81-90-0123-4567</span>
		</div>
		
		<div class="inp_w">
			<label for="post_code">郵便番号</label>
			<input name="post_code" type="text" v-model="post_code" value="" placeholder="123-4567" style="width:8em"/>
		</div>
		
		<div class="inp_w">
			<label for="address">住所</label>
			<input name="address" type="text" v-model="address" value="" placeholder="東京都千代田区千代田〇〇1-2-3" style="width:50%"/>
		</div>
		
		<div class="inp_w">
			<label for="gender">性別</label>
			<div style='display:inline-block'>
				<input name="gender" type="radio" value="man" checked />男姓
				<input name="gender" type="radio" value="woman" />女姓
			</div>
		</div>
		
		<div class="inp_w">
			<label for="birthday">生年月日</label>
			<input type="date"  name="birthday" v-model="birthday"  value="1970-1-1" min="1900-1-1" max="2100-12-31">
		</div>
	</form>
	
	<button onclick="returnBtnForStep2()" class="btn btn-default">戻る</button>
	<button onclick="nextBtnForStep2()" class="btn btn-primary">次へ</button>
</div>


<div id="step3">

	<form id="form_step3">
		<div class="inp_w">
			<label>興味あるもの</label>

			<div class="checkboxs_w">
				 <div v-for="(ent, key) in interestData" v-bind:value="ent.value" style="display:inline-block;margin-right:10px">
					<input type="checkbox" id="{{ent.xid}}" value="ent.value" v-model="interests[key]">
					<label v-bind:for="ent.xid">{{ent.text}}</label>
				</div>
			</div>

		</div>
		
		<div class="inp_w">
			<label for="plan">プラン</label>
			<select name="plan" v-model="plan">
				<option value=""> -- プランを選択 -- </option>
				<option v-for="(plan_text, plan_id) in planList" v-bind:value="plan_id">{{plan_text}}</option>
			</select>

		</div>
	</form>
	
	<button onclick="returnBtnForStep3()" class="btn btn-default">戻る</button>
	<button onclick="nextBtnForStep3()" class="btn btn-success">次へ</button>
</div>


<div id="step4">

	<div>
		<label>Eメール</label>
		<span>{{email}}</span>
	</div>
	
	<div>
		<label>氏名</label>
		<span>{{last_name}}</span>&nbsp;<span>{{first_name}}</span><br>
	</div>
	
	<div>
		<label>氏名(カタカナ)</label>
		<span>{{last_name_kana}}</span>&nbsp;<span>{{first_name_kana}}</span>
	</div>
	
	<div>
		<label>電話番号</label>
		<span>{{tel}}</span>
	</div>
	
	<div>
		<label>郵便番号</label>
		<span>{{post_code}}</span>
	</div>
	
	<div>
		<label>住所</label>
		<span>{{address}}</span>
	</div>
	
	<div>
		<label>誕生日</label>
		<span>{{birthday}}</span>
	</div>
	
	<div>
		<label>興味あるもの</label>
		<div v-for="(flg, i) in interests" style="display:inline-block;margin-right:5px">
			<span v-if="flg">{{interestData[i].text}}</span>
			
		</div>
	</div>
	
	<div>
		<label>プラン</label>
		<span>{{planList[plan]}}</span>
	</div>
	
	<div id="err_step4" class="text-danger" style="display:none"></div>
	
	<button onclick="returnBtnForStep4()" class="btn btn-default">戻る</button>
	<button onclick="reg()" class="btn btn-success">登録</button>
	
	
</div>


<div id="step5">
	<div style="width:100%;text-align:center">
		<span style="color:#218716;font-size:2em;">登録完了しました。</span>
	</div>
</div>
</div><!-- app1 -->





<div class="yohaku"></div>

<ol class="breadcrumb">
	<li><a href="/">ホーム</a></li>
	<li><a href="/sample">サンプルソースコード</a></li>
	<li><a href="/sample/js">JavaScript ｜ サンプル</a></li>
	<li>メンバー登録フォーム</li>
</ol>
</div><!-- content -->
<div id="footer">(C) kenji uehara 2019-3-7</div>
</body>
</html>	
	

/**
 * メンバー登録フォーム 
 * @date 2019-3-7 新規作成
 * @version 1.0.0
 */

var vueApp; // vue.js
var m_stepElms = {}; // ステップ要素リスト

jQuery(() => {
	
	// ▼ Vue.jsの初期設定
	vueApp = new Vue({
		el: '#app1',
		data: {
			email: '',
			password: '',
			last_name: '',
			first_name: '',
			last_name_kana: '',
			first_name_kana: '',
			tel: '',
			post_code: '',
			address: '',
			birthday: '',
			interests: [false, false, false, false, false],
			interestData:[
				{text:'釣り', value:1, xid:'interest1'},
				{text:'登山', value:2, xid:'interest2'},
				{text:'料理', value:3, xid:'interest3'},
				{text:'ゲーム', value:4, xid:'interest4'},
				{text:'その他', value:5, xid:'interest5'},
			],
			plan: '',
			planList:{
				'100': '猫観光ツアープラン',
				'101': '登山ガイド',
				'102': '遺跡ツアー',
				'104': '食べ歩きツアー',
			}
		}
	});
	
	// jquery.validate.min.jsの拡張
	_exJQueryValidator();
	
	// ▼ バリデーションの初期化
	_initValid('step1');
	_initValid('step2');
	_initValid('step3');
	
	// ステップ要素リストを取得する
	m_stepElms = _getStepElms(['#step1', '#step2', '#step3', '#step4', '#step5']);
	
	_showStep('#step1');// step1を表示
	

	
	
});


/**
 * バリデーションの初期化
 * @param string step_name ステップ名
 */
function _initValid(step_name){
	
	var rules; // バリデーションルール
	var messages; // バリデーションのエラーメッセージ（固有指定用）
	
	// ▼ ステップごとの入力ルールの定義
	switch(step_name){
	case 'step1':
		rules = {
			'email': {required: true, email: true},
			'password': {required: true,  minlength: 8, maxlength: 100, password_strength: true},
			'password_confirm': {equalTo: '[name=password]' },
		};
		
		// 入力項目ごとのエラーメッセージ定義
		messages = {
			password: {
				required: 'パスワードを入力してください',
				minlength: 'パスワードは8文字以上で入力してください',
			},
			password_confirm: {
				required: '確認のため再度入力してください',
				equalTo: '同じパスワードをもう一度入力してください。'
			}
		};
		
		break;
		
	case 'step2':
		rules = {
			'last_name': {required: true, maxlength: 50},
			'first_name': {required: true, maxlength: 50},
			'last_name_kana': {required: true, katakana: true, maxlength: 50},
			'first_name_kana': {required: true, katakana: true, maxlength: 50},
			'tel': {required: true, phone: true},
			'post_code': {postcode: true},
			'address': {maxlength: 100},
			'gender': {required: true},
		};
		
		// 入力項目ごとのエラーメッセージ定義
		messages = {
			'last_name': {
				required: "「氏」を入力してください"
			},
			'first_name': {
				required: "「名」を入力してください"
			},
		};
		break;
	case 'step3':
		rules = {
			'interests[]': {required: true},
			'plan': {required: true},
		};
		break;
	default:
		return;
	}
	
	var form_slt = '#form_' + step_name;
	
	$(form_slt).validate({
		rules: rules,
		messages: messages,

		//エラーメッセージ出力箇所を調整
		errorPlacement: function(error, element){
			if (element.is(':radio')) {
				error.appendTo(element.parent());
			}else if (element.is(':checkbox')) {
				error.appendTo(element.parent());
			}else {
				error.insertAfter(element);
			}
		}
	});
	
}


/**
 * STEP1の「次へ」ボタンを押下
 */
function nextBtnForStep1(){

	var valid_res = $('#form_step1').valid();
	
	if(!valid_res) return;

	// ▼ メールアドレス登録済みチェック 
	var errElm = jQuery('#err_step1');
	errElm.hide();
	_checkRegistered((registered)=>{
		if(registered){
			errElm.html('すでに登録済みのメールアドレスです。');
			errElm.show();
		}else{
			_showStep('#step2');// step1を表示
		}
	});
	
}


/**
 * メールアドレス登録済みチェック 
 * @param function チェック後コールバック
 */
function _checkRegistered(afterCallback){

	var sendData = {
			email: vueApp.email
	};
	var send_json = JSON.stringify(sendData);//データをJSON文字列にする。
	var ajax_url = 'check_registered.php';

	// AJAX
	jQuery.ajax({
		type: "POST",
		url: ajax_url,
		data: "key1=" + send_json,
		cache: false,
		dataType: "text",
	})
	.done((res_json, type) => {
		var res;
		try{
			res =jQuery.parseJSON(res_json);//パース
			
		}catch(e){
			jQuery("#err").append(res_json);
			console.log(res_json);
			return;
		}
		
		// コールバックを実行
		afterCallback(res.registered)
		
	})
	.fail((jqXHR, statusText, errorThrown) => {
		jQuery('#err').append('アクセスエラー');
		jQuery('#err').append(jqXHR.responseText);
		alert(statusText);
	});
}


/**
 * STEP2の「次へ」ボタンを押下
 */
function nextBtnForStep2(){

	var valid_res = $('#form_step2').valid();
	
	if(valid_res){
		_showStep('#step3');// step3を表示
	}

}

/**
 * STEP2の「戻る」ボタン押下
 */
function returnBtnForStep2(){
	_showStep('#step1');// step1を表示
}

/**
 * STEP3の「次へ」ボタン押下
 */
function nextBtnForStep3(){
	var valid_res = $('#form_step3').valid();
	
	if(valid_res){
		_showStep('#step4');
	}
}


/**
 * STEP3の「戻る」ボタン押下
 */
function returnBtnForStep3(){
	_showStep('#step2');// step1を表示
}


/**
 * STEP3の「戻る」ボタン押下
 */
function returnBtnForStep4(){
	_showStep('#step3');// step1を表示
}


/**
 * 登録
 * @returns
 */
function reg(){
	
	// 登録済みチェック
	var errElm = jQuery('#err_step4');
	errElm.hide();
	_checkRegistered((registered)=>{
		if(registered){
			errElm.html('すでに登録済みのメールアドレスです。');
			errElm.show();
		}else{
			_reg2();
		}
	});
}

/**
 * 登録2
 */
function _reg2(){
	
	// Ajaxによる登録
	_regByAjax(()=>{
		_showStep('#step5');// step1を表示
	});
	
}


/**
 * Ajaxによる登録
 * @param function 登録後コールバック
 */
function _regByAjax(afterCallback){
	
	var sendData = {};
	
	// ▼ vue.jsで管理している全データをsendDataに詰めなおす
	for(var key in vueApp._data){
		sendData[key] = vueApp._data[key];
	}
	
	var send_json = JSON.stringify(sendData);//データをJSON文字列にする。
	var ajax_url = 'reg.php';

	// AJAX
	jQuery.ajax({
		type: "POST",
		url: ajax_url,
		data: "key1=" + send_json,
		cache: false,
		dataType: "text",
	})
	.done((res_json, type) => {
		var res;
		try{
			res =jQuery.parseJSON(res_json);//パース
			
		}catch(e){
			jQuery("#err").append(res_json);
			console.log(res_json);
			return;
		}
		
		// コールバックを実行
		afterCallback(res.registered)
		
	})
	.fail((jqXHR, statusText, errorThrown) => {
		jQuery('#err').append('アクセスエラー');
		jQuery('#err').append(jqXHR.responseText);
		alert(statusText);
	});
}


/**
 * 指定したステップ区分を表示する
 * @param xid 指定ステップ区分のID属性
 */
function _showStep(xid){

	for(var i in m_stepElms){
		var stepElm = m_stepElms[i];
		stepElm.hide();
	}
	m_stepElms[xid].show();
	
	
}


/**
 * ステップ要素リストを取得する
 * @param stepXids ステップID属性リスト
 * @returns object ステップ要素リスト
 */
function _getStepElms(stepXids){
	var stepElms = {};
	for(var i in stepXids ){
		var xid = stepXids[i];
		var elm = jQuery(xid);
		if(elm[0]){
			stepElms[xid] = elm;
		}
	}
	return stepElms;
}

/**
 * jquery.validate.min.jsの拡張
 * @returns
 */
function _exJQueryValidator(){
	// 標準エラーメッセージの変更
	$.extend($.validator.messages, {
		email: '正しいメールアドレスの形式で入力して下さい',
		required: '入力必須です',
		phone: "正しい電話番号の形式で入力してください",
	});

	// 独自ルールを追加
	jQuery.validator.addMethod("katakana", function(value, element) {
			return this.optional(element) || /^([ァ-ヶー]+)$/.test(value);
		}, "全角カタカナを入力してください"
	);
	jQuery.validator.addMethod("kana", function(value, element) {
			return this.optional(element) || /^([ァ-ヶーぁ-ん]+)$/.test(value);
		}, "全角ひらがな･カタカナを入力してください"
	);
	jQuery.validator.addMethod("hiragana", function(value, element) {
			return this.optional(element) || /^([ぁ-ん]+)$/.test(value);
		}, "全角ひらがなを入力してください"
	);
	jQuery.validator.addMethod("phone", function(value, element) {
			return this.optional(element) || /^(?:¥+?¥d+-)?¥d+(?:-¥d+){2}$|^¥+?¥d+$/.test(value);
		}, "正しい電話番号を入力してください"
	);
	jQuery.validator.addMethod("postcode", function(value, element) {
			return this.optional(element) || /^¥d{3}¥-?¥d{4}$/.test(value);
		}, "郵便番号を入力してください（例:123-4567）"
	);
	jQuery.validator.addMethod("password_strength", function(value, element) {
			return this.optional(element) || /^(?=.*?[a-z])(?=.*?¥d)[a-z¥d]{6,100}$/.test(value);
		}, "英数字を組み合わせたパスワードを入力してください"
	);
}


/**
 * テストデータを入力
 */
function testDataInput(){
	
	_setValueToInputByName('email', 'example.123@example.net');
	_setValueToInputByName('password', 'abcd1234');
	_setValueToInputByName('password_confirm', 'abcd1234');
	_setValueToInputByName('last_name', '山原');
	_setValueToInputByName('first_name', '九稲');
	_setValueToInputByName('last_name_kana', 'ヤンバル');
	_setValueToInputByName('first_name_kana', 'クイナ');
	_setValueToInputByName('tel', '+81-90-0123-4567');
	_setValueToInputByName('post_code', '123-4567');
	_setValueToInputByName('address', '沖縄県国頭郡奥　123-4  天然記念物マンション 999号室');
	_setValueToInputByName('birthday', '2012-12-12');
	
}



/**
 * Vue.jsとjQueryの連動を保ちつつ、値をinput要素にセットする。
 * @param string x_name name属性
 * @param mixed value 値
 */
function _setValueToInputByName(x_name, value){
	
	var slt = `input[name='${x_name}']`;
	_setValueToInputVJ(slt, value);
	
}



/**
 * Vue.jsとjQueryの連動を保ちつつ、値をinput要素にセットする。
 * @param mixed jqElm jQuery要素、もしくはセレクタ
 * @param mixed value 値
 */
function _setValueToInputVJ(jqElm, value){
	if(typeof jqElm == 'string') jqElm = jQuery(jqElm);
	
	if(jqElm[0]){
		jqElm.val(value);
		jqElm[0].dispatchEvent(new Event('input')); // vue.js側に変更をイベント発信する
	}
	
}



	

2019-3-20

Vue.jsの要素の表示切替

HTML

	<div id="app1">
		<input type="text" v-model="test1" v-if="flg_a==1" />
	</div>
	

JavaScript

	var app1 = new Vue({
		el: '#app1',
		data: {
			test1: 'テスト',
			flg_a:1
		}
	})
	

flg_aが1である場合のみテキストボックス要素は表示される。


2019-11-19

xxx

2019-3-14