入力フォームの整形とデータチェック、バリデーション

HTML入力フォームで「半角で入力してください」「カナで入力してください」など入力方法を指示してくる場合がある。<br>
入力フォーム側で半角やカナに自動変更する方がユーザービリティに優れている。

この様なケースは個別対応や各種ライブラリを自作してきたがこの度比較的綺麗にまとまったので公開してみたいと思う。<br>
個人用で使用してきたため、これからも拡張されていくだろう。

## 使い方

input[type="text"]要素にdata-inputAssist属性を記述。
```
<input type="text" data-inputAssist="ascii">
```

HTMLの最後(フォームのDOM形成後)にソースコード設置
```
<script src="inputassist.js"></script>
```

## ソースコード

inputassist.js

```
/**
 * 入力フォームの整形とデータチェック
 *
 * <input type="text" data-inputAssist="ascii">				ascii文字
 * <input type="text" data-inputAssist="num">				数字
 * <input type="text" data-inputAssist="minusNum">			数字(マイナス可)
 * <input type="text" data-inputAssist="numComma">			数字とカンマのみ
 * <input type="text" data-inputAssist="float">				小数点数
 * <input type="text" data-inputAssist="email">				メールアドレス形式
 * <input type="text" data-inputAssist="kana">				フリガナ形式 半角カナを全角 カナのみ
 * <input type="text" data-inputAssist="str">				名前や住所形式 半角カナを全角
 * <input type="text" data-inputAssist="strHalf">			通常文字列だが適宜半角変換
 * <input type="text" data-inputAssist="tel">				電話番号形式
 * <input type="text" data-inputAssist="shortDate">			'20140125'形式の日付
 * <input type="text" data-inputAssist="date">				'2014-04-25'形式の日付
 * <input type="text" data-inputAssist="birthDate">			'2014-04-25'形式の日付 未来日は受け付け不可
 * <input type="text" data-inputAssist="dateTime">			'2014-04-25 12:05:00'形式の日時
 * <input type="text" data-inputAssist="time">				'00:00' 時刻5桁形式
 * <input type="text" data-inputAssist="shortPostal">		'4350054'形式の郵便番号
 * <input type="text" data-inputAssist="postal">			'435-0054'形式の郵便番号
 * <input type="text" data-inputAssist="addSpanJpNum">		spanタグで日本数値付加
 * <input type="text" data-inputAssist="addSpanJpNum1000">	spanタグで日本数値付加 千円単位
 * <input type="text" data-inputAssist="addSpanJpYen">		spanタグで日本数値付加 '円'も付加
 * <input type="text" data-inputAssist="addSpanJpYen1000">	spanタグで日本数値付加 千円単位 '円'も付加
 * <input type="text" data-inputAssist="addDivJpNum">		divタグで日本数値付加
 * <input type="text" data-inputAssist="addDivJpNum1000">	divタグで日本数値付加 千円単位
 * <input type="text" data-inputAssist="addDivJpYen">		divタグで日本数値付加 '円'も付加
 * <input type="text" data-inputAssist="addDivJpYen1000">	divタグで日本数値付加 千円単位 '円'も付加
 *
 * @author ao-system, Inc.
 */
(() => {
	const _attribute = 'data-inputAssist';
	const _inputAssistElms = document.querySelectorAll('[' + _attribute + ']');
	//
	init();
	function init() {
		_inputAssistElms.forEach((elm) => {
			const actionStr = elm.getAttribute(_attribute);
			const actions = actionStr.split(',');
			actions.forEach((act) => {
				if (act == '') {
					//nothing
				} else if (act == 'ascii') {
					elm.addEventListener('blur',() => {validateAscii(elm);});
				} else if (act == 'num') {
					elm.addEventListener('blur',() => {validateNum(elm);});
				} else if (act == 'minusNum') {
					elm.addEventListener('blur',() => {validateMinusNum(elm);});
				} else if (act == 'numComma') {
					elm.addEventListener('blur',() => {validateNumComma(elm);});
				} else if (act == 'float') {
					elm.addEventListener('blur',() => {validateFloat(elm);});
				} else if (act == 'time') {
					elm.addEventListener('blur',() => {validateTime(elm);});
				} else if (act == 'email') {
					elm.addEventListener('blur',() => {validateEmail(elm);});
				} else if (act == 'kana') {
					elm.addEventListener('blur',() => {validateKana(elm);});
				} else if (act == 'str') {
					elm.addEventListener('blur',() => {validateStr(elm);});
				} else if (act == 'strHalf') {
					elm.addEventListener('blur',() => {validateStrHalf(elm);});
				} else if (act == 'tel') {
					elm.addEventListener('blur',() => {validateTel(elm);});
				} else if (act == 'shortDate') {
					elm.addEventListener('blur',() => {validateShortDate(elm);});
				} else if (act == 'date') {
					elm.addEventListener('blur',() => {validateDate(elm);});
				} else if (act == 'birthDate') {
					elm.addEventListener('blur',() => {validateBirthDate(elm);});
				} else if (act == 'dateTime') {
					elm.addEventListener('blur',() => {validateDateTime(elm);});
				} else if (act == 'postal') {
					elm.addEventListener('blur',() => {validatePostal(elm);});
				} else if (act == 'shortPostal') {
					elm.addEventListener('blur',() => {validateShortPostal(elm);});
				} else if (act == 'addSpanJpNum') {
					elm.addEventListener('blur',() => {addSpanJpNum(elm);});
					window.addEventListener('load',() => {addSpanJpNum(elm);});
				} else if (act == 'addSpanJpNum1000') {
					elm.addEventListener('blur',() => {addSpanJpNum1000(elm);});
					window.addEventListener('load',() => {addSpanJpNum1000(elm);});
				} else if (act == 'addSpanJpYen') {
					elm.addEventListener('blur',() => {addSpanJpYen(elm);});
					window.addEventListener('load',() => {addSpanJpYen(elm);});
				} else if (act == 'addSpanJpYen1000') {
					elm.addEventListener('blur',() => {addSpanJpYen1000(elm);});
					window.addEventListener('load',() => {addSpanJpYen1000(elm);});
				} else if (act == 'addDivJpNum') {
					elm.addEventListener('blur',() => {addDivJpNum(elm);});
					window.addEventListener('load',() => {addDivJpNum(elm);});
				} else if (act == 'addDivJpNum1000') {
					elm.addEventListener('blur',() => {addDivJpNum1000(elm);});
					window.addEventListener('load',() => {addDivJpNum1000(elm);});
				} else if (act == 'addDivJpYen') {
					elm.addEventListener('blur',() => {addDivJpYen(elm);});
					window.addEventListener('load',() => {addDivJpYen(elm);});
				} else if (act == 'addDivJpYen1000') {
					elm.addEventListener('blur',() => {addDivJpYen1000(elm);});
					window.addEventListener('load',() => {addDivJpYen1000(elm);});
				}
			});
		});
	}

// ascii文字
	function validateAscii(elm) {
		const src = elm.value;
		const dst = safetyAscii(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
	}

// 数字
	function validateNum(elm) {
		const src = elm.value;
		const dst = safetyNum(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
		const num = Number(elm.value);
		elm.value = (num == 0) ? '' : num;
	}

// 数字(マイナス可)
	function validateMinusNum(elm) {
		const src = elm.value;
		const dst = safetyMinusNum(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
		const num = Number(elm.value);
		elm.value = (num == 0) ? '' : num;
	}

// 数字とカンマ
	function validateNumComma(elm) {
		const src = elm.value;
		const dst = safetyNumComma(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
	}

// 小数点数
	function validateFloat(elm) {
		const src = elm.value;
		let dst = parseFloat(elm.value);
		if (isNaN(dst)) {
			dst = '';
		}
		elm.value = dst;
		if (String(src).length != String(dst).length) {
			flashElement(elm);
		}
	}

// '20140125'形式の日付
	function validateShortDate(elm) {
		const src = elm.value;
		const dst = safetyNum(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
		if (dst.length == 0) {
			elm.style.color = 'black';
			return;
		}
		if (dst.length != 8) {
			elm.style.color = 'red';
			return;
		}
		const y = Number(dst.substr(0,4));
		const m = Number(dst.substr(4,2));
		const d = Number(dst.substr(6,2));
		if (checkDate(y,m,d) == false) {
			elm.style.color = 'red';
			return;
		}
		elm.style.color = 'black';
	}

// '2014-04-25'形式の日付
	function validateDate(elm) {
		const src = elm.value;
		const dst = safetyHyphenNum(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
		if (dst.length == 0) {
			elm.style.color = 'black';
			return;
		}
		if (dst.match(/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/) == null) {
			elm.style.color = 'red';
			return;
		}
		const y = Number(dst.substr(0,4));
		const m = Number(dst.substr(5,2));
		const d = Number(dst.substr(8,2));
		if (checkDate(y,m,d) == false) {
			elm.style.color = 'red';
			return;
		}
		elm.style.color = 'black';
	}

// '2014-04-25'形式の日付 未来日は受け付け不可
	function validateBirthDate(elm) {
		const src = elm.value;
		const dst = safetyHyphenNum(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
		if (dst.length == 0) {
			elm.style.color = 'black';
			return;
		}
		if (dst.match(/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/) == null) {
			elm.style.color = 'red';
			return;
		}
		const y = Number(dst.substr(0,4));
		const m = Number(dst.substr(5,2));
		const d = Number(dst.substr(8,2));
		if (checkBirthDate(y,m,d) == false) {
			elm.style.color = 'red';
			return;
		}
		elm.style.color = 'black';
	}

// '2014-04-25 12:09:00'形式の日時
	function validateDateTime(elm) {
		const src = elm.value;
		const dst = safetyHyphenColonNum(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
		if (dst.length == 0) {
			elm.style.color = 'black';
			return;
		}
		if (dst.match(/^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}$/) == null) {
			elm.style.color = 'red';
			return;
		}
		const y = Number(dst.substr(0,4));
		const m = Number(dst.substr(5,2));
		const d = Number(dst.substr(8,2));
		if (checkDate(y,m,d) == false) {
			elm.style.color = 'red';
			return;
		}
		const h = Number(dst.substr(11,2));
		if (h >= 24) {
			elm.style.color = 'red';
			return;
		}
		const i = Number(dst.substr(14,2));
		if (i >= 60) {
			elm.style.color = 'red';
			return;
		}
		const s = Number(dst.substr(17,2));
		if (s >= 60) {
			elm.style.color = 'red';
			return;
		}
		elm.style.color = 'black';
	}

// '4350054'形式の郵便番号
	function validateShortPostal(elm) {
		const src = elm.value;
		const dst = safetyNum(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
		if (dst.length == 0) {
			elm.style.color = 'black';
			return;
		}
		elm.style.color = (dst.length != 7) ? 'red' : 'black';
	}

// '435-0054'形式の郵便番号
	function validatePostal(elm) {
		const src = elm.value;
		let dst = safetyHyphenNum(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
		if (dst.length == 0) {
			elm.style.color = 'black';
			return;
		}
		if (dst[3] != '-') {	//'4350054' --> '435-0054'
			const num = safetyNum(elm.value);
			if (num.length == 7) {
				dst = num.substr(0,3) + '-' + num.substr(3,4);
				elm.value = dst;
			}
		}
		if (dst.match(/^[0-9]{3}-[0-9]{4}$/) == null) {
			elm.style.color = 'red';
			return;
		}
		elm.style.color = 'black';
	}

// 電話番号形式
	function validateTel(elm) {
		const src = elm.value;
		const dst = safetyTel(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
	}

// '00:00' 時刻5桁形式
	function validateTime(elm) {
		const src = elm.value;
		const dst = safetyTime(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
		if (dst.length == 0) {
			elm.style.color = 'black';
			return;
		}
		const tm = [];
		if (dst.indexOf(':') != -1) {
			tm = dst.split(':');
		} else {
			if (dst.length != 4) {
				elm.style.color = 'red';
				return;
			}
			tm[0] = dst.substr(0,2);
			tm[1] = dst.substr(2,2);
		}
		tm[0] = Number(tm[0]);
		tm[1] = Number(tm[1]);
		if (tm[0] > 23) {
			elm.style.color = 'red';
			return;
		}
		if (tm[1] > 59) {
			elm.style.color = 'red';
			return;
		}
		tm[0] = String(tm[0]);
		tm[1] = String(tm[1]);
		if (tm[0].length == 1) {
			tm[0] = '0' + tm[0];
		}
		if (tm[1].length == 1) {
			tm[1] = '0' + tm[1];
		}
		elm.value = tm[0] + ':' + tm[1];
		elm.style.color = 'black';
	}

// メールアドレス形式
	function validateEmail(elm) {
		const src = elm.value;
		const dst = safetyEmail(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
		if (dst.length == 0) {
			elm.style.color = 'black';
			return;
		}
		elm.style.color = isMail(dst) ? 'black' : 'red';
	}

// フリガナ形式
	function validateKana(elm) {
		const src = elm.value;
		const dst = safetyKana(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
	}

// 名前や住所形式
	function validateStr(elm) {
		const src = elm.value;
		const dst = kanaToZen(elm.value);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
	}

// 通常文字列だが適宜半角変換
	function validateStrHalf(elm) {
		const replaceFm = [
			'０','１','２','３','４','５','６','７','８','９',
			'ａ','ｂ','ｃ','ｄ','ｅ','ｆ','ｇ','ｈ','ｉ','ｊ','ｋ','ｌ','ｍ',
			'ｎ','ｏ','ｐ','ｑ','ｒ','ｓ','ｔ','ｕ','ｖ','ｗ','ｘ','ｙ','ｚ',
			'Ａ','Ｂ','Ｃ','Ｄ','Ｅ','Ｆ','Ｇ','Ｈ','Ｉ','Ｊ','Ｋ','Ｌ','Ｍ',
			'Ｎ','Ｏ','Ｐ','Ｑ','Ｒ','Ｓ','Ｔ','Ｕ','Ｖ','Ｗ','Ｘ','Ｙ','Ｚ',
			'　','＠','＃','％','（','）','｛','｝','、','，',
		];
		const replaceTo = [
			'0','1','2','3','4','5','6','7','8','9',
			'a','b','c','d','e','f','g','h','i','j','k','l','m',
			'n','o','p','q','r','s','t','u','v','w','x','y','z',
			'A','B','C','D','E','F','G','H','I','J','K','L','M',
			'N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
			' ','@','#','%','(',')','{','}',',',',',
		];
		const src = elm.value;
		let dst = kanaToZen(elm.value);
		dst = replaceStr(dst,replaceFm,replaceTo);
		elm.value = dst;
		if (src.length != dst.length) {
			flashElement(elm);
		}
	}

//---------------------------------------------------

// spanタグで日本数値付加
	function addSpanJpNum(elm) {
		let num = elm.value;
		let minusFlag = false;
		if (num.substr(0,1) == '-') {
			minusFlag = true;
			num = num.substr(1);
		}
		const result = ' ' + (minusFlag ? '-' : '') + ichiManOkuCho(num);
		if (elm.nextSibling && elm.nextSibling.className == 'JpNum') {
			elm.nextSibling.innerHTML = result;
		} else {
			const strElm = document.createTextNode(result);
			const spanElm = document.createElement('span');
			spanElm.setAttribute('class','JpNum');
			spanElm.appendChild(strElm);
			elm.parentNode.appendChild(spanElm);
		}
	}

// spanタグで日本数値付加 千円単位
	function addSpanJpNum1000(elm) {
		let num = elm.value;
		let minusFlag = false;
		if (num.substr(0,1) == '-') {
			minusFlag = true;
			num = num.substr(1);
		}
		const result = ' ' + (minusFlag ? '-' : '') + senManOkuCho(num);
		if (elm.nextSibling && elm.nextSibling.className == 'JpNum') {
			elm.nextSibling.innerHTML = result;
		} else {
			const strElm = document.createTextNode(result);
			const spanElm = document.createElement('span');
			spanElm.setAttribute('class','JpNum');
			spanElm.appendChild(strElm);
			elm.parentNode.appendChild(spanElm);
		}
	}

// spanタグで日本数値付加 '円'も付加
	function addSpanJpYen(elm) {
		let num = elm.value;
		let minusFlag = false;
		if (num.substr(0,1) == '-') {
			minusFlag = true;
			num = num.substr(1);
		}
		let result = ' ' + (minusFlag ? '-' : '') + ichiManOkuCho(num);
		if (parseInt(num) > 0) {
			result += '円';
		}
		if (elm.nextSibling && elm.nextSibling.className == 'JpNum') {
			elm.nextSibling.innerHTML = result;
		} else {
			const strElm = document.createTextNode(result);
			const spanElm = document.createElement('span');
			spanElm.setAttribute('class','JpNum');
			spanElm.appendChild(strElm);
			elm.parentNode.appendChild(spanElm);
		}
	}

// spanタグで日本数値付加 千円単位 '円'も付加
	function addSpanJpYen1000(elm) {
		let num = elm.value;
		let minusFlag = false;
		if (num.substr(0,1) == '-') {
			minusFlag = true;
			num = num.substr(1);
		}
		let result = ' ' + (minusFlag ? '-' : '') + senManOkuCho(num);
		if (parseInt(num) > 0) {
			result += '円';
		}
		if (elm.nextSibling && elm.nextSibling.className == 'JpNum') {
			elm.nextSibling.innerHTML = result;
		} else {
			const strElm = document.createTextNode(result);
			const spanElm = document.createElement('span');
			spanElm.setAttribute('class','JpNum');
			spanElm.appendChild(strElm);
			elm.parentNode.appendChild(spanElm);
		}
	}

// divタグで日本数値付加
	function addDivJpNum(elm) {
		let num = elm.value;
		let minusFlag = false;
		if (num.substr(0,1) == '-') {
			minusFlag = true;
			num = num.substr(1);
		}
		const result = ' ' + (minusFlag ? '-' : '') + ichiManOkuCho(num);
		if (elm.nextSibling && elm.nextSibling.className == 'JpNum') {
			elm.nextSibling.innerHTML = result;
		} else {
			const strElm = document.createTextNode(result);
			const divElm = document.createElement('div');
			divElm.setAttribute('class','JpNum');
			divElm.appendChild(strElm);
			elm.parentNode.appendChild(divElm);
		}
	}

// divタグで日本数値付加 千円単位
	function addDivJpNum1000(elm) {
		let num = elm.value;
		let minusFlag = false;
		if (num.substr(0,1) == '-') {
			minusFlag = true;
			num = num.substr(1);
		}
		const result = ' ' + (minusFlag ? '-' : '') + senManOkuCho(num);
		if (elm.nextSibling && elm.nextSibling.className == 'JpNum') {
			elm.nextSibling.innerHTML = result;
		} else {
			const strElm = document.createTextNode(result);
			const divElm = document.createElement('div');
			divElm.setAttribute('class','JpNum');
			divElm.appendChild(strElm);
			elm.parentNode.appendChild(divElm);
		}
	}

// divタグで日本数値付加 '円'も付加
	function addDivJpYen(elm) {
		let num = elm.value;
		let minusFlag = false;
		if (num.substr(0,1) == '-') {
			minusFlag = true;
			num = num.substr(1);
		}
		let result = ' ' + (minusFlag ? '-' : '') + ichiManOkuCho(num);
		if (parseInt(num) > 0) {
			result += '円';
		}
		if (elm.nextSibling && elm.nextSibling.className == 'JpNum') {
			elm.nextSibling.innerHTML = result;
		} else {
			const strElm = document.createTextNode(result);
			const divElm = document.createElement('div');
			divElm.setAttribute('class','JpNum');
			divElm.appendChild(strElm);
			elm.parentNode.appendChild(divElm);
		}
	}

// divタグで日本数値付加 千円単位 '円'も付加
	function addDivJpYen1000(elm) {
		let num = elm.value;
		let minusFlag = false;
		if (num.substr(0,1) == '-') {
			minusFlag = true;
			num = num.substr(1);
		}
		let result = ' ' + (minusFlag ? '-' : '') + senManOkuCho(num);
		if (parseInt(num) > 0) {
			result += '円';
		}
		if (elm.nextSibling && elm.nextSibling.className == 'JpNum') {
			elm.nextSibling.innerHTML = result;
		} else {
			const strElm = document.createTextNode(result);
			const divElm = document.createElement('div');
			divElm.setAttribute('class','JpNum');
			divElm.appendChild(strElm);
			elm.parentNode.appendChild(divElm);
		}
	}

//---------------------------------------------------

//ハイライトして戻す
	function flashElement(elm) {
		elm.style.boxShadow = '0 0 15px red';
		setTimeout(() => { elm.style.boxShadow = ''; },300);
	}

//配列の中にvalueが含まれるかどうか
	function inArray(needle,ary) {
		for (let i = 0; i < ary.length; i++) {
			if (needle == ary[i]) {
				return true;
			}
		}
		return false;
	}

//文字置換
	function replaceStr(str,replaceFm,replaceTo) {
		for (let i = 0; i < replaceFm.length; i++) {
			str = str.replace(new RegExp(replaceFm[i], 'g'),replaceTo[i]);
		}
		return str;
	}

//文字列を、配列の中に含まれている文字だけにする
	function inArrayStr(str,searchAry) {
		const strAry = str.split('');
		let result = '';
		for (let i = 0; i < strAry.length; i++) {
			if (inArray(strAry[i],searchAry)) {
				result += String(strAry[i]);
			}
		}
		return result;
	}

//---------------------------------------------------

//メールアドレス文字列から不正な記号を取り去る
	function safetyEmail(str) {
		const replaceFm = ['＠','。','．','＿','－','ー','＋','＊',
			'０','１','２','３','４','５','６','７','８','９',
			'ａ','ｂ','ｃ','ｄ','ｅ','ｆ','ｇ','ｈ','ｉ','ｊ','ｋ','ｌ','ｍ',
			'ｎ','ｏ','ｐ','ｑ','ｒ','ｓ','ｔ','ｕ','ｖ','ｗ','ｘ','ｙ','ｚ',
			'Ａ','Ｂ','Ｃ','Ｄ','Ｅ','Ｆ','Ｇ','Ｈ','Ｉ','Ｊ','Ｋ','Ｌ','Ｍ',
			'Ｎ','Ｏ','Ｐ','Ｑ','Ｒ','Ｓ','Ｔ','Ｕ','Ｖ','Ｗ','Ｘ','Ｙ','Ｚ',
		];
		const replaceTo = ['@','.','.','_','-','-','+','*',
			'0','1','2','3','4','5','6','7','8','9',
			'a','b','c','d','e','f','g','h','i','j','k','l','m',
			'n','o','p','q','r','s','t','u','v','w','x','y','z',
			'A','B','C','D','E','F','G','H','I','J','K','L','M',
			'N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
		];
		str = replaceStr(str,replaceFm,replaceTo);
		str = inArrayStr(str,replaceTo);
		return str;
	}

//文字列をascii文字だけにする
	function safetyAscii(str) {
		const replaceFm = [
			'０','１','２','３','４','５','６','７','８','９',
			'ａ','ｂ','ｃ','ｄ','ｅ','ｆ','ｇ','ｈ','ｉ','ｊ','ｋ','ｌ','ｍ',
			'ｎ','ｏ','ｐ','ｑ','ｒ','ｓ','ｔ','ｕ','ｖ','ｗ','ｘ','ｙ','ｚ',
			'Ａ','Ｂ','Ｃ','Ｄ','Ｅ','Ｆ','Ｇ','Ｈ','Ｉ','Ｊ','Ｋ','Ｌ','Ｍ',
			'Ｎ','Ｏ','Ｐ','Ｑ','Ｒ','Ｓ','Ｔ','Ｕ','Ｖ','Ｗ','Ｘ','Ｙ','Ｚ',
			'　','！','”','＃','＄','％','＆','’','（','）','＊','＋','、','―','。','／','：','；','＜','＝','＞','？','＠','「','￥','」','＾','＿','‘','｛','｜','｝','～',
			'，','ー','．',
		];
		const replaceTo = [
			'0','1','2','3','4','5','6','7','8','9',
			'a','b','c','d','e','f','g','h','i','j','k','l','m',
			'n','o','p','q','r','s','t','u','v','w','x','y','z',
			'A','B','C','D','E','F','G','H','I','J','K','L','M',
			'N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
			' ','!','"','#','$','%','&','\'','(',')','*','+',',','-','.','/',':',';','<','=','>','?','@','[','\\',']','^','_','`','{','|','}','~',
			',','-','.',
		];
		str = replaceStr(str,replaceFm,replaceTo);
		str = inArrayStr(str,replaceTo);
		return str;
	}

//文字列を英数字だけにする
	function safetyAlphaNum(str) {
		const replaceFm = ['０','１','２','３','４','５','６','７','８','９',
			'ａ','ｂ','ｃ','ｄ','ｅ','ｆ','ｇ','ｈ','ｉ','ｊ','ｋ','ｌ','ｍ',
			'ｎ','ｏ','ｐ','ｑ','ｒ','ｓ','ｔ','ｕ','ｖ','ｗ','ｘ','ｙ','ｚ',
			'Ａ','Ｂ','Ｃ','Ｄ','Ｅ','Ｆ','Ｇ','Ｈ','Ｉ','Ｊ','Ｋ','Ｌ','Ｍ',
			'Ｎ','Ｏ','Ｐ','Ｑ','Ｒ','Ｓ','Ｔ','Ｕ','Ｖ','Ｗ','Ｘ','Ｙ','Ｚ',
		];
		const replaceTo = ['0','1','2','3','4','5','6','7','8','9',
			'a','b','c','d','e','f','g','h','i','j','k','l','m',
			'n','o','p','q','r','s','t','u','v','w','x','y','z',
			'A','B','C','D','E','F','G','H','I','J','K','L','M',
			'N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
		];
		str = replaceStr(str,replaceFm,replaceTo);
		str = inArrayStr(str,replaceTo);
		return str;
	}

//文字列を数字だけにする
	function safetyNum(str) {
		const replaceFm = ['０','１','２','３','４','５','６','７','８','９'];
		const replaceTo = ['0','1','2','3','4','5','6','7','8','9'];
		str = replaceStr(str,replaceFm,replaceTo);
		str = inArrayStr(str,replaceTo);
		return str;
	}

//文字列を数字だけにする マイナス許可
	function safetyMinusNum(str) {
		const replaceFm = ['ー','－'];
		const replaceTo = ['-','-'];
		str = replaceStr(str,replaceFm,replaceTo);
		let minusFlag = false;
		if (str.substr(0,1) == '-') {
			minusFlag = true;
		}
		str = safetyNum(str);
		return (minusFlag ? '-':'') + str;
	}

//文字列を数字とカンマだけにする 連続カンマや先頭と最後のカンマは削除
	function safetyNumComma(str) {
		const replaceFm = ['０','１','２','３','４','５','６','７','８','９','、','，'];
		const replaceTo = ['0','1','2','3','4','5','6','7','8','9',',',','];
		str = replaceStr(str,replaceFm,replaceTo);
		str = inArrayStr(str,replaceTo);
		const ary = str.split(',');
		let ary2 = [];
		ary.forEach((num) => {
			if (num != '') {
				ary2.push(num);
			}
		});
		return ary2.join(',');
	}

//文字列をハイフンと数字だけにする
	function safetyHyphenNum(str) {
		const replaceFm = ['０','１','２','３','４','５','６','７','８','９','ー','－','/','---','--'];
		const replaceTo = ['0','1','2','3','4','5','6','7','8','9','-','-','-','-','-'];
		str = replaceStr(str,replaceFm,replaceTo);
		str = inArrayStr(str,replaceTo);
		return str;
	}

//文字列をハイフンとコロンと数字とスペースだけにする
	function safetyHyphenColonNum(str) {
		const replaceFm = ['０','１','２','３','４','５','６','７','８','９','ー','－','/','---','--','：','　'];
		const replaceTo = ['0','1','2','3','4','5','6','7','8','9','-','-','-','-','-',':',' '];
		str = replaceStr(str,replaceFm,replaceTo);
		str = inArrayStr(str,replaceTo);
		return str;
	}

//文字列を数字とカンマだけにする
	function safetyCommaNum(str) {
		const replaceFm = ['０','１','２','３','４','５','６','７','８','９','、','，'];
		const replaceTo = ['0','1','2','3','4','5','6','7','8','9',',',','];
		str = replaceStr(str,replaceFm,replaceTo);
		str = inArrayStr(str,replaceTo);
		return commaNumericClean(str);
	}

//文字列を電話番号文字だけにする
	function safetyTel(str) {
		const replaceFm = ['０','１','２','３','４','５','６','７','８','９','（','）','ー','－','＋'];
		const replaceTo = ['0','1','2','3','4','5','6','7','8','9','(',')','-','-','+'];
		str = replaceStr(str,replaceFm,replaceTo);
		str = inArrayStr(str,replaceTo);
		return str;
	}
	//文字列を時刻文字だけにする
	function safetyTime(str) {
		const replaceFm = ['０','１','２','３','４','５','６','７','８','９','：','::'];
		const replaceTo = ['0','1','2','3','4','5','6','7','8','9',':',':'];
		str = replaceStr(str,replaceFm,replaceTo);
		str = inArrayStr(str,replaceTo);
		return str;
	}

//文字列をフリガナだけにする(名前のカナ入力)
	function safetyKana(str) {
		const replaceFm1 = [
			'ｳﾞ',
			'ｶﾞ','ｷﾞ','ｸﾞ','ｹﾞ','ｺﾞ',
			'ｻﾞ','ｼﾞ','ｽﾞ','ｾﾞ','ｿﾞ',
			'ﾀﾞ','ﾁﾞ','ﾂﾞ','ﾃﾞ','ﾄﾞ',
			'ﾊﾞ','ﾋﾞ','ﾌﾞ','ﾍﾞ','ﾎﾞ',
			'ﾊﾟ','ﾋﾟ','ﾌﾟ','ﾍﾟ','ﾎﾟ',
		];
		const replaceTo1 = [
			'ヴ',
			'ガ','ギ','グ','ゲ','ゴ',
			'ザ','ジ','ズ','ゼ','ゾ',
			'ダ','ヂ','ヅ','デ','ド',
			'バ','ビ','ブ','ベ','ボ',
			'パ','ピ','プ','ペ','ポ',
		];
		str = replaceStr(str,replaceFm1,replaceTo1);
		const replaceFm2 = [
			'ｱ','ｲ','ｳ','ｴ','ｵ',
			'ｶ','ｷ','ｸ','ｹ','ｺ',
			'ｻ','ｼ','ｽ','ｾ','ｿ',
			'ﾀ','ﾁ','ﾂ','ﾃ','ﾄ',
			'ﾅ','ﾆ','ﾇ','ﾈ','ﾉ',
			'ﾊ','ﾋ','ﾌ','ﾍ','ﾎ',
			'ﾏ','ﾐ','ﾑ','ﾒ','ﾓ',
			'ﾔ','ﾕ','ﾖ',
			'ﾗ','ﾘ','ﾙ','ﾚ','ﾛ',
			'ﾜ','ｦ','ﾝ',
			'ｧ','ｨ','ｩ','ｪ','ｫ',
			'ｬ','ｭ','ｮ',
			'ｯ','､','｡','ｰ','-','｢','｣','ﾞ','ﾟ',
		];
		const replaceTo2 = [
			'ア','イ','ウ','エ','オ',
			'カ','キ','ク','ケ','コ',
			'サ','シ','ス','セ','ソ',
			'タ','チ','ツ','テ','ト',
			'ナ','ニ','ヌ','ネ','ノ',
			'ハ','ヒ','フ','ヘ','ホ',
			'マ','ミ','ム','メ','モ',
			'ヤ','ユ','ヨ',
			'ラ','リ','ル','レ','ロ',
			'ワ','ヲ','ン',
			'ァ','ィ','ゥ','ェ','ォ',
			'ャ','ュ','ョ',
			'ッ','、','。','ー','ー','「','」','”','',
		];
		str = replaceStr(str,replaceFm2,replaceTo2);
		const replaceFm3 = [
			'が','ぎ','ぐ','げ','ご',
			'ざ','じ','ず','ぜ','ぞ',
			'だ','ぢ','づ','で','ど',
			'ば','び','ぶ','べ','ぼ',
			'ぱ','ぴ','ぷ','ぺ','ぽ',
			'あ','い','う','え','お',
			'か','き','く','け','こ',
			'さ','し','す','せ','そ',
			'た','ち','つ','て','と',
			'な','に','ぬ','ね','の',
			'は','ひ','ふ','へ','ほ',
			'ま','み','む','め','も',
			'や','ゆ','よ',
			'ら','り','る','れ','ろ',
			'わ','を','ん',
			'ぁ','ぃ','ぅ','ぇ','ぉ',
			'ゃ','ゅ','ょ',
			'っ',
			'　','  ','ーーー','ーー','－',
		];
		const replaceTo3 = [
			'ガ','ギ','グ','ゲ','ゴ',
			'ザ','ジ','ズ','ゼ','ゾ',
			'ダ','ヂ','ヅ','デ','ド',
			'バ','ビ','ブ','ベ','ボ',
			'パ','ピ','プ','ペ','ポ',
			'ア','イ','ウ','エ','オ',
			'カ','キ','ク','ケ','コ',
			'サ','シ','ス','セ','ソ',
			'タ','チ','ツ','テ','ト',
			'ナ','ニ','ヌ','ネ','ノ',
			'ハ','ヒ','フ','ヘ','ホ',
			'マ','ミ','ム','メ','モ',
			'ヤ','ユ','ヨ',
			'ラ','リ','ル','レ','ロ',
			'ワ','ヲ','ン',
			'ァ','ィ','ゥ','ェ','ォ',
			'ャ','ュ','ョ',
			'ッ',
			' ',' ','ー','ー','ー',
		];
		str = replaceStr(str,replaceFm3,replaceTo3);
		const replaceTo4 = [
			'ヴ',
			'ガ','ギ','グ','ゲ','ゴ',
			'ザ','ジ','ズ','ゼ','ゾ',
			'ダ','ヂ','ヅ','デ','ド',
			'バ','ビ','ブ','ベ','ボ',
			'パ','ピ','プ','ペ','ポ',
			'ア','イ','ウ','エ','オ',
			'カ','キ','ク','ケ','コ',
			'サ','シ','ス','セ','ソ',
			'タ','チ','ツ','テ','ト',
			'ナ','ニ','ヌ','ネ','ノ',
			'ハ','ヒ','フ','ヘ','ホ',
			'マ','ミ','ム','メ','モ',
			'ヤ','ユ','ヨ',
			'ラ','リ','ル','レ','ロ',
			'ワ','ヲ','ン',
			'ァ','ィ','ゥ','ェ','ォ',
			'ャ','ュ','ョ',
			'ッ','、','。','ー','「','」','”','',
			' ',
		];
		str = inArrayStr(str,replaceTo4);
		return str;
	}

//半角文字を全角文字にする
	function kanaToZen(str) {
		const replaceFm1 = [
			'ｳﾞ',
			'ｶﾞ','ｷﾞ','ｸﾞ','ｹﾞ','ｺﾞ',
			'ｻﾞ','ｼﾞ','ｽﾞ','ｾﾞ','ｿﾞ',
			'ﾀﾞ','ﾁﾞ','ﾂﾞ','ﾃﾞ','ﾄﾞ',
			'ﾊﾞ','ﾋﾞ','ﾌﾞ','ﾍﾞ','ﾎﾞ',
			'ﾊﾟ','ﾋﾟ','ﾌﾟ','ﾍﾟ','ﾎﾟ',
		];
		const replaceTo1 = [
			'ヴ',
			'ガ','ギ','グ','ゲ','ゴ',
			'ザ','ジ','ズ','ゼ','ゾ',
			'ダ','ヂ','ヅ','デ','ド',
			'バ','ビ','ブ','ベ','ボ',
			'パ','ピ','プ','ペ','ポ',
		];
		str = replaceStr(str,replaceFm1,replaceTo1);
		const replaceFm2 = [
			'ｱ','ｲ','ｳ','ｴ','ｵ',
			'ｶ','ｷ','ｸ','ｹ','ｺ',
			'ｻ','ｼ','ｽ','ｾ','ｿ',
			'ﾀ','ﾁ','ﾂ','ﾃ','ﾄ',
			'ﾅ','ﾆ','ﾇ','ﾈ','ﾉ',
			'ﾊ','ﾋ','ﾌ','ﾍ','ﾎ',
			'ﾏ','ﾐ','ﾑ','ﾒ','ﾓ',
			'ﾔ','ﾕ','ﾖ',
			'ﾗ','ﾘ','ﾙ','ﾚ','ﾛ',
			'ﾜ','ｦ','ﾝ',
			'ｧ','ｨ','ｩ','ｪ','ｫ',
			'ｬ','ｭ','ｮ',
			'ｯ','､','｡','ｰ','｢','｣','ﾞ','ﾟ',
		];
		const replaceTo2 = [
			'ア','イ','ウ','エ','オ',
			'カ','キ','ク','ケ','コ',
			'サ','シ','ス','セ','ソ',
			'タ','チ','ツ','テ','ト',
			'ナ','ニ','ヌ','ネ','ノ',
			'ハ','ヒ','フ','ヘ','ホ',
			'マ','ミ','ム','メ','モ',
			'ヤ','ユ','ヨ',
			'ラ','リ','ル','レ','ロ',
			'ワ','ヲ','ン',
			'ァ','ィ','ゥ','ェ','ォ',
			'ャ','ュ','ョ',
			'ッ','、','。','ー','「','」','”','',
		];
		str = replaceStr(str,replaceFm2,replaceTo2);
		return str;
	}

//---------------------------------------------------

//整数かどうか
	function isNumeric(num) {
		if (num.match(/[^0-9]/g) == null) {
			return false;
		}
		return true;
	}

//メールアドレスかどうか
	function isMail(str) {
		if (str.match(/^([a-zA-Z0-9])+([a-zA-Z0-9_\.\-\+\*])*@([a-zA-Z0-9_\-])+([a-zA-Z0-9_\.\-]+)+$/) == null) {
			return false;
		}
		if (str.match(/[^a-zA-Z0-9_@\.\-\+\*]/) != null) {	//全角や普段使わない記号は排除
			return false;
		}
		if (str.match(/\.[a-z]+$/) == null) {	//～.com ～.co.jp などの末尾チェック
			return false;
		}
		if (str.match(/\.\./) != null) {	//ドットの連続
			return false;
		}
		if (str.match(/\.@/) != null) {	// @の前にドット
			return false;
		}
		return true;
	}

//3桁の整数かどうか
	function isPostalA(str) {
		if (str.match(/^[0-9]{3}$/) == null) {
			return false;
		}
		return true;
	}

//4桁の整数かどうか
	function isPostalB(str) {
		if (str.match(/^[0-9]{4}$/) == null) {
			return false;
		}
		return true;
	}

//電話番号かどうか
	function isHyphenTel(str) {
		if (str.match(/^0[1-9][0-9]{0,3}-[0-9]{1,4}-[0-9]{4}$/) == null) {
			return false;
		}
		return true;
	}

//電話番号かどうか
	function isTel(str) {
		if (str.match(/[0-9\-\+]/) == null) {
			return false;
		}
		return true;
	}

//---------------------------------------------------

//配列の中の数値だけを抽出する
	function arrayNumeric(ary) {
		const result = [];
		for (let i = 0; i < ary.length; i++) {
			if (isNumeric(ary[i])) {
				result.push(ary[i]);
			}
		}
		return result;
	}

//カンマ区切り数字文字列を数値だけ配列で返す
	function commaNumeric(str) {
		const result = [];
		result = str.split(',');
		return arrayNumeric(result);
	}

//カンマ区切り数字文字列からゴミを取り除く
	function commaNumericClean(str) {
		if (str.length == 0) {
			return '';
		}
		let ary = commaNumeric(str);
		let result = '';
		for (let c = 0; c < ary.length - 1; c++) {
			result += ary[c] + ',';
		}
		result += ary[ary.length - 1];
		return result;
	}

//年、月、日が正しいかどうか
	function checkDate(y, m, d) {
	    const dt = new Date(y, m - 1, d);
	    if (dt == null || dt.getFullYear() != y || dt.getMonth() + 1 != m || dt.getDate() != d) {
	        return false;
	    }
	    return true;
	}

//年、月、日が正しいかどうか
	function checkBirthDate(y, m, d) {
	    if (checkDate(y, m, d) == false) {
	        return false;
	    }
		const indate = new Date(y, m - 1, d);
		const nowdate = new Date();
		if (indate.getTime() > nowdate.getTime()) {
			return false;
		}
	    return true;
	}

//年、月、日 から曜日を返す
	function toWeek(y, m, d) {
		const dt = new Date(y, m - 1, d);
		return ['日','月','火','水','木','金','土'][dt.getDay()];
	}

//---------------------------------------------------

})();
```

入力フォームの整形とデータチェック、バリデーション

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他